body { and #mainWrapper { background-colour question.

**Reesy** · 17 Jul 2006, 01:33 PM

Hi,
Im confuzzzled about background-colors.
I understand the body tag controls the main page colour, ie on this forum its black (as seen around the edges, at the top etc etc).
I understand the mainwrapper controls the main page colour where all the text is displayed?

Im triyng to get a black background with main wrapper of white, a bit like this forum really (ok i know its not white before someone points that out

). but it seems if I change either the main wrapper or the body tag it overwrites the other and I still get a black background for both.

Can anyone advise here...
(1.3.0.2 btw)

#mainWrapper {
background-color: #000000;
text-align: left;
width: 100%;
vertical-align: top;
}

body {
margin: 0;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 62.5%;
color: #666666;
background-color:#000000;
}

If I have the above, I get a white page with a white background.

**Reesy** · 17 Jul 2006, 01:42 PM

Sorry, those figs are wrong... lets try that again.

#mainWrapper {
background-color: #FFFFFF;
text-align: left;
width: 100%;
vertical-align: top;
}

body {
margin: 0;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 62.5%;
color: #666666;
background-color:#000000;
}

**jak** · 17 Jul 2006, 01:42 PM

Your mainWrapper is 100% of the width of the container - which I assume is the body.

Try reducing with width of your wrapper, since at the moment it's filling the page - hence the impression that the body background isn't being applied.

Hope this helps!

Jak

**Reesy** · 17 Jul 2006, 01:49 PM

Hi jak,
Thanks for your reply, I also thought that, that might be the case and already tried that, I checked with freshly downloaded files and thats in there as standard.

If you have any other ideas that would be great.
Cheers
James

**jak** · 17 Jul 2006, 02:15 PM

That's odd - just to sanity check, I've taken just that bit of css and put it into a mini html document, it it behaves as expected:

Code:

<html>
<head>
<style type="text/css">

#mainWrapper {
background-color: #FFFFFF;
text-align: left;
width: 90%;
vertical-align: top;
}

body {
margin: 0;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 62.5%;
color: #666666;
background-color:#000000;
}


</style>

<body>Hello

<div id="mainWrapper">Hello2</div>
</body>

</html>

and if you add margin: auto; you get the effect of a border all round:

Code:

<html>
<head>
<style type="text/css">

#mainWrapper {
background-color: #FFFFFF;
text-align: left;
width: 90%;
margin: auto;
vertical-align: top;
}

body {
margin: 0;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 62.5%;
color: #666666;
background-color:#000000;
}


</style>

<body>Hello

<div id="mainWrapper">Hello2</div>
</body>

</html>

Is this the effect that you want?

**Reesy** · 17 Jul 2006, 03:04 PM

odd indeed which is why I cant work it out.
I guess there must be something else in that stylesheet overiding it?

In short, no it doesnt work, ive tried altering the width, removing it and no change.

**jak** · 17 Jul 2006, 03:22 PM

Do you have a URL available to peruse?

**Reesy** · 18 Jul 2006, 02:32 AM

Have PMd you the url thanks Jak (anyone else that wants to see it just shout).

I have found that the closest I have come to achieving a white page on a black background is to change this

.centerColumn, #bannerOne, #bannerTwo, #bannerThree, #bannerFour, #bannerFive, #bannerSix {
padding: 0.8em;
background-color: #FFFFFF
}

However at the bottom of all of the pages where the page is a bit short (ie not many categories etc) you can still see the black background.

Oh how I love css

Thread: body { and #mainWrapper { background-colour question.

Thread Tools

Search Thread

Display

body { and #mainWrapper { background-colour question.

Re: body { and #mainWrapper { background-colour question.

Re: body { and #mainWrapper { background-colour question.

Re: body { and #mainWrapper { background-colour question.

Re: body { and #mainWrapper { background-colour question.

Re: body { and #mainWrapper { background-colour question.

Re: body { and #mainWrapper { background-colour question.

Re: body { and #mainWrapper { background-colour question.

Similar Threads

Background colour - Body tag not found

Background images for header, body, and footer...

transparent background in wrappers so BODY background shows through

Question about MainWrapper and it wide

Controlling Alignment of body and/or mainwrapper?

Posting Permissions