Loading ...
Sorry, an error occurred while loading the content.

Re: [ydn-javascript] Re: YUI Grids body background color

Expand Messages
  • 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 1 of 3 , Oct 30, 2008
    • 0 Attachment
      Re: [ydn-javascript] Re: YUI Grids body background color 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 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

      In addition to the body bg color problem, I am facing one more problem -
      My code looks like this  -
      <html>
          <body>
              <div id=”doc”>
                  <div id=”hd”>
                  </div>
              ....
              </div>
          </body>
      </html>

      Now following are the css styles applied -
      html {
      background:#FFFFFF none repeat scroll 0 0;
      color:#000000;
      }

      body {
      background-color:#F09C9C;
      margin:0;
      }

      div#hd {
      background-color:#7B7ED1;
      margin:10px 0 0;
      }

      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.

      Is there any work around for this problem?

      Thanks,
      Shweta


      On 31/10/08 7:48 AM, "yowzator" <tauren@...> wrote:


       

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