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]-->