When applying a padding-top value to <body> when <body> has a background image applied to it, the vertical positioning of the background isn't respected. Applying a margin instead respects proper positioning of the background image when logged in under an account with admin as well as anonymously.

CommentFileSizeAuthor
toolbar-20100517.patch927 bytesSteveK
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

SteveK’s picture

Version: 7.0-alpha4 » 7.x-dev

changing to dev release.

aspilicious’s picture

Status: Active » Needs review

Status: Needs review » Needs work

The last submitted patch, toolbar-20100517.patch, failed testing.

casey’s picture

Interesting. Margin-top on the HTML element doesn't work in IE6 however. But adding the padding to HTML instead to the BODY seems to be a good idea as body's background-image will move along. I am going to include this in #787940: Generic approach for position:fixed elements like Toolbar, tableHeader.

sun’s picture

Before even remotely considering this approach, you need to provide evidence that this trick works flawlessly in all browsers, platforms, and versions (including IE6).

To my knowledge, it does not.

casey’s picture

Yike, I found out the padding-top on HTML only works when it also has an background. But when you give HTML a background color, BODY no longer stretches its height to window's height.

margin-top on the HTML doesn't work in IE6. In IE7 the margin-top works, but the background-image is not moved along.

Edit
Relevant links

http://www.w3.org/TR/CSS21/colors.html#background:
The background of the root element becomes the background of the canvas and covers the entire canvas, anchored (for 'background-position') at the same point as it would be if it was painted only for the root element itself. The root element does not paint this background again.

For HTML documents, however, we recommend that authors specify the background for the BODY element rather than the HTML element. For documents whose root element is an HTML "HTML" element or an XHTML "html" element that has computed values of 'transparent' for 'background-color' and 'none' for 'background-image', user agents must instead use the computed value of the background properties from that element's first HTML "BODY" element or XHTML "body" element child when painting backgrounds for the canvas, and must not paint a background for that child element. Such backgrounds must also be anchored at the same point as they would be if they were painted only for the root element.

Ah, that's why padding-top on HTML only works when it also has an background.

margin-top on HTML

  • works correctly in Opera/Safari/Chrome/FF/IE8
  • in IE7 the background-image of BODY isn't moved along
  • doesn't work at all in IE6

margin-bottom on HTML

  • works correctly in Opera/Safari/Chrome
  • in FF/IE8/IE7 a background-image with (background-position: x bottom) of BODY isn't moved along
  • doesn't work at all in IE6