RSS2.0 Feed button

"The nice thing about egotists is that they don't talk about other people."
Lucille S. Harper

Sam Devol

Running with Scissors

Reading This

WordPress Troubleshooting: My blog looks horrible in IE!

Posted on June 23rd, 2006
Published in Computers, Things, WordPress

IE_noobie.png

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:

WebDev Menu

If you haven't yet, it's time to validate your code (see WordPress Troubleshooting: I have to validate?? Oh MY!! ).

“Now we're going to use a conditional comment (as recommended by M$ to address these issues)… “

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:

About The Site

myimg

Observations of a Troubleshooting Monkey and

ex IT Director

ex Digital Video Director

ex Missile Mechanic

ex Motorcycle Mechanic

Work Background Contact me

This blog contributes to the web with Nofollow Reciprocity.