Different CSS when using different browsers problems?

Question

 <!--[if gte IE 5]>
 <link rel="stylesheet" type="text/css" href="iemaster.css" />
 <![endif]-->
 <![if !(IE 5)]>
 <link rel="stylesheet" type="text/css" href="master.css" />
 <![endif]>

to load a different stylesheets depending on whether or not it is IE. The problem is that i have button bar going across the top. In IE I need the padding at 0 and other wise i need it at 200px, but no matter what I do to the values, the bar in IE doesn't seem to change. It changes for chrome though. The only thing that seems to work is if I make the class affecting it a different name then the non-IE one. Of course this means my non-IE wouldn't load properly. Other then this the CSS seems to load perfectly. Why is this?

• Matti Virkkunen: IE 5? Do people still use that?
• Yahel: @Matti I was looking at the Google Analytics of a site with 100k+ visitors per day the other day. Over a 3 month period, there were about 50 IE 5 visitors, and a handful of IE 4 users.
• Matti Virkkunen: @yc: In other words, the usage is insignificant.

Answer 1

That's not how you should be doing it.

Nobody is using IE5, so forget about that.

Do it like this instead:

<link rel="stylesheet" type="text/css" href="master.css" />
<!--[if IE 6]><link rel="stylesheet" type="text/css" href="ie6.css" /><![endif]-->
<!--[if IE 7]><link rel="stylesheet" type="text/css" href="ie7.css" /><![endif]-->

Your master stylesheet will get loaded in every browser.

• Are you sure you care about IE6? If so, put IE6 specific rules inside ie6.css.
• Put IE7 specific rules inside ie7.css.

You shouldn't need a separate stylesheet at all for IE8 or IE9. Those browsers are compliant enough to handle the same stylesheet as the other browsers.

Answer 2

Your bottom block is not actually a comment (it doesn't begin with <!--) so all browsers will read the master stylesheet. Also, check your logic: IE6 is both greater than IE5 and != IE5, so the main stylesheet will get loaded for some versions of IE anyway.

Answer 3

If you reverse the order that you link to the stylesheets that should fix it. What's happening is the IE-specific style sheet is being set first, but the master.css is overwriting it after.

Also, I don't think you need <![if !(IE 5)]> and <![endif]> around the non-IE one.