PDA

View Full Version : break inheritance



BubikolRamios
Dec 17th, 2008, 11:47 AM
below code looks ok in IE7 and FF3, so it must be ok
I suppose this could be moved to css file like:

.off p {...}
.off p p{...}
.off p p p{...}

but, no, does not work.

I managed to port the first p into #p class, all the rest , no success, must be something about inheritance or something, any advice ?

#p {...} /*this works*/
#p1 {...} /*does not work*/
#.off p {....} /*does not work*/




<b class = 'off'>
<p id = 'p' style = "background: url('testknof.png');width:11px;height:20px;float:left;">
<p id = 'p1' style = "background: url('testknof2.png');height:20px;float:left;font-size:18px;">
test text
<p style = "background: url('testknof1.png');width:11px;height:20px;left:-11px;float:left;">
</p>
</p>
</p>
</b>

abduraooft
Dec 17th, 2008, 01:20 PM
Your markup is invalid, fix them first.

oesxyl
Dec 17th, 2008, 01:27 PM
below code looks ok in IE7 and FF3, so it must be ok
I suppose this could be moved to css file like:

.off p {...}
.off p p{...}
.off p p p{...}

no, is ambiguos, which p you talking about, html element, id attribute?
if you want to style a p html element which have a class off, you write:


p.off { .... }

if you want to style a element with id attribute p and class atribute off:


.off#p { ... }

p html atribute with id p and class off:


p.off#p { ... }

inline style attribute overwrite the previous style and order in css file for same declaration is important.


but, no, does not work.

I managed to port the first p into #p class, all the rest , no success, must be something about inheritance or something, any advice ?

#p {...} /*this works*/
#p1 {...} /*does not work*/
#.off p {....} /*does not work*/




<b class = 'off'>
<p id = 'p' style = "background: url('testknof.png');width:11px;height:20px;float:left;">
<p id = 'p1' style = "background: url('testknof2.png');height:20px;float:left;font-size:18px;">
test text
<p style = "background: url('testknof1.png');width:11px;height:20px;left:-11px;float:left;">
</p>
</p>
</p>
</b>


regards

jerry62704
Dec 17th, 2008, 05:11 PM
something, any advice ?

#p {...} /*this works*/
#p1 {...} /*does not work*/
#.off p {....} /*does not work*/




#p isn't a class, it's an ID, and a poorly named one at that.
#p1 is fine and will work, but you might want to get a better name - something that means something.
#.off p is just wrong. Either it is an IE (#off) or it is a class (.off), but it can't be both.