Computers, Software, Web, Windows

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!

Advertisements

3 thoughts on “The Miracle CSS Fix

  1. 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 Reply

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s