Firefox vs. Safari vs. IE CSS Battle

[opsryushi]

Ahoy all,
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?

Thanks,

Kyle Wilson
Project Leader
Gaylord High School Website

[sbv]

hi opsryushi
Yes its a universal problem. I also faced the same.
I tell you what i did is...
I created a css compatible to IE and another one compatible to Safari and Mozhilla.
and in each page i checked the user browser and linked appropriate css.
This may not be the proper solution for this type of problem. But i need to solve that within time. Because i developed and tested my project in IE as you. But my User using Safari. So i did this ....
Is anybody having different solution for this?

[ndeniche]

actually, i'm going through the same issue...

sbv's solution is pretty attractive... though, you must write compatible html codes with every css, so they're compatible to each one of them...

besides, what if i'm using for example, Safari 2, and there's no css code for my browser? or if i'm using an uncommon browser like Opera?

[sbv]

Hi Nichito
you can get that all information like version,OS, browser.. and so on.. using

HTTP_USER_AGENT

And then check for compatibility releted to each browser and create css :D

[ndeniche]

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.

i wouldn't give that for granted, since mozilla is on the rise and it has more users day after day...

[MattEvans]

Yuk.. it's a real hack to serve diff pages to diff browsers, especially when using HTTP headers to determine the browser. How many browsers are you gonna target? What happens when the browser version changes? What happens if the browser identifies itself as a different browser? ( that's not farfetched )

Just go for a minimalist design that doesnt put too high a requirement on browser nuances, avoid floats and abs/rel positioning where possible, and you're laughing all the way to the server. Take a look at some 'popular' commercial or organization sites, most are very simple structurally; just neat, tidy and consistent looking. That's probably not what you want to hear, halfway through a project, but, certainly consider it in future.

Also, don't avoid using tables to prove a point - they tend to be identical across browsers - perhaps because they're so 'outdated' they've become well standardized.

[ndeniche]

i like your opinion about tables... actually i rather code my pages based in tables than messing around with positioning

[MidiMagic]

IE won the browser war solely because it cheats. It comes with Windows.

There is a trick to making stuff fit in a browser-independent way:

Don't put block-object size definitions in the same tag or style that contains surrounding styles (margin, border, padding).

Nest them instead, so you can control which is inside.

FF puts the surrounding styles outside a block-object's defined size. IE crams them inside.

[opsryushi]

IE won the browser war solely because it cheats. It comes with Windows.

I like that! Lol. Thanks for the comments, everyone. It looks like I don't have too much of an easy way out of this, so for the stint of this design, we'll just have to sort of live with it. At least until we get a lot of free time on our hands, hehe.

Thanks,

Kyle Wilson
Project Leader
www.gaylordhighschool.org