Take the 2-minute tour ×

I'm trying this html code

<style type="text/css">
body { background-color : green !important; background-color : red; }
Hello World !

In firefox, it's working fine : green background. In internet explorer : it's not working : also green background.

If I remove the doctype, it's working fine in both. I tried different doctypes but always the same problem.

What can I do ?

share|improve this question
Not sure if trolling, or just disbelief that IE can actually follow standards. –  BoltClock Oct 23 '13 at 12:13
Just use <!DOCTYPE HTML>. Go with the flow!. Also what version of Firefox and what version of IE? because if it is IE6 or IE11, that kinda matters. –  Henk Jansen Oct 23 '13 at 12:16
What's not working? –  Shomz Oct 23 '13 at 12:17
"What's not working?" -> the css hack. Without doctype : geen in firefox and red with ie. With doctype green in both cases. –  tweetysat Oct 23 '13 at 12:19
so, uh, what exactly are you saying? are you trying to say you want it to be different in IE? Why? –  Spudley Oct 23 '13 at 12:22
show 5 more comments

1 Answer

Ok I know this example is stupid but much more easy the explain the problem. The question is : why css hack seems not working with doctype definition ?

There is no hack there. There's a !important declaration, which is standard CSS, but wasn't supported properly by IE5.

If you take away the doctype, IE will go into quirks mode, which is basically an IE5-emulation mode. Therefore it will use the IE5 CSS rules, which means that !important doesn't work (along with a whole bunch of other features).

So without a doctype, in quirks mode, it ignores !important, and so both your rules have the same precedence, and thus the second one (red) is used.

With a doctype, the browser will be in standards mode, and !important works the way it should do, which means that green takes precedence because it's 'important'.

I still don't get what you're trying to achieve, but hopefully that explains to you what is going on.

share|improve this answer
My goal is of course not changing the background color but changing label alignment of checkboxes in a complicated form (generated by jsf2) and that is not displayed in the same way with ff and ie –  tweetysat Oct 23 '13 at 12:39
@tweetysat, isn't that just a completely different problem? –  Henk Jansen Oct 23 '13 at 12:43
@tweetysat: without a doctype, you're in quirks mode. In addition to breaking the !important feature, quirks mode also changes some of the basic layout properties of the rendering engine, and disables a lot of other browsers features, which will indeed often make a page look quite different in IE compared to other browsers. This is why you should avoid quirks mode (and thus why you should always use a doctype). I guess this question is pretty moot now; I suggest starting again with a fresh question that describes the actual problem you're having with the form. –  Spudley Oct 23 '13 at 12:47
add comment

Your Answer


