Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Regular Coder
    Join Date
    Sep 2004
    Posts
    230
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question 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
    IF I DID GOOD THROW ME A REP POINT

  • #2
    Regular Coder
    Join Date
    Sep 2007
    Location
    Raleigh, NC
    Posts
    273
    Thanks
    7
    Thanked 59 Times in 52 Posts
    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.

  • Users who have thanked vtjustinb for this post:

    scrupul0us (10-02-2007)

  • #3
    Regular Coder
    Join Date
    Sep 2004
    Posts
    230
    Thanks
    1
    Thanked 0 Times in 0 Posts
    ok... i think i can handle the line-height issue within my embedded script... thanks for the insight
    IF I DID GOOD THROW ME A REP POINT

  • #4
    Regular Coder
    Join Date
    Sep 2004
    Posts
    230
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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
    IF I DID GOOD THROW ME A REP POINT

  • #5
    Regular Coder
    Join Date
    Sep 2007
    Location
    Raleigh, NC
    Posts
    273
    Thanks
    7
    Thanked 59 Times in 52 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •