Firefox 2.0.0.8 displaying Wrapper BG Colour Wrongly?

Jack Franklin · #1 (**permalink**) Dec 10th, 2007, 21:20

Hey all,

Been working on a new CSS Trickery site.

For some strange reason, FF2.0.0.8 does not show the #wrapper background colour at all, and just shows the Body Background Colour, whilst IE7 (for once) displays everything perfectly. Has anyone ideas why?

http://www.csstrickery.co.uk/testing.

For those without IE, the text in the middle should be on the same colour background as the 'CSS Web Design Blog' text above it.

Code in question:

Code: Select all

body, html {
margin: 0;
padding: 0;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #ccc;
background-color: black;
background-image: url(images/backgroundefo.jpg);
background-repeat: no-repeat;
background-position: top left;
}
 
 
#wrapper {
width: 800px;
margin: 30px auto;
background-color: #383838;
height: 100%;
}

I think it must be something about FF ignoring the Wrapper BG rule because of the Body BG colour rule. Any ideas welcome.

EDIT:

The CSS validates. However, the HTML doesn't. But I dont have a clue what this error means :P

Quote:

Line 40, Column 3: document type does not allow element "h3" here; missing one of "object", "applet", "map", "iframe", "button", "ins", "del" start-tag.
<h3>Borders as Underlines</h3>

Thank you,

Jack

Stuart · #2 (**permalink**) Dec 10th, 2007, 22:37

About the HTML error: What's your DOCTYPE?

MikeHopley · #3 (**permalink**) Dec 10th, 2007, 22:46

No, IE did not get it right. Just because IE does what you wanted doesn't mean it's correct.

Opera and Firefox both display the same. This is almost always a sign that they are right, and you've made a mistake. The only exception I've ever seen is the "1px rounding bug", which all browsers suffer from.

Because you're floating your columns, they can spill out of the container. This is perfectly correct according to the standards, and it actually makes good sense (although it's not immediately obvious).

To fix this, simply add a clearing <div> beneath the spilling-out boxes. Alternatively, apply { overflow: auto } to the wrapper.

To fix the XHTML errors, close all your <p> tags! Technically, the <h3> (for example) is inside a <p>, because you didn't close the <p> with </p>. This is not allowed (<p> may only contain inline content).

Monie · #4 (**permalink**) Dec 11th, 2007, 02:29

There is one more CSS error in your about us page!
Unknown Properties "text-size"
I think you mean font-size

Jack Franklin · #5 (**permalink**) Dec 11th, 2007, 06:46

No luck

By a Clearing Div I presume you mean {clear: both}. I put this just before the wrapper end tag. I've tried doing: <body bgcolor=>, i have tried surrounding everything in another div called #bgcolour, nope. I've set {overflow:auto} to the 3 main columns and the wrapper, but nothing.

Any other ideas :P

Appreciate the help.

Jack

MikeHopley · #6 (**permalink**) Dec 11th, 2007, 08:01

Have you tried fixing your broken code?

Lchad · #7 (**permalink**) Dec 11th, 2007, 22:08

This should do it

Code: Select all

#wrapper {
    width: 800px;
    margin: 30px auto;
    background-color: #383838;
    height: 100%;
    overflow: hidden;

}

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Extra code displaying in Firefox?	Kreeyon	Web Page Design	5	Apr 3rd, 2008 19:21
colour picker (firefox)	alexgeek	Scripts and Online Services	15	Oct 21st, 2007 16:46
Displays wrongly in Firefox?	spon	Web Page Design	5	Feb 15th, 2007 17:19
CSS menu displaying wrong in Firefox (fine in IE)	camcc	Web Page Design	10	Oct 21st, 2006 02:05
PHP file displaying wrongly ???	j4mes_bond25	PHP Forum	6	May 19th, 2006 17:35

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
Firefox 2.0.0.8 displaying Wrapper BG Colour Wrongly?