Secondary Navigation

YUI Grids body background color

I have found that the only way to set a background color on the entire page, not just the content area is to add it to the html tag. Without yui-grids CSS

Message 1 of 3
, Oct 30, 2008

I have found that the only way to set a background color on the entire
page, not just the content area is to add it to the html tag.

Without yui-grids CSS included in an HTML file, this style will make
the entire page have a background color:

body {
background-color: #9ccecc;
}

If I include reset-fonts-grids.css, then only the content area has the
background color, and I have to do this to make the whole screen have
the background:

html {
background-color: #9ccecc;
}

I realize that styling the html element is a simple enough fix for
static HTML files. But I have a use case where data is generated
dynamically and different colors are necessary for different sections.
Styling the html element is going to be much more difficult than
adding a class to the body tag.

So, before I go to this trouble, is there some CSS resetting code that
will get the original body background-color browser functionality
back, without breaking anything else in YUI-Grids?

Follow up to my question. In the #yui channel, yui_lsmith gave me a tip that provided a partial solution to this. He suggested I try: html {background-color:

Message 2 of 3
, Oct 30, 2008

Follow up to my question.

In the #yui channel, yui_lsmith gave me a tip that provided a partial
solution to this. He suggested I try:

html {background-color: inherit;}
body {background-color: #9ccecc;}

This works in Firefox. The background color now fills the full screen.

But in IE, it doesn't change a thing. The background color ends with
the content, and the remainder of the screen is white.

So far, I've only tested in FF in WinXP and Ubuntu, plus IE on WinXP.

Tauren

--- In ydn-javascript@yahoogroups.com, "yowzator" <tauren@...> wrote:
>
> I have found that the only way to set a background color on the entire
> page, not just the content area is to add it to the html tag.
>
> Without yui-grids CSS included in an HTML file, this style will make
> the entire page have a background color:
>
> body {
> background-color: #9ccecc;
> }
>
> If I include reset-fonts-grids.css, then only the content area has the
> background color, and I have to do this to make the whole screen have
> the background:
>
> html {
> background-color: #9ccecc;
> }
>
> I realize that styling the html element is a simple enough fix for
> static HTML files. But I have a use case where data is generated
> dynamically and different colors are necessary for different sections.
> Styling the html element is going to be much more difficult than
> adding a class to the body tag.
>
> So, before I go to this trouble, is there some CSS resetting code that
> will get the original body background-color browser functionality
> back, without breaking anything else in YUI-Grids?
>
> Here is a sample file to show the problem:
>
> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
> <html>
> <head>
> <meta http-equiv="Content-Type" content="text/html;
> charset=iso-8859-1" />
> <title>Test Background</title>
> <link rel="stylesheet"
>
href="http://yui.yahooapis.com/2.6.0/build/reset-fonts-grids/reset-fonts-grids.css"
> type="text/css">
> <style>
> body {
> background-color: #9ccecc;
> }
> </style>
> </head>
> <body>
> <p>Test body background color</p>
> <p>Test body background color</p>
> <p>Test body background color</p>
> <p>Test body background color</p>
> <p>Test body background color</p>
> <p>Test body background color</p>
> <p>Test body background color</p>
> </body>
> </html>
>
> Thanks!
> Tauren
>

Shweta Tripathi

Hi, I have been facing similar problems with reset-fonts-grids.css. Basically background-color on html tag is causing the problem as mentioned below about body

Message 3 of 3
, Oct 30, 2008

Re: [ydn-javascript] Re: YUI Grids body background colorHi,

I have been facing similar problems with reset-fonts-grids.css. Basically background-color on html tag is causing the problem as mentioned below about body bg color.
Lets say I don’t want to use html tag’s bg color for the page bg color, instead I would prefer to use body bg color as page bg color. Generally in most of the web pages that’s how the page bg color is given i.e. By giving bg color to body. Is there any specific reason why the reset-fonts-grids.css specifies bg color on html tag. I happen to see this link which says that styling on html tag is not valid - http://www.w3schools.com/tags/ref_standardattributes.asp

Now the top margin of 10px on #hd is actually setting top margin for body and I see a strip of white color before body bg starts. If I remove the css properties for html tag, the #hd’s top margin is within body only that is it leaves 10px margin within body’s top border (a pink strip) which is the expected behavior.

In the #yui channel, yui_lsmith gave me a tip that provided a partial
solution to this. He suggested I try:

html {background-color: inherit;}
body {background-color: #9ccecc;}

This works in Firefox. The background color now fills the full screen.

But in IE, it doesn't change a thing. The background color ends with
the content, and the remainder of the screen is white.

So far, I've only tested in FF in WinXP and Ubuntu, plus IE on WinXP.

Tauren

--- In ydn-javascript@yahoogroups.com <mailto:ydn-javascript%40yahoogroups.com> , "yowzator" <tauren@...> wrote:
>
> I have found that the only way to set a background color on the entire
> page, not just the content area is to add it to the html tag.
>
> Without yui-grids CSS included in an HTML file, this style will make
> the entire page have a background color:
>
> body {
> background-color: #9ccecc;
> }
>
> If I include reset-fonts-grids.css, then only the content area has the
> background color, and I have to do this to make the whole screen have
> the background:
>
> html {
> background-color: #9ccecc;
> }
>
> I realize that styling the html element is a simple enough fix for
> static HTML files. But I have a use case where data is generated
> dynamically and different colors are necessary for different sections.
> Styling the html element is going to be much more difficult than
> adding a class to the body tag.
>
> So, before I go to this trouble, is there some CSS resetting code that
> will get the original body background-color browser functionality
> back, without breaking anything else in YUI-Grids?
>
> Here is a sample file to show the problem:
>
> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
> <html>
> <head>
> <meta http-equiv="Content-Type" content="text/html;
> charset=iso-8859-1" />
> <title>Test Background</title>
> <link rel="stylesheet"
>
href="http://yui.yahooapis.com/2.6.0/build/reset-fonts-grids/reset-fonts-grids.css"
> type="text/css">
> <style>
> body {
> background-color: #9ccecc;
> }
> </style>
> </head>
> <body>
> <p>Test body background color</p>
> <p>Test body background color</p>
> <p>Test body background color</p>
> <p>Test body background color</p>
> <p>Test body background color</p>
> <p>Test body background color</p>
> <p>Test body background color</p>
> </body>
> </html>
>
> Thanks!
> Tauren
>

Your message has been successfully submitted and would be delivered to recipients shortly.