WebBrowser component not showing CSS 3

Question

I am building a piece of software that requires a WebBrowser component. Unfortunately it won't show my page correctly.

My content uses this CSS style:

.content_mid{
background-image:url(http://img.awesome-o.net/Content_Mid.png);
background-size: 100% 100%;
vertical-align:text-top;
padding-left: 40px;
padding-right:20px;
min-height:400px; 
}

Since I already found out the WebBrowser component uses the installed version of interwebs explorer, I checked the html on Internet Explorer, and it shows perfectly.

Here you see what it shows on IE:

And here is how it displays on the webbrowser component:

So, I checked the browser version:

Debug.WriteLine("WebBrowser version: " + webBrowser1.Version);
output: WebBrowser version: 9.0.8112.16443

So that should be alright I guess.

Please don't prefix your titles with "C#" and such. That's what the tags are for. — John Saunders, Apr 21 '12 at 01:14

score 23 · Answer 1 · edited Jan 16 '20 at 18:34

23

This page describes how to force the browser control to use a specific render mode.

You can also try this doctype:

<!DOCTYPE html>

And/Or this meta element in the head element:

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

edited Jan 16 '20 at 18:34

shA.t

16,580
5
54
111

answered Apr 19 '12 at 22:40

Sam Axe

33,313
9
55
89

Thanks for you answer, just one thing i dont get. "The default value for Internet Explorer 9 is 9000." "Description: Internet Explorer 9. Webpages containing standards-based !DOCTYPE directives are displayed in IE9 mode." That seems the right value for me, or do you think differently? – Dylan Snel Apr 20 '12 at 16:17
Does your page define a doctype ? – Sam Axe Apr 20 '12 at 18:05
Yes it does: – Dylan Snel Apr 20 '12 at 18:07
Sorry i tried them out vyt they dont seem to work, thanks for the answers tough. – Dylan Snel Apr 21 '12 at 10:34
There is a nice blog post containing more details, http://www.west-wind.com/weblog/posts/2011/May/21/Web-Browser-Control-Specifying-the-IE-Version – Lex Li Apr 21 '12 at 13:29
Thank you both!! manually setting the variable to 9000 made this work! – Dylan Snel Apr 23 '12 at 13:35

score 9 · Accepted Answer · edited May 23 '17 at 11:53

Just for further reference to other people needing this:

First of all: Thanks to Boo & Lex Li For helping me find the answer to my question.

You have to set a certain registry to the right value:

There are two different sets of keys for 32 bit and 64 bit applications.

32 bit:

HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Internet Explorer\MAIN\FeatureControl\FEATURE_BROWSER_EMULATION

Value Key: yourapplication.exe

64 bit:

HKEY_LOCAL_MACHINE\SOFTWARE\Wow6432Node\Microsoft\Internet Explorer\MAIN\FeatureControl\FEATURE_BROWSER_EMULATION

Value Key: yourapplication.exe

The value to set this key to is (taken from MSDN here) as decimal values:

9999 (0x270F)
Internet Explorer 9. Webpages are displayed in IE9 Standards mode, regardless of the  !DOCTYPE directive.

 9000 (0x2328)
 Internet Explorer 9. Webpages containing standards-based !DOCTYPE directives are displayed in IE9 mode.

8888 (0x22B8)
Webpages are displayed in IE8 Standards mode, regardless of the !DOCTYPE directive.

8000 (0x1F40)
Webpages containing standards-based !DOCTYPE directives are displayed in IE8 mode.

7000 (0x1B58)
Webpages containing standards-based !DOCTYPE directives are displayed in IE7 Standards mode.

Even tough MSDn claims that 9000 is the automatically assigned value. Apperently this is simply not true.

Below you can find the code how to add these keys to your registry. Please not that your application has a different processname when you debug.

RegistryKey key = Registry.LocalMachine.OpenSubKey(@"SOFTWARE\Microsoft\Internet Explorer\MAIN\FeatureControl\FEATURE_BROWSER_EMULATION", true);
        if (key != null)
        {
            key.SetValue("YourApplicationName.exe", 9000, RegistryValueKind.DWord);
        }

        key = Registry.LocalMachine.OpenSubKey(@"SOFTWARE\Wow6432Node\Microsoft\Internet Explorer\MAIN\FeatureControl\FEATURE_BROWSER_EMULATION", true);
        if (key != null)
        {
            key.SetValue("YourApplicationName.exe", 9000, RegistryValueKind.DWord);
        }

So thanks all and Good Luck

Edit: User Account Control should be off to make this code work.

score 3 · Answer 3 · edited May 07 '20 at 16:43

3

I had the same issue and I changed this line:

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

to

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

to the latest verison of IE and it works very well.

edited May 07 '20 at 16:43

m02ph3u5

3,022
7
38
51

answered May 07 '20 at 16:18

irena

61
6

score 0 · Answer 4 · answered Dec 02 '13 at 14:32

0

you can also add a response header to the IIS application Called X-UA-Compatible with a value of IE=Edge. I tend to add it to my web.config

answered Dec 02 '13 at 14:32

beakersoft

2,316
6
30
40

Thanks for the answer, but i'm afraid this is concernign a windows forms application. There is no web.config. – Dylan Snel Dec 03 '13 at 21:30

WebBrowser component not showing CSS 3

4 Answers4

Linked