My Chrome install updated itself last night (without telling or asking me!)
It now interprets CSS percentage relative positioning differently to yesterday. Suppose I have:
<body>
<div class="everything">
<div class="centerMe">
Center me!
</div>
</div>
</body>
And this CSS:
body
{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
.everything
{
position: absolute;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
}
.centerMe
{
position: relative;
top: 50%;
left: 50%;
}
In the version of Chrome I had until last night (6.x), and for that matter in Firefox 3.6.10 and IE 8, the Center me! appears roughly in the middle of the page, vertically and horizontally.
But in Chrome 7.0.517.41, it is only centred horizontally. Vertically, it is at the top of the page.
Was this change made deliberately to address a long-standing inaccuracy in CSS rendering, or is it a new bug in 7.x that Google will fix soon?
Notes:
- If I take out the
<div class="centerMe">and corresponding</div>then Chrome 7.x obeys the vertical positioning, but Firefox and IE don't! (i.e. browsers all reverse their behaviour). - If I change the CSS for
.centerMetoposition: absolute;all browsers I've tested behave consistently, centring vertically and horizontally. This makes more sense anyway, so would appear to be the sane workaround for anyone who hits this as a problem. - As always, IE's behaviour is nothing remotely similar unless
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">appears at the start of the HTML.