conditional style rule

[nathj]

Hi,

I have a style sheet that works just fine with one small exception. The problem is that when the rule show below is applied by IE it only applies the background colour to the text not to the object it is within. Firefox does exactly what I want and IE will display correctly if I change the padding. This however, throws Firefox out.

CSS

.solidBlockMenu  p
    {
        float                : left;
        padding                : 0px 11px;
        margin                : 0px;
        color                : #b36a1b;
        background            : #eff5f3;
        text-transform        : uppercase;
        text-decoration        : none;            
        font-weight            : bold;    
        font-size            : 11px;
        border-right        : 1px solid white;
     }
 

This code is used on a navigation bar so if the URL of the page matches the URL that was serverd from the database the item is not clickable - thus preventing the user from going where they already are. The background colour serves as a visual clue to this.

I want to be able to change the padding rule 2px 11px for IE only. Is there a way to do this without serving separate style sheets?

[nitinpatel1117]

You can serve an additional style sheet rather than a separate style sheet.
Only IE will read this additional style sheet.


Add this to the header of your html code, but below (this is important) the reference to the main style sheet


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


the code in the addition style sheet (style-ie.css) would be just three lines.

.solidBlockMenu p {
padding: 2px 11px;
}


only IE will run the additional stylesheet.
and becuase this style sheet appears after the main one, it overrides the padding for 'solidBlockMenu p' in the main style sheet.

[nathj]

You can serve an additional style sheet rather than a separate style sheet.
Only IE will read this additional style sheet.


Add this to the header of your html code, but below (this is important) the reference to the main style sheet


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


the code in the addition style sheet (style-ie.css) would be just three lines.

.solidBlockMenu p {
padding: 2px 11px;
}


only IE will run the additional stylesheet.
and becuase this style sheet appears after the main one, it overrides the padding for 'solidBlockMenu p' in the main style sheet.

Thanks for that. I have applied that and it works a treat.

Cheers
nathj