SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict
    Join Date
    Jan 2007
    Posts
    323
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    background not inherited?

    How come this doesnt work:
    Code:
    div.header { background-color: #F8F8F8; border-bottom: 1px solid #C6C3C6; }
    div.header span.left-text { padding: 0px 0px 0px 5px; float: left; }
    div.header span.right-text { padding: 0px 5px 0px 0px; float: right; }
    The background should be #F8F8F8 and have a border, but its simply white, not border.

    Code:
    <div class="header">
    <span class="left-text">Left Text</span>
    <span class="right-text">Right Text</span>
    </div>
    Tried background-color: transparent; and some other things and couldnt get it to work.

  2. #2
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    As the two spans are floated, they are taken out of the document flow and the div height collapses to zero - the background is there, you just cannot see it due to no height. To force the div to surround the floats, the floats need to be "cleared" - in the simple example above, adding overflow:hidden; to the div's css style will achieve that.

    Refer to Paul's sticky thread "CSS FAQ" at the top of this css forum for info on floats and clearing methods.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by atDev
    Background not inherited?
    Centauri has already given you the correct answer but I thought I'd just clear up a common misconception

    The background of an element is never inherited into its children (unless inherit has been specifically defined on the child). The fact that you can see still see the background is that the default for background is "transparent" which means you can see the background through the transparent background of the child element.

    It would be silly to have children inherit the parents background anyway because the background may be an image and then you would get all sorts of overlapping bits of images displaying throughout the children.


Bookmarks

Posting Permissions

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