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!
Great new look, Chris. Excellent job. Clean, professional, etc…
Thanks Troy! And coming from the Theme Change Master, that’s saying something!
The theme looks great! I have been guilty of the same thing, but releasing free themes for WordPress has cured me of it I think. The differences between FF and IE are enough to drive a person INSANE! Thanks for the link to an explanation, since I usually just mess around with it until it looks right in both, rather than really trying to understand the problem.
Randa, I’m a big fan of the “mess with it” approach. That seems to be the best way I learn.
Hi Chris!
Wow, what an impact this design has, I love it!
As for testing in various browsers, you’re lucky most blog reader use Firefox
– but you’re absolutely right (specially with static websites IE can show items differently than Firefox or Netscape. And vice-versa, know a website by an Interior designer that works absolutely fine in IE, but is ‘unclickable’ in Firefox.
(I normally check in all three main browsers how my sites – static an blogs – look, than find out which browser my visitors of the various sites use most and make sure it looks ‘best’ in that one – but of course still workable and clickable in the others)
Karin H. (Keep It Simple Sweetheart, specially in business)
Karin,
I am a bit surprised at the large percentage of FF users that come here. I suspect the blog world is a bit skewed in the FF direction compared to the rest of the online world.
It makes sense with all the simple customization that FF enables. Even so we have to be careful to avoid thinking our site users are just like ourselves.
I feel your pain, bro. Really. It looks great. My FF users are pushing 45% of my traffic right now.
I’m an IE user at work and a FF user at home. That makes for some nasty surprises when I get home sometimes.
Looks great!! Nothing like a bonus Saturday afternoon to get it all done.
Jesse! Thanks so much. Interesting how many bloggers are seeing so much FireFox traffic.
Thanks, Char. You got that right. I sometimes wonder if there’s any better gift than a little extra time.