Welcome to WebmasterWorld Guest from 54.234.244.30

Forum Moderators: not2easy

Message Too Old, No Replies

CSS Help with Canvas background

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

     
1:41 am on Jul 20, 2002 (gmt 0)

Junior Member

joined:Mar 29, 2002
posts:107
votes: 0


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

1:53 am on July 20, 2002 (gmt 0)

Preferred Member

10+ Year Member

joined:Sept 20, 2001
posts:478
votes: 0


Is this in an external stylesheet?, do you have a straggling background set on the page still?
1:55 am on July 20, 2002 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Mar 15, 2002
posts:971
votes: 0


Yeah, need a bit more information. But don't forget to add a semi-colon after your margin value (margin: 0px;)
2:07 am on July 20, 2002 (gmt 0)

Preferred Member

10+ Year Member

joined:July 20, 2001
posts:449
votes: 0


I think the syntax is "background" rather than "background-color".
2:56 am on July 20, 2002 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Dec 31, 2001
posts:1238
votes: 0


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.

3:21 am on July 20, 2002 (gmt 0)

Junior Member

joined:Mar 29, 2002
posts:107
votes: 0


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]

3:51 am on July 20, 2002 (gmt 0)

Senior Member

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:May 26, 2000
posts:37301
votes: 0


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

4:17 am on July 20, 2002 (gmt 0)

Junior Member

joined:Mar 29, 2002
posts:107
votes: 0


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

6:07 am on July 20, 2002 (gmt 0)

Junior Member

joined:Mar 29, 2002
posts:107
votes: 0


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

4:42 pm on July 20, 2002 (gmt 0)

Preferred Member

10+ Year Member

joined:May 1, 2002
posts:351
votes: 0


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

6:28 pm on July 20, 2002 (gmt 0)

Junior Member

joined:Mar 29, 2002
posts:107
votes: 0


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

8:13 pm on July 20, 2002 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Dec 31, 2001
posts:1238
votes: 0


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...]

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members