homepage Welcome to WebmasterWorld Guest from 54.227.41.242
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
CSS Help with Canvas background
Trying to get HTML 4.01 verified, Little Hair Left!!
eboda




msg:1222744
 1:41 am on Jul 20, 2002 (gmt 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

 

SmallTime




msg:1222745
 1:53 am on Jul 20, 2002 (gmt 0)

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

madcat




msg:1222746
 1:55 am on Jul 20, 2002 (gmt 0)

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

rjohara




msg:1222747
 2:07 am on Jul 20, 2002 (gmt 0)

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

papabaer




msg:1222748
 2:56 am on Jul 20, 2002 (gmt 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.

eboda




msg:1222749
 3:21 am on Jul 20, 2002 (gmt 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]

tedster




msg:1222750
 3:51 am on Jul 20, 2002 (gmt 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"?

eboda




msg:1222751
 4:17 am on Jul 20, 2002 (gmt 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

eboda




msg:1222752
 6:07 am on Jul 20, 2002 (gmt 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

moonbiter




msg:1222753
 4:42 pm on Jul 20, 2002 (gmt 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! :)

eboda




msg:1222754
 6:28 pm on Jul 20, 2002 (gmt 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

papabaer




msg:1222755
 8:13 pm on Jul 20, 2002 (gmt 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...]

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved