CODEWITHSUNDEEP
cssinternet-explorer
David Van Staden
David Van Staden

Reputation: 1779

IE7 specific and IE other specific stylesheets overwrite each other

Good Day

I am using conditional stylesheets to target IE7 and lower, and IE8 and IE9.

Now the problem is that they overwrite each other:

Scenario: I apply a style to IE 8 and 9. In IE7 that style does not apply right, so I apply a new style in the IE7-only stylesheet to fix it. It does not pick up the new style in IE7 stylesheet UNLESS I use !important. But when I use !important in the IE-7 stylesheet, it overwrites the IE8 and 9 styles again...

WHY??

Thank you

MY included code with example style applied:

HTML:

<head>...

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

    <!--[if lt IE 9]>
    <link rel="stylesheet" type="text/css" href="../ie8-only.css" />
    <![endif]-->

    <!--[if IE 9]>
    <link rel="stylesheet" type="text/css" href="../ie9-only.css" />
    <![endif]-->
</head>

CSS:

in IE 8 and 9:

#menuNav ul li#login{                
                float: right;
                margin: 0px;
            }

In IE7:

#menuNav ul li#login{                
                float: none;
                margin: 0px;
            }

Whenever I use !important on any, it overwrites one another...

Why is IE9 and 8 picking up IE7 styles? and vice versa...

Upvotes: 0

Views: 222

Answers (1)

dsgriffin
dsgriffin

Reputation: 68616

Replace your comments with this:

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

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

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

Upvotes: 1

Related Questions