Struggling With Browser Compatibility

I spent entirely too much time fiddling with my Moveable Type templates, getting the code *just* right. I hope you like the changes. The best thing about the new look, even though it doesn't look any different, is that I achieved this look without using cumbersome HTML tables. DIV tags are now the order of the day.

Unfortunately, I'm quickly discovering that "just right" varies depending upon the browser you use. Some differences can be really nitpicky.

Take this page: I want the body of the page to display within a blocked off width of 800 pixels. So I set up a box within a DIV tag and tell it: "width: 800px". Sounds fine, right? Well, within that box, I want two boxes: the text of the page, and a bunch of navigation boxes. I want there to be a five pixel gap between the navigation boxes and the main text box. The navigation boxes are to be 200 pixels wide. So: 800-200-5 = 595 pixels, right?

Ah, but don't forget, we want borders around our boxes: a fine 1 pixel line in black.

Internet Explorer and Opera 7 both plant the 1 pixel border at the very edge of the boxes. I specified that the boxes were 595 pixels wide and 200 pixels wide respectively. With a 5 pixel gap, I'm fine, right?

But along comes Phoenix (and, possibly, Mozilla), which plants those borders on the OUTSIDE of those neat little boxes I set up. So, instead of 595 + 5 + 200 = 800, I end up with 595 + 1 + 1 + 5 + 200 + 1 + 1 = 804. Not much of a difference, but enough to show me that the boxes are not lining up -- a frustration that's tailor made for sending me around the bend!

Phoenix also does something odd with margins and padding, adding them to the width of the boxes rather than incorporating them into the boxes themselves. Now, if you use margins and padding, what looks fine in Opera 7 looks very odd in Phoenix.

And then there is the MacIntosh version of Internet Explorer, which has some real difficulty putting this page together.

Why can't different browsers agree on these very basic standards?

Whatever the case, I need to take a break. This page should look fine on visitors using Opera and the latest version of Internet Explorer, assuming they're arriving on a PC. MacIntosh users, I'll see what I can do for you later. And Phoenix users, any suggestions you have on how I can fix the page and still keep it viewable by other standards is greatly appreciated.

How does the page look to you? Any suggestions on how I can improve it?

blog comments powered by Disqus