Firefox, Internet Explorer, and CSS: Never the twain shall meet?

It's been a long while since I designed or created a web page with any complexity, so I've never had to face the browser incompatibility issues. I've always known and at times felt the pain that web designers feel when designing something to look good on both browsers, but the chasm seems to have grown a lot bigger and wider since I last faced such issues.

Playing with Blogger's CSS code over the past few weeks I've realized how difficult it really is. Web pages that look perfectly sane and even gorgeous in Firefox totally meltdown in IE! Images align wrong, inline images may display over text, floating sections disappear, column widths don't behave as they should... the list is endless.

If you're using IE to view this blog, you may have come across some of the above issues.

For instance, images placed before link that look perfectly normal in Firefox as seen below:

end up being overlapped with link text in IE, as shown below:

One would have hoped IE7 would fix all such issues. I am no CSS/XHTML expert, so I can't really comment on how compliant it is with standards, but the rendering could certainly use a lot more work, imo. If you search the web (check out positioneverything.net), you will come across plenty of information about issues/bugs with the way IE renders stuff, and some workarounds that involve detecting which browser is being used and using a different style sheet for some.

This is not to say Firefox is completely compliant and kosher in its behavior - it just comes across as more elegant than IE with fewer rendering flaws/bugs, imo. On the flip side, I have also seen Firefox totally mess up a page when the same page is rendered just as you'd expect in other browsers, including IE - even if the code doesn't have any IE-specific hacks.

As I attempt to switch to Wordpress over the next few weeks (yes, I finally got Wordpress up and running and it's been the guinea pig for my experiments with CSS :), I will try to ensure the new templates render without any major issues in IE. However, I will continue to use Firefox as the primary browser I test with.

I'm feeling the pain many web developers feel because of such inconsistencies between browsers, and this is just the tip of the iceberg. It would be nice to have both browsers render pages identically, but that seems like little more than wishful thinking at this point.

Having said this, let me add - I continue to use IE7, it's a pretty good upgrade to IE6 and almost essential if you use Outlook Web Access and some Microsoft web sites. (I continue to field arguments to the contrary, and suggestions to use the IE Tab plug-in for Firefox - which I do use, btw - that can render websites you choose with IE's rendering engine in a Firefox tab).