Alright, i'm almost done but there are a few cross-browser issues going on. I'll make screenshots for ease of explaining, if people don't have the right browser.
In Firefox:
There seems to be a border above the body element that I can't seem to get rid of. I'm using the Web Developer addon in Firefox 2.0.0.11 to help me find borders. In this shot, the body element is outlined in red. This is despite having a margin and padding of zero. Setting
body {margin-top:-20px;} will solve this in Firefox, but causes IE to loose part of the header.
In Internet Explorer 6:
Under the header, there is an unsightly gap resulting from using the
position:relative style for the
h2 and
p elements in the header.
Adding overflow:hidden will fix this and now looks perfect, but causes more problems in
Firefox.
help?