CSS Help with Canvas background

Trying to get HTML 4.01 verified, Little Hair Left!!

[eboda]

I think the title said it all, so bowing my head to the Webmasterworld forum, I come humble!

Here is the problem:
I am moving a lot of my html elements over to the css side to get my site html 4.01 verified. (a challange but been fun).

So a peak at this code can anyone tell me why the main canvas background is not showing white?:

body
{ color: #000000; font-size: 13px; line-height: 15px; background-color: #fff; margin: 0px }

Everything else works great but the page background. What could i be doing wrong?

Thanks in advance!
eboda

[SmallTime]

Is this in an external stylesheet?, do you have a straggling background set on the page still?

[madcat]

Yeah, need a bit more information. But don't forget to add a semi-colon after your margin value (margin: 0px;)

[rjohara]

I think the syntax is "background" rather than "background-color".

[papabaer]

background-color is valid [w3.org...] but shorthand is even better.

body {
color: #000;
background: #fff;
font: 13px/15px;
margin: 0;
padding: 0;
}

Keep in mind a potential pitfall: when you assign line-height to the body element, it effects headings and other elements as well. In some cases it will not matter, but is may produce unexpected results in others.

You may prefer to assign line-height to the <p> element instead.

body {
color: #000;
background: #fff;
margin: 0;
padding: 0;
}

p {
font:13px/15px Verdana, Arial, sans-serif;
}

Do use padding for your body style grouping as Opera correctly interprets padding in this case: margin:0; is actually improperly applied.

[eboda]

Yes this is an external stylesheet to answer the question.

1.) To see the canvas error I am talking about - You will want to go to your browsers prefs and set the browser canvas default color to grey or something other than the default (white) like that when viewing my page.

2.) You can then see the error in action by <going to index2.shtml on my profile site>.

Hope this was clear in showing my error. Any ideas... seems something is missing, but I can't get past it. Though I have been really learning this stylesheet thing... Getting HTML 4.01 and Style sheet to work together have been a challange to say the least... Fun though!

I really appreciate the feedback here... By nature I try to solve things myself, but at my end here. :)

Thanks all!
eboda

[edited by: tedster at 3:46 am (utc) on July 20, 2002]
[edit reason] remove links [/edit]

[tedster]

eboda, I'm not seeing any problems - checked in Opera 6, Explorer 6 and Netscape 4 -- and I always keep my canvas set to gray, and my default font set to a script so that undetermined areas jump out at me.

Don't know why you are seeing this problem. What browser is it showing in? Do you, by any chance, have the box checked to "always use my colors"?

[eboda]

Okay I will have to work through this.. strange you are not seeing it?

I have tried both my Mac and PC and see it, grrrrr.

sorry about posting the direct link. Still learning the rules of thumb here in WmW

eboda

[eboda]

Got it!

Thanks all for the feedback, I found out what was going on. It was the browser settings after all and not the css.

Feeling sheepish right now...

Thanks!
eboda

[moonbiter]

One (often overlooked) note that is related (but not to this particular instance). In a strict interpretation of the CSS recommendation, you set the color of the canvas as the background color of the root element of the document. To meet designers' expectations, however, the W3C introduced this rule:

"The background of the box generated by the root element covers the entire canvas.

"For HTML documents, however, we recommend that authors specify the background for the BODY element rather than the HTML element. User agents should observe the following precedence rules to fill in the background: if the value of the 'background' property for the HTML element is different from 'transparent' then use it, else use the value of the 'background' property for the BODY element. If the resulting value is 'transparent', the rendering is undefined." (from the W3C CSS 2 Recommendation [w3.org]. It can also be found in the CSS 1 Recommendation [w3c.org])

In other words, if you set a background-color on the <html> element of a webpage, it will override a background color on the <body> element. But don't do that! :)

[eboda]

Another question(s)...

background-repeat:

What does this feature do, I can't seem to find info on background-repeat. Anyone point me to the source or explain?

Next, now that I have moved my background color and links a.hovers over to css, I notice on Opera that a.hovers are not the same as they show on IE and NS? - Why is this?

Thanks!
eboda

[papabaer]

Background-repeat is used when repetition of a background image is desired. The repeat can follow x or y coordinates or both (full tile).

body {
background:#fff url(myBackgroundImage.gif) repeat
}

[w3.org...]

The above will explain background-repeat. There is no pseudo-class named a.hovers (typo?) - here is the W3C reference: [w3.org...]