One of the biggest frustrations for website designers is that Internet Explorer’s engine can absolutely trash the look of a website. I tried something new in my latest website – pulling in a separate stylesheet for IE. It makes sense, why clutter good code with hacks that might not work tomorrow?
The code below does the trick:
<!--[if IE 6]>
<link href="~/Styles/Styles-IE.css" rel="stylesheet" type="text/css" />
Also, my example that I posted for a simplified UI had all of its hidden options shown in Internet Explorer despite the fact that there was a “display: none” parameter inside the div tag. The problem? Internet Explorer applies visible padding to hidden elements! I fixed this by adding the following to the div tag in my IE only stylesheet:
Give it a shot, as it seems to resolve some really weird rendering errors!