Question

I have one common CSS file and two pages are referring to it.

One page which is referring to this common CSS requires below CSS,

*:first-child + html .rich-tabpanel {
   margin-left:-13px;        // Note : Its 13px here
}

The other page which is referring to this common CSS requires below CSS,

*:first-child + html .rich-tabpanel {
   margin-left: 0px;         //Note : Its 0px here 
}

HTML code is below,

<table class="rich-tabpanel">

I have this problem only in IE7 where its not taking below code (I don’t know why),

.ie7 .rich-tabpanel {
   margin-left: 13px; //OR 0px depending on the page
}

So, I removed above code and went with only *:first-child + html .rich-tabpanel code

How can I have two different margin-left attributes in the same common CSS file for rich-tabpanel attribute?

Answer 1

From the moment *:first-child +html .rich-tabpanel is a hack, it’s specificity is unknown. .ie7 .rich-tabpanel has specificty 0020, so the hack probably has a specifity above it. Changing the selector .ie7 .rich-tabpanel to html .ie7 .rich-tabpanel which changes the specifity then the rule is applied. I don’t gurantee that is a specificity issue, but changing the selector, in any case, works.

Demo: http://jsfiddle.net/xWX2R/1/

In any case, I suggest you to use conditional comments than hacks for internet explorer.