SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Enthusiast
    Join Date
    Jan 2008
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    cant fgure out why divs arent inheriting background colour

    I'm not sure why, but my inner divs arent inheriting the background colour of my wrapper divs


    The basic design of the site is
    Code:
    <body>
    <div class="centerbody"> // my wrapper div
    /// rest of site
    </div>
    </body>
    I have css for the body and for the wrapper:

    Code:
     body {
    	background:none repeat scroll 0 0 #EFEFEF;	
    	font-family:Verdana,Arial,Sans-Serif;
    	font-size:13px;line-height:1.4;	
     	}

    Code:
    .centerbody {
    	background:none repeat scroll 0 0 #BFBFBF;
    	width: 1000px; 
    	border: 0px none; margin-left: auto; margin-right: auto;
    	}
    I've also tried using an id of centerbody, and defining #centerbody in the css, this didnt work

    I've also tried using background-color: #BFBFBF; (for centerbody) and this didnt work

    I just cant figure out why the child divs are only inheriting the body background, but not the parent div centerbody background, any ideas?
    - and if I delete the body class, the child divs dont inherit any background colour at all

    (example here: rightsfortenants.co.uk)

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,199
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Add the line in red to your CSS, and be amazed:

    Code:
    #centerbody {
      background: none repeat scroll 0 0 #BFBFBF;
      border: 0 none;
      margin-left: auto;
      margin-right: auto;
      width: 1000px;
      overflow: hidden;
    }
    By default, a container does not wrap around floated contents. So your #centrebody div has zero height. One of the ways to make it wrap around its contents is with overflow: hidden, which forces it to look at what's inside it and then enclose it. In a few circumesatances (such as when you purposely want something hanging out of the container) a different method is needed, but this solution works in most cases.

  3. #3
    SitePoint Enthusiast
    Join Date
    Jan 2008
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I would never have thought that would have worked, but you are indeed right.

    Since it's a wrapper, I really couldnt define a height (the size of all of the child elements can differ). Also, most of the child elements are floated, but I didnt think this would prevent inheritance...

    Thanks Ralph (I think I'll be reading your webdesign tips)

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,199
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Glad that helped.

    Quote Originally Posted by Mr Tuition View Post
    I didn't think this would prevent inheritance...
    I didn't pick you up on this before, but be careful of the word 'inheritance', as it really has a specific meaning in CSS that I don't think you mean. Background color is not inherited by child elements. The wrapper has a background color, and that's it. If the children are transparent, then you'll see the background color behind them, but if the children have their own (solid) background color, the wrapper's background color will be hidden.

    In CSS, 'inheritance' means that if a container has a style set on it, that style is also transferred to the children. Here's a link that will explain it way better than I can:
    Inheritance

    Off Topic:

    You won't find much on my site, as I haven't had time to add to it for so long. Must get around to that.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Mr Tuition View Post
    Also, most of the child elements are floated, but I didnt think this would prevent inheritance...
    Backgrounds aren't inherited anyway You see a background because the default value for a background is transparent and that's why you see the background underneath the element you just placed.

    If background was inherited you would then define an image on the body and then every single image on the page would have a background. That wouldn't be much use lol

    Only certain properties are inherited like font-size, font-family, color etc. You can find out which are inherited by default and which aren't via the reference here.

    As Ralph said the wrapper simply had no height because it only had floated children and therefore nothing would show.

  6. #6
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    1) As Paul said, Div's don't inherit backgrounds by default.

    2) None also means no color, which you then declare -- that doesn't even make sense.

    3) yeah, that looks like a lack of float clearing.


    ... though looking at the overblown over the top number of pointless DIV and classes in the markup (as I've come to call it, borrowing from Carlin "not every ejaculation deserves a name"), useless "gee ain't it neat" scripting, non-semantic markup with nonsensical heading orders, accessibility train wreck of absurdly undersized fixed metric fonts, endless IE conditional hacks for NOTHING (If you have to target EVERY version of IE individually... there's something HORRIBLY wrong with how the site is built!)... I mean, 12k of markup for 1.5k of plaintext and four content images -- somethings gone awry.

    I would advise throwing away that mess entirely... building with actual semantic markup with meaningful heading orders, (every h# becoming h1 in HTML 5 only applies if you use section/article! -- you've got 4 tranny with a 5 slapped on it), accessible forms, and in general trading all the "gee ain't it neat" animated nonsense for general accessibility improvements and simplification of the page.

    That 134k total page size basically doing 40k's job...

  7. #7
    SitePoint Enthusiast
    Join Date
    Jan 2008
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by deathshadow60 View Post
    I would advise throwing away that mess entirely... building with actual semantic markup with meaningful heading orders, (every h# becoming h1 in HTML 5 only applies if you use section/article! -- you've got 4 tranny with a 5 slapped on it), accessible forms, and in general trading all the "gee ain't it neat" animated nonsense for general accessibility improvements and simplification of the page.

    That 134k total page size basically doing 40k's job....
    Mummy... he kicked my sand castle over

    ... yeah, not really worth changing everything, 90K is not very much in the grand scheme of things (its still in dev, so a lot of this is old css, script that I no longer need).

    Divs are just easier to go back and re-use, I'm sure it could be done with a lot less, but I really dont have that much life to waste (today )

    I'm redesigning it, but not throwing it all away (that green slidy thing its quite tacky though, I have to agree with that... its gone)

    Thanks people for your input

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Mr Tuition View Post
    Mummy... he kicked my sand castle over
    lol - It happens to us all

  9. #9
    SitePoint Member
    Join Date
    Jul 2011
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi I have read a fair few of these types of posts but have the same problem with my site.
    I've tried to add overflow;hidden ect.

    I'll just show my CSS:

    (just so you know this is my first attempt at writting any CSS)

    #wrapper {
    margin:auto;
    width:960px;
    border: 3px solid #a30d0d;
    overflow:hidden
    background-color:#fffff
    }
    #header {
    background-color:#a30d0d;
    height:76px;
    background-image:url(http://www.propertieschiangmai.com/i...bcolour2.png);
    background-repeat:no-repeat;
    }
    #alpha-logo {
    display:block;
    height:76px;
    text-indent:-9999px;
    width:216px;
    }
    #topmenu {
    height:20px;
    background-color:#fffff;
    }
    #left {
    text-align:right;
    float:left;
    width:145px;
    background-color:#a30d0d;


    }
    #right {
    float:right;
    width:145px;
    background-color:#a30d0d;
    }
    #mainbody {
    margin-left:155px;
    margin-right:155px;
    background-color:#fffff;
    }
    #middle {
    margin-left:155px;
    margin-right:155px;
    background-color:#fffff;
    }
    #footer {
    background-color:#a30d0d;
    height:50px;
    clear:both;
    }
    body {
    font-family:Calibri, Verdana, sans-serif;
    margin: 0 auto;
    padding: 0;
    background-color:#fffff;


    }
    #clearer {
    clear:both;
    height:1px;
    overflow:hidden;
    margin-top:-1px;

  10. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,199
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Hi richardbrown360. You haven't really explained what your problem is. It might be best to start a new thread with a clear explanation of what you are attempting,preferably with a link to your site.


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
  •