While being jestfully critical of the use of a table on the Justwatchthesky.com placeholder page I proposed a simple CSS alternative and stumbled upon a curious behavior of the
margin-top attribute. Assigning a percentage value does not set the
margin-top to a percentage of the element’s height as one might expect. Instead it appears to set the
margin-top to a percentage of the elements width! The same behavior occurs when
padding-top is used.
Check out this CSS alternative and increase the height of the window—the placeholder does not change position. Now increase the width of the window—the placeholder stays centered (thanks to
text-align: center for IE PC and an auto left and right margin for everyone else) but also moves down the page.
Quite an slick effect, especially given my assertion that beauty lies in relative proportions. Surprisingly, it works consistently in Safari, IE Mac, IE PC 5+, and Mozilla-based browsers so I would assume this is the intended and appropriate behavior.
Perceived snooty standards nose-thumbing aside, I can’t wait to see what Ryan is cooking up and really don’t think anyone should fault him for using a gasp
</sarcasm> table in this temporary situation. What was I doing in his source in the first place? Hoping to find comments in his code clueing us in on when to expect the new design. Don’t you do that?