body { and #mainWrapper { background-colour question.

17 Jul 2006, 12:33 PM

#1

Totally Zenned

Join Date:: Mar 2005
Posts:: 535
Plugin Contributions:: 3

body { and #mainWrapper { background-colour question.

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

17 Jul 2006, 12:42 PM

#2

reesy

Totally Zenned

Join Date:: Mar 2005
Posts:: 535
Plugin Contributions:: 3

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

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;
}

17 Jul 2006, 12:42 PM

#3

jak

New Zenner

Join Date:: Sep 2005
Location:: Derby
Posts:: 15
Plugin Contributions:: 0

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

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

17 Jul 2006, 12:49 PM

#4

reesy

Totally Zenned

Join Date:: Mar 2005
Posts:: 535
Plugin Contributions:: 3

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

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

17 Jul 2006, 1:15 PM

#5

jak

New Zenner

Join Date:: Sep 2005
Location:: Derby
Posts:: 15
Plugin Contributions:: 0

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

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:

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

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

17 Jul 2006, 2:04 PM

#6

reesy

Totally Zenned

Join Date:: Mar 2005
Posts:: 535
Plugin Contributions:: 3

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

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

17 Jul 2006, 2:22 PM

#7

jak

New Zenner

Join Date:: Sep 2005
Location:: Derby
Posts:: 15
Plugin Contributions:: 0

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

Do you have a URL available to peruse?

18 Jul 2006, 1:32 AM

#8

reesy

Totally Zenned

Join Date:: Mar 2005
Posts:: 535
Plugin Contributions:: 3

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

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 :down: :cry: