WordPress, CSS, IE and headers

So given I’ve spent far too long today trying to solve a problem that shouldn’t have to be fixed, I figure I should at least share the solution I found.

The problem
Internet Explorer was formatting content on my WordPress installation crappily (I’m sure this is the technical term). My header (the navigation bar) was sitting underneath the blog posts and the side bar was sitting on top of the header.

Lessons from the problem
This is clearly a CSS problem, not just because of the way information is displayed, but because of the order of the components as layers on screen – header underneath post underneath sidebar.

Research based solution
A cursory google search on this issue turns up hundreds of options including adding lines to your standard CSS document with the [if IE] conditional statement, for example:

.content {float: left }
[if IE].content [margin-top: 20 px; }

… but before you try it, this doesn’t work in WordPress CSS. Trust me on this. It probably should, but it doesn’t.

Another option is to create a CSS hack – literally a second CSS file that is used to overcome the weaknesses of IE. Then on your header.php page in your WordPress editor, where the normal line is calling up the standard CSS file, you add a conditional statement for IE browsers, calling up the hacked CSS.

Sounds simple enough huh?

You have your normal link to your CSS – usally defined as:

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css"
media="screen" />

… and then you add in an ‘IF’ statement for internet explorer browsers:

<!--[if IE]-->
<link href="css/IE.css" rel="stylesheet" type="text/css" />
<!--[endif]-->

… Only, this is the irritating bit: this doesn’t work either. Well it does in part, but it impacts on everything else. What tends to happen is that all your browsers will now pick up the hack you designed only for internet explorer. Microsoft has its own advice about conditional IF statements and IE, and it is essentially this solution.  But it doesn’t work.

Actual solution
Ignore what Microsoft says. It’s less than useless. WordPress tends to use properly validated code so it doesn’t like Microsoft’s syntax. You actually need this syntax:

<!--[if IE]>
  <style type="text/css">
    @import url(IE.css);
  </style>
<![endif]-->

A couple of pointers:
– You only need to add special instructions to the div elements that need fixing for IE, so if, for example, you wanted to drop down your content and sidebars to accommodate your header or special navigation, then just add a margin to the top of the div. Eg:-

.content { margin-top: 50px; }
.sidebar { margin-top: 50px; }

That’s your entire IE stylesheet.

– You ABSOLUTELY MUST put the IE stylesheet in the same directory as the theme stylesheet. Don’t use the full URL, or any directory specific URL. Just FTP your IE stylesheet into the same directory with an obvious filename (like IE.css) and then add the above ‘IF’ statement to your header, underneath the normal statement.

That’s it: problem solved.
Of course if you change your theme, you’re going to need to ensure you add the IE.css to the new theme directory, but otherwise it’s pretty straight forward and should work for all browsers.

Hope this is useful. I figure if I’ve been frustrated by this I’m probably not alone. And it sure doesn’t help that Microsoft’s own advice is misleading.

Be Sociable, Share!
This entry was posted in tech problems. Bookmark the permalink.