Skip links
Main content

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 Last page
Gary M.
Placed on: 04-03-2009 18:40
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
Thanks! I hope this helps me fix my IE8 probs. Frown

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
Peter Slagter
User icon
Quoted message
M wrote:
Thanks! I hope this helps me fix my IE8 probs. Frown

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
How about IE8 in compatibility mode vs. non-compatibility mode?
Peter
Placed on: 05-01-2009 23:09
Peter Slagter
User icon
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 Smile.
perc
Placed on: 08-08-2009 08:23
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
perc
Placed on: 08-16-2009 16:35
thanks for the tip Allan, really helped a lot.
Les Reynolds
Placed on: 08-21-2009 03:14
I've been using if lte IE7 which means if less than or equal to IE7.
Rajesh
Placed on: 12-16-2009 13:24
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
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
I found the space (between "IE" and the version number) *is* required.
Belinda B
Placed on: 04-06-2010 04:34
worked 100%! thank you very much
hamza
Placed on: 04-12-2010 14:58
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
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
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
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
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
Ah - well spotted! That really helped me out. Thanks a lot for sharing that.
Theo K
Placed on: 01-31-2011 19:12
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
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.
raul
Placed on: 07-03-2011 15:51
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?
1 2 Last page

Log in to comment on news articles.