CSS IE7 compatibility and Wordpress updates
I have been intending to go in and fix Above the Fold for months. Months and months and months. Why?
When Internet Explorer 7 was released they fixed a number of the escapes that had been used to target IE with fixes where the CSS doesn’t render correctly. Sadly they didn’t fix the CSS rendering. The layout on this site uses some clever CSS to create the three-column layout without needing to resort to tables yet maintaining the liquid layout so that it scales to any screen size.
I did some research when IE7 was first released and found some references to fixes. They involve stripping the overrides out of the main CSS file, putting the overrides into a new file and then using conditional comments to link to that new file. e.g.
<!--[if IE]>
<link rel=”stylesheet” type=”text/css” href=”ie_overrides.css” />
<![endif]–>
The bit that I was scared about was working out exactly where those overrides were in the default layout file. There always seemed to be something else that needed to be done more urgently so it got left.
And left.
Today I dusted off that default CSS file, went through it with a fine tooth comb and discovered that the six lines of code that I needed to move (much less than I’d imagined) had all been grouped together and commented as IE hacks. It took me less than thirty minutes to sort it out - if only I’d know that months ago!
The slightly more complicated part was repeating that process for the WordPress files. In the default stylesheet for WP I’d helpfully put all the IE hacks at the end so they could easily be found. The more difficult bit was working out what link to use for the IE override stylesheet. A bit of Google-fu solved the problem and I added this to my header file:
<!--[if IE]>
<link rel=”stylesheet” type=”text/css” href=”/ie_overrides.css” />
<![endif]–>
I’m quick surprised by how much easier it was to sort out than expected. In fact, the most complicated part of today’s operation was upgrading the WordPress installation! That really isn’t my favourite job but it does have to be done for the security updates if nothing else.
Pingback by Above the Fold The Blog CSS IE7 compatibility and Wordpress updates | Patio Chairs
June 2, 2009 @ 10:32 pm
[...] Above the Fold The Blog CSS IE7 compatibility and Wordpress updates Posted by root 15 minutes ago (http://www.abovethefold.co.uk) Sep 23 2008 the layout on this site uses some clever css to create the three column layout without needing to resort to tables yet maintaining the liquid layout so that it scales to any screen size leave a comment name required search xhtml 1 0 middot css Discuss | Bury | News | Above the Fold The Blog CSS IE7 compatibility and Wordpress updates [...]