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">
It was using compatability mode by default which was not honoring the styles. Changing it to
or
fixed it.