Cant fgure out why divs arent inheriting background colour

Mr_Tuition 2011-06-18 13:58:39 UTC #1

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

<body>
<div class="centerbody"> // my wrapper div
/// rest of site
</div>
</body>

I have css for the body and for the wrapper:

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

.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)

ralphm 2011-06-18 14:46:29 UTC #2

Add the line in red to your CSS, and be amazed:

#centerbody {
  background: none repeat scroll 0 0 #BFBFBF;
  border: 0 none;
  margin-left: auto;
  margin-right: auto;
  width: 1000px;
  <font color='"Red"'>overflow: hidden;</font>
}

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.

Mr_Tuition 2011-06-18 15:20:26 UTC #3

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)

ralphm 2011-06-18 15:28:20 UTC #4

Glad that helped.

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.

PaulOB 2011-06-18 15:29:46 UTC #5

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.

system 2011-06-18 18:47:18 UTC #6

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...

Mr_Tuition 2011-06-19 01:25:47 UTC #7

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

PaulOB 2011-06-19 08:42:34 UTC #8

lol - It happens to us all

richardbrown360 2011-07-13 08:54:57 UTC #9

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/images/sm-logo-webcolour2.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;

ralphm 2011-07-13 09:01:55 UTC #10

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.

system 2014-10-08 01:16:39 UTC #11

ThemesPodcastArticlesPremium