Internet Explorer Vexes Me

So yesterday Debbi brought home her Windows laptop from work to show me what Fascination Place looks like in Internet Explorer.

And, uh, it’s not exactly what I’d intended.

The core problem is with the three-column layout: It’s supposed to have three neat columns below the header and above the footer with a fixed-width sidebar running down each side, and a fluid-width column (i.e., column that grows if you make the window wider) in the middle. What appears in IE is that once the central column’s content is long enough to run below a sidebar, it flows around the bottom of the sidebar to take up (nearly) the entire width of the window.

For those familiar with CSS, each column is its own div element. The left and right sidebars are set with float: left or right (respectively) and with fixed pixel widths, and the middle column does not float but is set with width: auto. I’ve tested this with several browsers on Mac OS X, and it works fine in all of them. But it looks poor on IE on Windows, and unspeakably awful in the ancient IE 5.2 which was (I think) the last version available for Mac OS X (and which has many known bugs).

There are a few lesser issues, such as the words “Fascination Place” in the banner not appearing in the large characters I intend, and the text scrolling off the right side of the page. Those aren’t as annoying as the essential column problem, though.

I’ve been doing a little research, and it appears that IE has a number of bugs and quirks in it where CSS is concerned, for instance these bugs, and these bugs, and this box model problem. Debbi’s machine is running IE 6 on Windows 2000 v5.0, and apparently many of these issues have been fixed in IE 7. (Whether it fixes my problems, I don’t know.)

Fascination Place is my first foray into using relatively modern (i.e., this millennium) Web technologies. I’m well aware that the nature of the Web is that not everything works well for all people, and that there are people out there still using Mac OS 9 and Windows 98 (some people can’t upgrade), so not everything will render well for those people. But I’m not sure how much effort I want to put into making FP look good for people using old technology, not because I don’t want them to read my site but because I have finite time, and I don’t have access to most non-Mac or older browsers.

(For the record, I’ve tested with Safari, FireFox, and Camino. I should probably also try Opera and OmniWeb.)

I’d appreciate some input from my readers, especially ones living in a Windows world or on older software:

• Does FP look like what you expect it to look like, based on what I described above?
• If it doesn’t, is it at least readable and usable?
• If you’re familiar with CSS (and/or willing to look at my stylesheet), do you have any tips for improving the experience for other readers?
• Do I suck at writing CSS, or what? 🙂

I would like to make (as they say) a good-faith effort to whip things into shape. And of course improve my understanding and use of CSS generally. But those of you for whom the page looks really whacked may need to bear with me for a bit.

Sorry about that.