My IE testing setup in a nutshell (for WordPress)

Here is my setup for handling irregularities in IE, when developing WordPress themes.

[sourcecode language=”html”]
<link rel="stylesheet" href="<?php bloginfo(‘stylesheet_url’); ?>" type="text/css" />
<!–[if IE]>
<link rel="stylesheet" href="<?php bloginfo(‘stylesheet_directory’); ?>/css/") />

<!–[if lte IE 6]>
<link rel="stylesheet" href="<?php bloginfo(‘stylesheet_directory’); ?>/css/ie6.css" type="text/css" media="screen">

<!–[if IE 7]>
<link rel="stylesheet" href="<?php bloginfo(‘stylesheet_directory’); ?>/css/ie7.css" type="text/css" media="screen">

<!–[if gte IE 8]>
<link rel="stylesheet" href="<?php bloginfo(‘stylesheet_directory’); ?>/css/ie8.css" type="text/css" media="screen">

I just included the first line (the standard style.css call) to indicate that you should include this other stuff after that, because it’s going to override it in particular cases. That is the key.

The second line is just if you’re using the Tripoli reset framework.
My thinking with the rest is:

  • ie6.css will only apply if you’re using IE6 or below. This isolates off IE6, which tends to have its own weird behavior, and I prefer to have it off on its own “island”.
  • ie7.css will only apply if you’re using IE7. This allows me to pinpont any behavior in IE7, handle it, and have done with it. Although some of this might cascade upward to behavior in IE8, so I might have to copy and paste some code from here into IE8, I’d rather isolate IE7 as well, so I know that fixes I make there, only show up there.
  • ie8.css will apply for IE8 or above. When IE9 comes out (and IE10, etc.), this does mean that these rules will affect them too. The alternative would be for it to only work for IE8, but then if there were any inconsistencies in IE9 that were still there from IE8, the sites would all of a sudden not have the benefit of this code.

My process is:

  1. Test in IE6, using Parrallels on a Mac, and an install of Windows XP that came with IE6. Command-Tab between this and TextMate to make fixes.
    • When I see a discrepancy, I isolate the appropriate div, class, id, etc.
    • Then, I find that selector in the main style.css.
    • Copy that selector from style.css, all instructions included.
    • Paste it into ie6.css. This way, I have a visual of exactly what the default instructions are for this selector.
    • Now, remove the instructions I don’t need, and change the ones I do. For example, let’s say there’s a problem with too much margin on the right-hand side, and the instruction is “margin-right: 12px;”. So, I’ll try changing that to “margin-right: 6px;”. Then, Command-Tab back to Parallels, hit Refresh, and see if that works. And so on.
    • The great thing about this process is that once it looks good here, I can be pretty confident that it really and truly will work, because the changes are isolated to only show up in IE6.
  2. Test in IE7, and make changes in ie7.css, using the process above.
  3. Test in IE8, and make changes in ie8.css, using the process above.

Actually, I will also use, to get an initial read on the compatibility issues, because it is so fast. (Not to mention, I want to do at least one “test in all browsers” type scan, just for fun, although I have almost never found a non-IE-based issue.)

I am sure I could do a video of this, and that would be more instructive.

Posted in