Websites for sale:
Used Cars for Sale - $175 and Car Sale.
If interested drop me a line at ken@kensfi.com. Thanks!

Have questions about Toronto? Check my latest project: Ask about Toronto!

4 ways to declare the CSS for IE

In the last years I have been preoccupied of discovering of new methods for targeting IE when declaring the CSS and reducing as much as possible the amount of CSS code written for Internet Explorer and the number of external CSS files.

I even tried to reduce all these external files to only one stylesheet as Google started to add more weight to the page speed, in the last year especially – less CSS files = less server requests = good speed for loading the page.

I’d started (like everyone I guess) adding the style for IE in the header of the pages.

<!--[if IE 6]>
<style type="text/css">
.className {border:1px solid #999;}
</style>
<![endif]-->

…and I moved along the way to created separately style files using the well know IE conditional declarations :

<!--[if IE 6]><link href="/assets/css/site-ie-6.css" rel="stylesheet" type="text/css" /><![endif]-->

After that I discovered another, interesting method, – the method of double declaration. E.g.:

#divName {padding:10px 0 !important; padding:0 /*IE only*/}

Let me explain this a little. Since !important is not recognized by IE you can force one property to be used for FF and other modern browsers (aka Opera, Chrome, Safari) users and for the rest (which is IE obvious) you’ll have to declare it again with the desired parameter as in above example. The downsize of this method is that you you won’t have a perfect control, is addressing to all IE and you can’t target only a specific IE version.

But the most spectacular and revolutionist method which I just discovered (in fact my colleague, Steff, who’s writing about to how to setup a ModX CMS website, showed me this trick):

<body>
<!-- START IE6 open tag declaration-->
<!--[if IE 6]><div id="ie6"><![endif]-->
<!-- END IE6 open tag declaration-->

<div id="content"
<p>here is the entire html code. Everything will go inside of #ie6 wrapper in Internet explorer 6 only!. In this way you will have a new and easy way of targeting some of your DIVs adding #IE6 as parent</p>
</div>

<!-- START IE6 end tag declaration-->
<!--[if IE 6]><![endif]-->
<!-- END IE6 end tag declaration-->
</body>

Possible style:

#content p {width:960px; padding:10px 15px 3px}
#ie6 #content p {width:960px; padding:10px 0 3px}

You can write a “beautiful” message also for readers who are still using IE6, something like this:

<!--[if IE 6]>
<p>Yo brother, Internet explorer 6 sucks! Get rid of it! Try Firefox!</p>
<![endif]-->
If you enjoyed this post, make sure you subscribe to my RSS feed!

Related Posts

CSS

If you enjoyed this post, please consider to leave a comment or subscribe to the feed and get future articles delivered to your feed reader.

Please read before commenting:

I don't tolerate spam comments. Be human and polite. If you are signing as "Computer repairing", "iPhone store" or other kind of bullshits you'll be marked as spam.
USE YOUR NAME! Thanks!

Leave Comment

(required)

(required)