Inheritance... affect parent only...

lets say i have a setup like this:

<div class="main_layout_right_tabs">

<img src="someimage" /><?php somephp; ?>

</div>

and in my css:

.main_layout_right_tabs {
width:20px; height: 85px;
line-height: 85px; vertical-align:center;
}

now... i only want THAT container to be affected by the style and NOTHING underneath it... how do i accomplish that?

im having an issue where an included script (using php) is taking on that styling as well in any of its divs and its screwing things up

anyway to limit that styling to just the parent div container?

thanks

The width and height of the container div are only applied to it. The children do not inherit that bounding, although since they are contained inside of that div if they are display:block they will stretch to fill that space (including any margins or padding).

The line-height, however, will be inherited by children and there's no way around that. That's the way CSS was designed, and if you don't want the children to have that line-height you'll have to explicitly make rules to reset their line-height in addition to your main rule.

I wouldn't assume it's all on the cascade though--open it up in web developer toolbar and examine applied styles on the inner elements. Might pick up some other stray rules that are screwing stuff up.

ok... i think i can handle the line-height issue within my embedded script... thanks for the insight :)

so its definitely the line-height value that is screwing up my "sub application" the only issue is that I cannot seem to reset it back to "off" e.g not set at all

i think ill have to rework my graphics to make this work without css positioning

Just try different line-heights in the child elements. You can't set it to "off," without line-height everything would collide vertically.

Line-height does accept the value "normal," but that represents either the default or inherited value--and in your case it'd be the inherited value from the parent block.