Conditional comment not working for a <link>

Question

I have a a conditional comment in my page to fix a double padding-top problem with IE7.

I am trying to add "padding-top:5px;" to a DIV only in IE7. The rest of the browsers (including IE6 and IE8) use "padding-top:10px;" contained in stylesheet.css.

stylesheet.css contains

.clImageSamplerText {padding-top:10px;}

stylesheet_ie7.css contains

.clImageSamplerText {padding-top:5px;}

If I use

<link href="stylesheet.css" rel="stylesheet" type="text/css">
<!--[if IE 7]>
    <style>.clImageSamplerText {padding-top:5px;}</style>
<![endif]-->

my code works no problem.

If I use

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

it does not work.

Anyone have any ideas?

Answer 1

Just a shot in the dark -- if you are using an XHTML doctype, you might find that closing your <link /> tags will fix the problem.

So try:

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

Answer 2

I have included link elements in conditional comments without any problems before, so I don't think it matters that you do that instead of writing it out in a style element. My best guess is that the document is not finding stylesheet_ie7.css. Are you sure it got uploaded to the right place?