Quick question about css

[quote]I am sure most of you know this by now. But I will post this for those still battling with getting a background color or image to work with firefox. Firefox uses the html tag instead of the body tag. From what I can tell IE will use either. But for a so called “gauranty” I use both tags with identical settings.
Silk[/quote]
You’re talking about getting a background colour and image? You’re not suppose to style the HTML tag. That’s just a “over all” enveloping tag. It’s not for styling.

Firefox, Opera, Safari and IE will all let you style the tag. Just use: body { yourstuff: value }

If that doesn’t work, there’s something else wrong. Don’t style HTML cause it’s not there for styling, it’s just there to envelope the whole page into a single parent tag (think XML).

I’m sorry, but that just isn’t correct for the reasons I explained earlier. In XML you must set background color/image properties on the root element, which is the HTML element in the case of XHTML. In the case of plain old HTML, you must style the BODY element instead.

I know it sounds wrong, but read the relevant bit of the CSS spec if you don’t believe me. Bear in mind that this behavior only works in standards mode rendering (including IE6), so you will need to include the correct DOCTYPE to make sure the HTML element represents the canvas.


Simon Jessey
Keystone Websites (business site) | si-blog (personal site with affiliate links)

All I know is that I can’t get into a who’s right conflict as I am not qualified.
By using the body tag, my browser plus others have mentioned that the background is pure white. I read in a css book that some browser may require background values be placed in the html tag. Low and behold it fixed firefox.
According to that link from scjessey it seams to me that firefox is more xml complient than it is html/css complient.
Silk

It also has to do with the way the page is being served (text/html, text/xml or application/xhtml+xml).

This thread may be helpful:

http://archivist.incutio.com/viewlist/css-discuss/50593

[quote]It also has to do with the way the page is being served (text/html, text/xml or application/xhtml+xml).

This thread may be helpful:

http://archivist.incutio.com/viewlist/css-discuss/50593[/quote]
That isn’t entirely right either. It has more to do with your DOCTYPE declaration, to be honest. For example, Internet Explorer 6.0 running in standards mode will allow the root element (HTML) to be styled, even if the document is being served as text/html. It is safer to simply do this:html, body { background: [i]whatever[/i]; color: [i]whatever[/i]; }----------------
Simon Jessey
Keystone Websites (business site) | si-blog (personal site with affiliate links)

*edit

Okay, I ran some tests on my dev server and I found it does have to do with the content-type, at least for Firefox.

While I never had problems with the background colour, the comment about the content-type got me thinking. I have 100% correct DOCTYPE and <?xml starter, but my page was still getting served as text/html. So I manually added a Content-type: text/xml and now I see the problem previously mentioned.

It is rather interesting, actually. I’ll have to keep this in mind from now on. Guess I need to start manually setting the content type on my websites!

However, it does completely screw up IE as it’s not smart enough to know these new fangledangle technologies.

Opera: Doesn’t make a difference. Body colour fully covered the entire window.
Firefox: Only covered the body portion of the webpage. The rest of the window was the default colour.
IE: Gave XML parsing errors: to compound IE’s errors, W3 appears to be down right now (or having problems) and IE is unable to download the xhtml-stict DTD making the webpage take AGES to load. (IE seems to have a 5 hour timeout – okay, make that 5 minutes, but it feels like 5 hours).

It isn’t just a background color you need to worry about. The biggest problem appears to be with tiled background images - they need to be applied to the HTML element in XHTML.


Simon Jessey
Keystone Websites (business site) | si-blog (personal site with affiliate links)

duh I can’t beleive I did it long handed. I totally forgot about stacking tags like that. Funny part is a few days earlier I stacked other tags to reduce the file size.
This is getting to be an interesting thread. From the way this reads it sounds like firefox has its own quirks vs. standard modes. BTW, I don’t beleive I set a content type, perhaps that is the culprit.
Silk

There are three modes in most modern browsers:

  1. Quirks mode - triggered by having no DOCTYPE (can also be triggered in IE6 if the XML prolog is added to an XHTML document).
  2. “Almost” standards mode - triggered by having a DOCTYPE, but with the DTD URL omitted.
  3. Standards mode - triggered by having the correct DOCTYPE (including the DTD URL).

All of these are handled by the HTML parser of the browser in the usual way, unless the document is a Strict XHTML document with a content type (set at the server level, of course) of text/xml, or more appropriately application/xhtml+xml. Such documents must also be well-formed, or they will produce an error (meaning that none of the document is rendered), because they are handled by the XML parser, rather than the HTML parser.


Simon Jessey
Keystone Websites (business site) | si-blog (personal site with affiliate links)

What Simon said. I just never realized that my pages were being sent as a content-type text/html until I took a closer look at it.

You want to try your best to keep at least at mode 3 since that’s the mode you can control most.

OK, so for either browser to be in true “standards mode” then I need the url in the doctype to w3c.com
I recently added the doctype and left the url off. Now this doctype has to be on every html page correct?
Silk

[quote]OK, so for either browser to be in true “standards mode” then I need the url in the doctype to w3c.com
I recently added the doctype and left the url off. Now this doctype has to be on every html page correct?[/quote]
Correct. You can only get standards mode (HTML 4 and XHTML) if you use complete and accurate doctype declarations. If you include the XML prolog (which is many case is not required), it will trigger quirks mode in IE6. For a full list of doctypes, see this article.


Simon Jessey
Keystone Websites (business site) | si-blog (personal site with affiliate links)

jessey: standards, nutella and keep your mouth closed when you chew, you’re like my dream girl, but you’re a dude :slight_smile:

[color=#0000CC]jason[/color]

Er… thank you. I think.


Simon Jessey
Keystone Websites | si-blog

LOL :slight_smile: