WPF System.Windows.Controls.WebBrowser not rendering link buttons

Asked 16/5, 2012 at 19:35 Answered 6/2, 2014 at 18:23

Solved html css webbrowser-control doctype x-ua-compatible

I have a web page that I display in a WPF WebBrowser control within a desktop application. I just updated the webpage to use styled buttons instead of the default gray buttons by changing from an asp.net Button type to an asp.net LinkButton and applying a CSS style to it:

    a.btnSave
    {
        background: url(Resources/Images/btnSave.png) no-repeat 0 0;
        display:inline-block;
        width: 75px;
        height: 23px;
        text-indent: -9999px;
    }
    a.btnSave:hover {background-position: 0 -23px;}

    a.btnCancel
    {
        background: url(Resources/Images/btnCancel.png) no-repeat 0 0;
        display:inline-block;
        width: 75px;
        height: 23px;
        text-indent: -9999px;
    }
    a.btnCancel:hover {background-position: 0 -23px;}

    a.btnReset
    {
        background: url(Resources/Images/btnReset.png) no-repeat 0 0;
        display:inline-block;
        width: 75px;
        height: 23px;
        text-indent: -9999px;
    }
    a.btnReset:hover {background-position: 0 -23px;}

...

<asp:LinkButton ID="btnSave" runat="server" CssClass="btnSave" OnClick="btnSave_Click" OnClientClick="OnSubmit()" UseSubmitBehavior="False" Text=" " />
<asp:LinkButton ID="btnCancel" runat="server" CssClass="btnCancel" OnClick="btnCancel_Click" OnClientClick="OnSubmit()" CausesValidation="False" Text=" " />
<asp:LinkButton ID="btnReset" runat="server" CssClass="btnReset" OnClick="btnReset_Click" OnClientClick="OnSubmit()" CausesValidation="False" Text=" " />

When I view the page in IE 8 (or firefox), the buttons appear correctly. But when I load the page in the WebBrowser control within the app, the buttons are missing. If I hover over where they should be I do not receive the Hand icon so it's not just that the images are not being loaded. When I view the source, the anchor tags are there and if I copy the source and save it to an HTML file and open that in a browser window, they do appear correctly. In the past, I've had trouble with the WebBrowser not dispalying floating divs the same way a browser does and had to switch to a table layout. Does it not support the inline-block display type or something?

If it matters, this is the doctype declared for the page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Borszcz answered 16/5, 2012 at 19:35 Comment(6)

I just discovered that if I turn compatibility view ON in IE, the buttons disappear. Could this be the problem? – Borszcz 17/5, 2012 at 14:16

It is using compatibility mode and if I turn it off using a registry key, or setting <meta http-equiv="X-UA-Compatible" content="IE=9" /> on my page the buttons appear! That leaves me with these questions: Doesn't my !DOCTYPE specify to use the latest HTML5/CSS3 standards? If so, what's wrong with my code? Why does <meta http-equiv="X-UA-Compatible" content="IE=9" /> cause it to work correctly but <!DOCTYPE html> alone does not? – Borszcz 17/5, 2012 at 15:24

The new tags aren't really relevant. We're not talking about HTML5 or CSS3 here. – Burglarious 17/5, 2012 at 15:28

@Burglarious Please explain why we are not. It seems to be the factor determining whether the buttons display or not. I want to do this in a html5/css3 compliant way. – Borszcz 17/5, 2012 at 15:40

Because you're not writing HTML5/CSS3. – Burglarious 17/5, 2012 at 15:41

@Burglarious From what I've gathered from MS articles on IE compatibility modes, we're talking about compatibility with html5/css3 standards...at least we might be if we were addressing the question. I tagged them to try to bring in people with knowledge of that topic. I untagged them to try to steer this to a constructive discussion. – Borszcz 17/5, 2012 at 15:59

It was using compatability mode by default which was not honoring the styles. Changing it to

<meta http-equiv="X-UA-Compatible" content="IE=9" />

<meta http-equiv="X-UA-Compatible" content="IE=Edge" />

fixed it.

Borszcz answered 26/6, 2012 at 15:41 Comment(1)

How would that fix it in firefox? – Voucher 10/12, 2017 at 9:41

The WPF WebBrowser will by default run in IE7 compatibility mode. If you have control over the web site you could add a <meta http-equiv="X-UA-Compatible"...> tag as described in one of the other answers here. I tried to do this in a solution that runs a WPF application + a web application. The client machine was running IE11. Adding the meta tag did not solve a problem related to the user agent string though. The WebBrowser still reported it to be IE7. The solution I found was to configure the WebBrowser in registry like this:

Registry.SetValue(
@"HKEY_CURRENT_USER\SOFTWARE\Microsoft\Internet Explorer\MAIN\FeatureControl\FEATURE_BROWSER_EMULATION",
AppDomain.CurrentDomain.FriendlyName,
int.MaxValue);

Subarctic answered 6/2, 2014 at 18:23 Comment(0)

Recommended topics

Hot tags