Sometimes you just gotta love HTML and CSS. I recently made some changes to our site. Everything worked fine in Firefox, all flavors of IE that I tried, and Safari. And then there was Chrome. I thought that Safari and Chrome would behave almost identically since they are both Webkit based. But nope, Chrome had some weird layout, while Safari was fine.
The thing about CSS is that you have to put things in a fairly unintuitive form to get the layout to work the way you want. For example, if you want a multi-column layout, you can't just do something intuitive, like make a table. At least not in the older versions of CSS. Instead, you have to "float" some of the columns. And then you set other parts of the page to have funky margins. Now suppose you want a footer. Well, you can't just get that for free either. If you really want things to work the way you expect, you have to jump through some hoops to get the main sections to use up 100% of the page height. That forces the footer to the bottom. But then there's wrinkles even there. You have to make sure you "clear the floats". Otherwise the footer does some unexpected things. Anyway, the point here is that the old CSS involves layering hack upon hack. Throw in a bunch of browser inconsistencies and you've got a pretty fragile setup. And that's kinda where we are.
Here are some test pages that show the problem - the broken page and the fixed page. These both show a simplified version of our two column layout with footer. The problem is that the red box gets pushed below the height of the left column. Remember that it's only broken on Chrome, so you should see the same thing for both examples in any other browser.
So why does it do this? It's because the red box is marked with "width: 100%". This by itself actually doesn't trigger the problem. But combining that with "border: 1px solid black" seems to be the key. That extra 1 pixel border forces the red box to have a width slightly bigger than 100%, which won't fit next to the "floated" left column. So Chrome bumps it down to the next available space. The fix then is just to remove the "width: 100%". That wasn't really necessary in this case because the browser gives the box the full width on its own.
I'm not sure which browser is technically doing the right thing, but Chrome's behavior sure is the more annoying one in this case.
Incidentally, I haven't included Opera in our tests yet. Since we have a very limited web development team, i.e. me, and way too much to do it's one triage decision we've made so far. Hopefully when we get further along we'll have more resources available to test Opera and Lynx and <insert your favorite obscure browser here>.
