Hi,
On Wed, Feb 23, 2011 at 7:26 AM, Ellen Herzfeld <[email protected]> wrote:
> However, on a site I'm working on I found it useful, for most of the pages,
> to give the html element a background color. Only on one page did I encounter
> a problem because I want a background image to fill the viewport on that page
> only and it doesn't.
I don't think that there is anything wrong with styling HTML element.
W3C might not recommend it, but... IIRC, I have found (like you) that
sometimes it is needed to help browsers like IE render background
colors/images (for example) which have been applied to the body tag.
Quickly looking at the CSS from some of the sites I have styled over
the years...
This code snippet involves height and min-width:
[code]
html, body {
height: 100%;
min-width: 1010px;
}
body {
color: #312e25;
background: #fff url(foo.jpg) no-repeat center top;
}
[/code]
Here's an occasion where I found that applying font color helped
(found via my resets.css file):
[code]
html { color: #000; }
[/code]
In fact, I think I found that via the YUI resets.css file:
http://developer.yahoo.com/yui/build/reset/reset.css
I don't see it included in the list of targeted elements anymore
(probably because "html" does not ever have padding/margins), but I
think YUI used to have "html" included in the margin/padding reset
list:
[code]
body, html,
div, dl, dt, dd, ul, ol, li,
h1, h2, h3, h4, h5, h6,
form, fieldset, legend, input, button, textarea,
pre, code,
p, blockquote,
th, td {
margin: 0;
padding: 0;
}
[/code]
Here's an occasion where I found it helpful to set the font family,
font color, and height:
[code]
html, body {
font-family: Georgia, "Times New Roman", Times, serif;
color: #000;
height: 100%;
}
[/code]
Here's where I set a background color in order for that color to fill
the browser window (IIRC):
[code]
html, body {
background: #e5e5e5;
min-width: 800px;
}
body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
[/code]
And here is a team project that I worked on where we applied a background image:
[code]
html, body {
height: auto !important;
height: 100%;
min-height: 100%;
min-width: 912px;
background: #f6f8eb url(foo.jpg);
}
body { color: #054c78; }
[/code]
I don't remember the specifics, I just remember that applying to both
the body AND html element helped rendering in certain browsers.
Lastly, here's an occasion where I have comments that explain what I
was doing with the height/min-height (note: in the rule for the "body"
where I mention an IE-specific hack):
[code]
html, body {
height: auto !important; /* FF and compliant browsers should
automatically size the body/html. */
height: 100%; /* IE will set the body/html to 100%, anything
overflowing that will (incorrectly) scale to fit. */
min-height: 100%; /* When FF/etc automatically size the body/html it
should be AT LEAST the height of the entire browser window, but can
expand based on content. */
min-width: 1010px; /* Overall width of site template. */
}
body {
color: #2d3138; /* Default color for copy. */
text-align: center; /* IE5 hack: Centers content. */
background-color: #cfd7e0;
background-image: url(foo.jpg);
background-repeat: repeat-y;
background-position: center top; /* See ie-7x.css for IE7-secific
"zoom" fix. */
}
[/code]
Here's ie-7x.css:
[code]
/*
**
** Fix IE zoom:
** http://www.communitymx.com/content/article.cfm?cid=5ED65
**
*/
html { background: #cfd7e0 url(foo.jpg) repeat-y center top; }
[/code]
With all that said, you might consider using Firefox with the Web
Developer Toolbar extension installed, and then surf around to your
favorite sites and use the WDT "CSS" >> "View CSS" option to see what
others are doing in terms of styling the HTML element. :)
Hope that helps!
Cheers,
Micky
______________________________________________________________________
css-discuss [[email protected]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
