It’s been a long weekend, thanks in part to a silly mistake.

I had the luxury of an entire day on Saturday to work on the computer. It is rare these days that I have such a big block of time available. I had been scheduled to work on Saturday as second on call, which lately means lots of ship jobs. But the ships all moved away from the weekend (for once).

Since I had the unexpected time windfall, I decided to get something off my list that has been there for some time now. I went ahead and put together a new theme here at SuccessCREEations so that I could update to WordPress 2.2.

I was working on another domain I have to test it all out and hopefully get the bugs out. Got it the way I wanted, then brought it over here.

A couple of tweaks, mess with some plugins, and I was up and running.

Went to be Saturday night feeling good.

Woke up Sunday and a friend of mine let me know that my new theme was “not well in IE”. Doh!

I got so wrapped up in getting it done that I forgot to test it. Sheesh!

Since 39% of y’all out there come to S-C on IE, I needed to get that fixed. Pronto.

Turns out I had two problems.

Internet Explorer is Different

I’ve been using FireFox for a long time now and I’m a big fan. The ease of cusomization, the way it works with tabs, the way most sites just work in FF all make it my browser of choice.

But there are still a bunch of folks using IE for a variety of reasons.

Turns out IE interprets widths differently than most of the other browsers. When you define the size of an element in CSS, most browsers add the margins, borders, and padding outside that defined space. IE thinks that should be the maximum width of the whole schmear and puts the other elements inside that width.

Which means if you start messing with the width of your theme like I did because you want to stretch it to 1028px wide, you’ve got to be careful how you adjust your IE hacks or you will get a big mess. Like I did.

The two best explanations I found on the subject were here at Listamatic: The IE box model and Doctype modes (which has that great visual which was a tremendous help to get my mind around my problem) and over here at Box Model Hack.

Sidebar issues

The other problem I ran into was with on of my plugins breaking my sidebar in IE. Wouldn’t you know it was the plugin that I use to show links from only a specific category in my sidebar.

I still haven’t come up with a fix for that one short of pulling the widgets off my sidebars for now. I’ll mess with it when I get a chance.

In the mean time I’ll just do without them. For now.

But when you put the two of those things together, I had a big mess. Because one problem was masking the other.

Keep in mind that throughout my little IE adventure, everything looked fine in FireFox. Go figure.

The Moral of the Story

I re-learned a basic lesson of design 101 – Test your designs in other browsers!

Keep that lesson in mind when you start improving your themes too. Otherwise you might make a big old mess!

(And if you stopped by over the weekend with your IE browser and found my big old mess, please accept my apologies. It looks better now, I promise.)

Enjoy!