IE 8 Rendering Problems

Internet Explorer 8 was released last month and it is steadily growing in popularity. However, the addition of another browser version inevitably leads to a host of new code rendering problems, particularly when the browser is Internet Explorer. The main problem with IE 8 is that it is actually quite good at rendering code. Although this may not seem like a problem, bear in mind that many websites make use of conditional formatting tags or hacks to create workarounds for previous versions of Internet Explorer. These now conflict with IE 8, resulting in layout errors.

A common example of a conditional comment for Internet Explorer is shown below:

<!– [if IE]>

< link rel=’stylesheet’ type=’text/css’ href=’iexplorer.css’/>

< [endif] –>

The [if IE] part of the comment ensures that the style sheet within the comment is only picked up and used by Internet Explorer. Unfortunately, this will now include IE 8, which renders code very differently to previous versions. By changing [if IE] to [if lt IE 8], the comment will only be used by versions lower than IE 8. Alternatively, changing it to [if IE 7] will ensure it is only applied to Internet Explorer 7.

Changing these comment tags will fix most rendering problems seen when using Internet Explorer 8. However, there is another way round the problem. IE 8 has a ‘compatibility mode” which shows a website as if being viewed by Internet Explorer 7. It is possible to add a meta tag to a website that forces the browser to use compatibility mode whenever the site is viewed. This tag can be seen below:
<meta http-equiv=”X-UA-Compatible” content=”IE=EmulateIE7″ />

Tags: css, explorer, ie 8, internet, problems, rendering

This entry was posted on Wednesday, April 15th, 2009 at 3:20 pm and is filed under browsers. You can follow any responses to this entry through the RSS 2.0 feed.