Ekto gammit

WordPress Troubleshooting: My blog looks horrible in IE!

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:

Tagged with: , , , ,
Posted in Computers, Things, WordPress
6 comments on “WordPress Troubleshooting: My blog looks horrible in IE!
  1. Kent says:

    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.

  2. Sam says:

    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)…

  3. Yvonne says:

    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 :)

  4. Sam says:

    My sentiments exactly!

    I’m glad it helped ;’)

  5. Yvonne says:

    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 ;)

  6. Kevin Johnson says:

    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.

6 Pings/Trackbacks for "WordPress Troubleshooting: My blog looks horrible in IE!"
  1. Because I Write » Blog Archive » links for 2006-06-29 says:

    [...] Sam Devol :: WordPress Troubleshooting: My blog looks horrible in IE! (tags: wordpress tutorial) No Tags [...]

  2. nektros says:

    A 7 step guide to fixing your WordPress sidebar in Internet (bloody) Explorer…

    As those of you who read my last WordPress rant know, nektros used to display in Internet Explorer with its two sidebars waving gleefully all the way from the bottom of the page. Take a quick look through the WordPress support forums, and those of you …

  3. [...] Sam Devol :: WordPress Troubleshooting: My blog looks horrible in IE! (tags: wordpress tutorial) No Tags [...]

  4. [...] After installing WordPress and installing the Barthelme theme I thought everything was OK.After some extensive searching on the internet I finally found Sam Devol’s blog where he explains how to fix the nasty look of the blog in Internet Explorer. Being used to FireFox at first I did not notice that in Internet Explorer my sidebar was at the bottom of my page. But this fix works perfectly! [...]

  5. [...] I found two posts from last year that have addressed the problem (both were focussed on IE6, but the problem remains): Sam Devol’s “WordPress Troubleshooting: My blog looks horrible in IE!” and Nektros’ “7 step guide to fixing your WordPress sidebar in Internet (bloody) Explorer”. [...]

  6. [...] Sam Devol WordPress Troubleshooting: My blog looks horrible in IE! [...]

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>