CSS Rendering problems in IE8? Fix your conditional comments!

Friday 03 April 2009 17:29 Are your existing websites incorrectly rendered by IE8? Do you have a hard time getting IE8 to render your CSS correctly? The core problem may be incorrect usage of conditional comments... Ofcourse, a fix is available in this article!

By Peter Slagter

Today, I talked to some friends & colleague front-end developers, who had trouble with the way IE8 renders their existing websites and websites under development. We all know that developing for IE7 (and lower versions) can be a pain. Using conditional comments is a commonly used method to fix IE proprietary bugs. Please note that the point of this article is not to discuss the usage of conditional comments. My opinion on this comes close to what Jens Meiert said about this subject.

Conditional comments are conditional statements interpreted by IE only. They first appeared in IE5 and are supported through at least IE8. An example of a conditional comment:

In the above example, the conditional comment is interpreted only by IE, which loads the ie.css file with IE-specific fixes. The idea is simple and effective. So what's any of this got to do with IE8 rendering problems?

"Fix" IE8 rendering

The most common way the conditional comments were used when IE7 was the latest IE version, was as following:


    < link rel='stylesheet' type='text/css' href='ie.css'/>

The idea was to return a CSS-file for all versions of IE to fix the most common version-wide IE bugs, and another CSS-file for IE6 and lower. Since IE8 supports conditional comments, the first comment in the above example affects IE8 as well.

IE8 renders CSS2.1 fine, and doesn't behave nearly as buggy as the previous versions. This means that the fixes in your ie.css probably conflict with IE8's rendering. The solution is to change the first conditional comment into the following:

You'll see that most of the rendering problems in IE8 will disappear. Being aware of this could save you time and prevents you ending up with adding a meta-tag to make IE8 render in IE7 compatability mode. Have fun developing!

«Back

Reactions on "CSS Rendering problems in IE8? Fix your conditional comments!"

1 2 3 4 5 6 7		Last page
Gary M.	Placed on: 04-03-2009 18:40	Quote
	Thanks, that's actually quite clever. I forgot about it, which not only shows my bad habits, but also the impact conditional comments have on maintainability.
M	Placed on: 04-08-2009 06:30	Quote
	Thanks! I hope this helps me fix my IE8 probs. Quick question, should there be a space between the "IE" and the "8"? Does that matter? Thanks!
Peter	Placed on: 04-08-2009 08:46	Quote
Peter Slagter	Quote M wrote: Thanks! I hope this helps me fix my IE8 probs. Quick question, should there be a space between the "IE" and the "8"? Does that matter? Thanks! Nope, the space between "IE" and its version number (fe. IE8 or IE 8 ) isn't required for the conditional comment to work. Though, it does improve it's readability, so I've changed it in the above example. Good luck! Edited Peter has edited this message on: 04-08-2009 08:49
Roger	Placed on: 04-21-2009 01:11	Quote
	How about IE8 in compatibility mode vs. non-compatibility mode?
Peter	Placed on: 05-01-2009 23:09	Quote
Peter Slagter	Quote Roger wrote: How about IE8 in compatibility mode vs. non-compatibility mode? By setting IE8 into compatibility mode, it will render websites the same way IE7 does. If your websites rendered correctly in IE7, then IE8 in compatibility mode will show them correctly as well. I recommend fixing the conditional comments though .
perc	Placed on: 08-08-2009 08:23	Quote
	how about correcting the div problem for ie 8? this is what i did for the practice page. <html> <head> <title> practice using css </title> <link rel="stylesheet" href="style.css"> <!-- [if lt IE 8]> < link rel='stylesheet' type='text/css' href='style.css'/> <! [endif] --> </head> <div class="body"> <body> <div class="title"> title here </div> <div class="sidebar"> sidebar menus </div> <div class="content"> content goes here </div> </body> </div> </html> and this is the css attached to it: body { background: #999; font-family: sans-serif, helvetica, arial; font-weight: normal; } .title { position: absolute; background: green; width: 988px; height: 85px; } .sidebar { position: absolute; background: white; top: 100px; width: 150px; height: 300px; } .content { position: absolute; background: white; top: 100px; left: 171px; width: 825px; height: 470px; } whenever i view it in other browsers such as firefox, chrome... it looks the same. but when i view it over ie 8, the title background area seems to overlap with the content and sidebar. do you have any solutions for this one? i am only new to html and css and i am still practicing. thanks
Allan	Placed on: 08-11-2009 12:24	Quote
	perc Check out this article. http://expression.micros...com/en-us/dd794430.aspx
perc	Placed on: 08-16-2009 16:35	Quote
	thanks for the tip Allan, really helped a lot.
Les Reynolds	Placed on: 08-21-2009 03:14	Quote
	I've been using if lte IE7 which means if less than or equal to IE7.
Rajesh	Placed on: 12-16-2009 13:24	Quote
	Hi, My application should work in both IE7 and IE8, so on what areas i need to concentrate and how to handle those areas? Thanks
Elliot	Placed on: 02-10-2010 12:19	Quote
	Thanks for that, my site www.callhandling.org.uk had been having problems with the h2 positioning ever since ie8 came into play.
Mara Alexander	Placed on: 02-18-2010 02:03	Quote
	I found the space (between "IE" and the version number) is required.
Belinda B	Placed on: 04-06-2010 04:34	Quote
	worked 100%! thank you very much
hamza	Placed on: 04-12-2010 14:58	Quote
	You can add a line in head tag <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> it will make IE8 mimic IE 7 , this is a quick fix but will give enough time to fix the CSS properly
habika	Placed on: 06-12-2010 08:33	Quote
	By setting IE8 into compatibility mode, it will render websites the same way IE7 does. If your websites rendered correctly in IE7, then IE8 in compatibility mode will show them correctly as well. I recommend fixing the conditional comments though. ==================================== <a href="http://fixedrateisa.org" rel="dofollow">Fixed Rate ISA</a>
habika	Placed on: 06-12-2010 08:34	Quote
	By setting IE8 into compatibility mode, it will render websites the same way IE7 does. If your websites rendered correctly in IE7, then IE8 in compatibility mode will show them correctly as well. I recommend fixing the conditional comments though. ==================================== <a href="http://fixedrateisa.org">Fixed Rate ISA</a>
habika	Placed on: 06-12-2010 08:36	Quote
	By setting IE8 into compatibility mode, it will render websites the same way IE7 does. If your websites rendered correctly in IE7, then IE8 in compatibility mode will show them correctly as well. I recommend fixing the conditional comments though. ==================================== [url="http://fixedrateisa.org" rel="dofollow"]Fixed Rate ISA[/url]
Vishwa	Placed on: 10-12-2010 08:15	Quote
	only My company intranet home page appears half of the screen. This is happening after getting migrated to IE8. Is there any fix
Mike McElligott	Placed on: 12-09-2010 13:41	Quote
	Ah - well spotted! That really helped me out. Thanks a lot for sharing that.
Theo K	Placed on: 01-31-2011 19:12	Quote
	Hello. I have a problem too. My webpage shows correctly on ff but on ie it s a mess... Do you think that something is wrong with my css? <style type="text/css"> /* pushes the page to the full capacity of the viewing area */ html {height:100%;} body {height:100%; margin:0; padding:0;} #bg {position:fixed; top:0; left:0; width:100%; height:100%;} </style> <style type="text/css"> html {overflow-y:hidden;} body {overflow-y:auto;} #bg {position:absolute; z-index:-1;} #layer1 { position:absolute; bottom:10px; left:0px; width:100%; height:40px; } </style>
Yopa	Placed on: 02-11-2011 11:18	Quote
	Quote hamza wrote: You can add a line in head tag <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> it will make IE8 mimic IE 7 , this is a quick fix but will give enough time to fix the CSS properly Thanks a lot for this fix..Its working great..!!!!!! And it helped solve the issue very fast.
mbt	Placed on: 03-05-2011 04:03	Quote
	Lexus Ženevos automobilių parodoje paskelbtasMafija Nürburgring versijos, tai kaip pardavimo taškasį specialią versiją ribotas leidimas tik 50 rinkiniųvisame mbt lithuania pasaulyje atlikti. Palyginti su įprasta versijaMafija, iš Nürburgring versijos kaina $ 70,000 būtididesnė, iš tokios didelės kaip 375.000 $, kuris atitinka 2460000 juanių. Norite sužinoti šios papildomos $ 70.000 praleidobūtent ten, mbt batai kur ji? Pirmiausia galios aspektus, MPŪVNürburgring versijos vis dar įrengta 72 ° kampą, kuris nustato "Toyota" 4,8 litro 1LR-GUE V10 puikių charakteristikų variklis, mbt avalyne tačiau jis buvo specialiaimodifikuotas išmetimo sistema, didžiausia arklio galių iki 562 arklio galių, palyginti su įprastaisversijos atnaujinimo 10 arklio galių. Be to, unikaliaukštos kokybės šešių greičių sekvencinė pavarų dėžė ASG pamainą delsimo sumažinti nuo 0,2sekundės iki 0,15 sekundės, mbt batai kainos bet deja, tarnybiniu automobiliu 0-100 km / h pagreitis trunka 3,7sekundės, o pats, bet Greitis taip pat vis dar yra nustatytas iki 325 km / val. mbt batu kaina
raul	Placed on: 07-03-2011 15:51	Quote
	About this next issue I've found no reference to anywhere: when I switch views on IE8, this page I'm working on hides a navigation bar located at the topmost place of the screen. Only after I refresh, everything moves to its intended position. In a nutshell: IE8 may not render the intended way -on either view- until you refresh the page. Anyone heard about this or something similar?
heel4sale	Placed on: 09-07-2011 11:58	Quote
	<a href="http://www.jacketskingdom.com/">moncler down jackets</a> <a href="http://www.jacketskingdom.com/moncler-women-jackets.html">moncler down jackets for women</a> <a href="http://www.jacketskingdom.com/moncler-women-jackets.html">moncler women's jackets</a> <a href="http://www.jacketskingdom.com/">moncler jackets for 2011</a>
RoRoz	Placed on: 09-13-2011 05:27	Quote
	[url=http://www.hairextensionsusa.com/feather-hair-extensions/" rel="dofollow] hair extension feathers[/url] are widely used by women to simply lengthen their hair, but new technologies have allowed savvy hair replacement studio owners to better utilize [url=http://www.hairextensionsusa.com/remy-clip-in-hair-extensions/" rel="dofollow] remy clip in hair extensions[/url] as a hair loss treatment.The two main main sorts of hair extensions. [url=http://www.hairextensionsusa.com/clip-in-hair-extensions/" rel="dofollow] best clip in hair extensions[/url] can be created due to synthetic fibers and are also called synthetic hair extensions or out from real human hair and termed as [url=http://www.hairextensionsusa.com/clip-in-hair-extensions/" rel="dofollow] real hair extensions clip in[/url].
1 2 3 4 5 6 7		Last page