I was checking out the "sticky footer" stuff today and came across a unique instance that makes a little problem. I’ve used the sticky footer before and usually works great. In this case I create a design that requires me to use several background graphics for the main layout. One for the body and 2 different ones for the header. One header graphic repeats-x and the other is centered at the top. The display:table; makes it so when the browser is scaled smaller then the "main container" it hold its position, rather then centering in the browser and moving.
Here is the html/body CSS
This is the header graphic that is centered
Has anyone ever experienced this before? Is there maybe a different fix for keeping the background image centered? Can post an example later when this site design goes live.
I think Chris dealt with this once on the script&style page.
A ways down in the comments there are these two jewels of information from LPent:
For HTML documents, however, we recommend that authors specify the background for the BODY element rather than the HTML element. For HTML documents whose root HTML element has computed values of ‘transparent’ for ‘background-color’ and ‘none’ for ‘background-image’, user agents must instead use the computed value of those properties from that HTML element’s first BODY element child when painting backgrounds for the canvas, and must not paint a background for that BODY element. Such backgrounds must also be anchored at the same point as they would be if they were painted only for the root element. This does not apply to XHTML documents.
What it says is that when you do not declare a background property on HTML, anything you declare on BODY will be rendered on HTML. Once you declare something on HTML as well, anything declared on BODY will be rendered on BODY.
So it is not a bug, it is standards behaviour.
Hope this clears it up?
You must be logged in to reply to this topic.