problem with BODY tag in firefox

[Plater]

I'm having a bit of trouble getting firefox to colorize my page.
I have for example:

body { background-color:red; color:white; }
 

In IE6 this makes my page red. In Firefox it only makes the area where there is text red.
How can I force firefox to make the entire background red?

[Banfa]

I think that should work, which suggests may be an error elsewhere.

Generally I always start my CSS with something like

html,body{
  margin: 0;
  padding: 0;
  font-size: 100%;
  background-color: #F8FDD1;
}
 

Which normally has the desired effect on the background colour in all browsers.

I do not have access to firefox since I am at work but I suggest you take a browser through the DOM to see which rules are being applied to the areas in error and what the result is.

[Plater]

html,body{
  margin: 0;
  padding: 0;
  font-size: 100%;
  background-color: #F8FDD1;
}
 

Well it seemed a bit silly to me, but changing my body to html,body did the trick. Not sure why it wasn't applying to the body object, but all well

[drhowarddrfine]

In IE6 this makes my page red. In Firefox it only makes the area where there is text red.

In modern browsers, that is, not IE, html and body are seperate elements, but, in any case, the body should expand to fit the screen. This is a bug, among millions of others, in IE.

The reason adding html makes the whole background change color is because html is always the full browser viewport while body may not be and can be adjusted. body only expands to contain its contents. Firefox, again, is behaving correctly and per the standards. IE is not.

Banfa,
Why do you do "font-size:100%"? font-size is always 100% unless it's changed elsewhere.

[Plater]

Ah, see I always thought that since everything visible must go between the BODY tags, that it was representative of the whole page. No matter, adding that second bit made both of them work correctly.

[Banfa]

Banfa,
Why do you do "font-size:100%"? font-size is always 100% unless it's changed elsewhere.

Well I may be a little out of date on this point but research seems to suggest that when using proportional font sizes (em, %, ex to name a few) the various browsers from various makers do not always seem to produce the same result for the same value.

Setting the font-size to 100%, which should be the CSS font-size equivalent of the assignment 1 = 1, actually reduces these effects.

This stems from the days of IE5, FireBird, Opera 6 and Netscape 6 so may my inclusion of it may well be a legacy thing now-a-days.

Setting the margin and padding also stems from those days where the different browsers variously put margins or paddings on the html or body tag to create the default margin.

The posted CSS is what I used to create as level a playing field as possible cross browser to start from.

[drhowarddrfine]

The margin/padding thing is perfectly valid, though there are new ways to "reset CSS" as it's called now. The only potential problem with using 100% is it becomes 100% of its parent, and if you size the parent, it can throw things off.

I need to write an article about resetting CSS.