Internet Explorer (previous to v7, at least) does not follow the same standards as everyone else. The most noticeable effect this has in blogging with WordPress is that IE will add margins and padding together, which can really screw up your layout. The other effects are far too numerous to mention here (my little poke at M$).
I have yet to see a theme designed in IE (not that there aren't any, I just don't see them), so you can generally rest assured that the CSS works well with Firefox and other modern browsers. For this reason I recommend you get your site to look the way you want it to in Firefox first, then worry about IE later.
So, you have your blog looking the way you want. Now point Firefox to http://chrispederick.com/work/webdeveloper/ and get the Web Developer Extension and install. You should have another bar now that has a menu that looks like this:
If you haven't yet, it's time to validate your code (see WordPress Troubleshooting: I have to validate?? Oh MY!! ).
Now, make a copy of your themes css file (usually style.css) and rename it to iestyle.css (in this example). That file is where our IE specific css and tweaks will reside safely, not polluting any other browser except IE ;') If you know what changes you want to make for just IE, go ahead and enter them now (in iestyles.css).
Now we're going to use a conditional comment (as recommended by M$ to address these issues) so that whenever IE version 6 or less (and only IE version 6 or less) comes to our site, it will see our iestyles.css. We need to edit the theme's header.php file. Open it up and look for where our styles.css is called. In my theme it looks like this:
The conditional comment has to appear after the existing call to style.css! I decided to enter my conditional comment right after the call. Don’t forget, a stylesheet link needs to be in your head section, so make sure it is before your . Here’s what it looks like now:
What this is doing:
Posted in Computers, Things, WordPress
Hi!
Thank you for all the wordpress troubleshooting guides!
But, I tried this one (My blog looks horrible in IE), but it doesn’t work on my site. I guess it is just lack of knowledge from my side, but can you help me?
First I tried just to copy/paste (with changing the link to my iestyle), and then I tried to modify it to how it was in the current stylesheet (changed xhref to href, media=all to media=screen etc).
Link: kenta.no
As you can see, my css is not working properly in IE. IE sucks.
My article originally had some characters stripped from it (my fault, sorry)… Please check again for corrected comment characters.
And don’t forget to change margin/padding dimensions in the ‘iestyle.css’ (make it ‘smaller’ or remove)…
Hi Sam,
Thank you SO MUCH for this tute!!! I’ve been looking for an answer all week, you really simplified things without adding in all the CSS jargon.
Death to IE 🙂
My sentiments exactly!
I’m glad it helped ;’)
Thanks for the pingback Sam! I’m just glad that my tute is helping others with this problem – seems you and I are only part of a select few who’ve chosen to write up solutions 😉
Thank you for this post.
I am not too php savvy, and I had found a php browser sniffer so I could add on my extra css for Internet Explorer users, but installing this within wordpress is a nightmare at my skill level, especially since I am a day past my client deadline. Unfortunately, this code may work but I have no way of confirming this on a mac, and I sought to find an IE emulator plug-in for firefox so that I could use that sweet Firebug plug-in and check my regions, but nothing is up for the mac yet. (and no, I can’t afford a new intel mac or VirtualPC, time-wise even.)
It’s a lot to lament, but I will find a solution. standards-based design has to win.