CSS is a tricky beast to make work and look properly across different browsers, again proven here.
First, my mozilla browser (on linux) didn't render the site header properly at all - it was as if there was no css at all. the files check out ok and after about a dozen reloads and window switches, it all worked...
Second, because baseline alignment doesn't work across divs, the alignment of the various divs within #site-header depends on font sizes. On my browser, the server name stuck out too low and the other text flushed to the top. No amount of vertical-align prodding could fix it, and the only solution was to add a 4px padding-top to #site-header and a margin-top of -4px to .system-name.
The same problem appears on Safari on the Mac, except to fix it there you need a margin-top of -1px;
Even bigger problems are in Explorer for the Mac, which renders it all vertically instead of horix]zontally. I know that Mac IE is deprecated, but it still ships, and people will use it for a long time so I think that something as core as the site-header (that appears on every page) should work in it.
There is also a simple bug, that #context-bar needs a clear:both; to flush left.
So given these issues, unless they can be resolved I don't think we have a lot of option but return to a table.
Comments anyone?
