CSS Positioning

This week I did more work on the family reunion site. There were broken images, the header icon needed to link back to the home page and my header elements were not in place in IE8:

Though in Chrome and Firefox, the header was fine:

That’s what I spent the most time fixing, by reviewing CSS Positioning 101 at A List Apart.

I was using a span wrapper (#callout-head-wrap) around the two callout boxes in the top right corner, but I hadn’t set positioning on that wrapper or on the overall content wrapper (#contentwrap) around it. I set #contentwrap to relative positioning and #callout-head-wrap to absolute, then I set offsets from the top and right corners as well as a left offset to clear the logo. All of that fixed the IE display:

Why it was working in Firefox and Chrome without positioning defined, I don’t know (feedback welcome), but I guess setting the positioning is the right way to code that displays correctly across browsers.

I’d like to fix my non-rendering fonts — which render in IE — but the problem seems to be a Chrome bug and not something I’m doing wrong.

I also need to replace all of the images for better ones, but for now, at least they’re no longer broken.