This is similar to sagedavis's "Firefox hates my CSS..." post, with a slightly different issue.
I've been a Windows user (not necessarily by choice, lol) all my life. We recently redesigned our school website (at gaylordhighschool.org). Like the classic purist web designer, I wrote all the code (XHTML 1.0 Strict) myself, in addition to the CSS. Formerly a pretty good table-based web designer, I saw the need to get away from using tables as a web design tool, so I made the whole layout using CSS positioning. It looks great in IE7 (probably because that's where I did the majority of my testing), but... I've recently switched to a Mac computer, so I'm using Safari 3 now.
The layout looks basically the same - but there are a few issues. The navigation bar in the middle overlaps the logo/picture on the left. Both the navigation bar and the date/status section (at the top right) are a little taller than the logo/pic section. they should line up perfectly (they do in IE7). In addition - in the content section, the text seems to escape the div tags somehow.
I get most of the same problems in Mozilla Firefox. Again, everything seems to look great in IE7.
There's a part of me that says leave it - after all, Internet Explorer won the "browser wars" of the 90's, and has proved itself as the world's most popular web browser year after year since. However, as a Mac user myself, now... it's rather annoying to have to deal with the problem every time I visit our website. So I'd like to fix it.
What am I doing wrong here, and how might I go about fixing it?
Gaylord High School Website