The Miracle CSS Fix

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" />
<![endif]-->

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:

display: inline-block;

Give it a shot, as it seems to resolve some really weird rendering errors!

Advertisement

3 Comments

  1. Matt Todd says:

    Check out my tumblog, fool! I linked you.

    Like

  2. Brian says:

    I think I use to do this before i started hacking. Except then I use javascript.

    Like

  3. I had opted for the javascript route on my site for a long time. I didn’t want what I consider IE specific, as in only IE can interpret them, hacks in my markup. However, after some some debate, I decided to go with this method to disable stylesheets in IE

    Like

Leave a Comment

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.