fixing IE7 layout problems
(
October 30, 2006 at 11:03 am)
· Filed under browsers
, css , debugging , msie6 , msie7 , wordpress
As I noted earlier, while IE6 displayed this site (in Nearly-Sprung) correctly, IE7 did not.
The reason is this: the bug in IE6 and previous that allowed the following CSS hack to work
* html .anelement { layout fixes }
has been fixed in IE7. However, many of the layout issues that were fixed in the escaped code have NOT been fixed. In my case the particular culprits were these:
/* Essential Layout (IE Fix) */
* html #leftsidebar {
left: 150px; /* RC fullwidth */
}
/* Hides from IE5-mac \*/
* html li {height: 1%;}
/* End hide from IE5-mac */
/* Hides from IE5-mac \*/
* html #postnavigation {width: 145px; height: 2px;}
/* End hide from IE5-mac */
IE7, like IE6, needs the left: setting, but as it no longer works with the * html escape (for an explanation of why this is, see the excellent article here) it is not getting these settings as it should. The result on my site was the left sidebar’s utter disappearance.
The workaround is to isolate the IE hacks into a separate .css file and call it with an escape that all IE derivatives still honor. (Wonder how long this escape will last…) While tedious, this is overall a better solution than embedding hacks within a css file. Such hacks can be relegated to a separate file which can later be removed when IE is finally fixed (these glasses seem awfully pink, don’t they?).
So, in general this is the way to fix such problems. I checked my css files for any instances of
* html
Some of these might be in a “holly hack,” which should be moved along with the rest of the markup.
I created a new css file, iehacks.css is fine, and dumped all the hacks into this file. Now, I removed all instances of * html (this is the crucial part, otherwise no improvement is seen for IE7). In my case, this new file wound up containing the following:
#leftsidebar {
left: 150px; /* RC fullwidth */
}
/* holly hacks to fix peekabo bugs in IE */
/* Hides from IE5-mac \*/
li {
height: 1%;
}
/* End hide from IE5-mac */
/* Hides from IE5-mac \*/
#postnavigation {
width: 145px; height: 2px;
}
/* End hide from IE5-mac */
(Note the holly hacks in the last two rules.) Now, I needed to modify my <head> element to include this css file, which was easily done via adding
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="iehacks.css" />
<![endif]-->
In WordPress, this meant modifying my header.php file (of course I made a backup copy of it first) as follows:
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_directory'); ?>/iehacks.css" />
<![endif]-->
I added this just before the call to wp_head. This would make a VERY simple plugin; I could create one if people wish. But this is pretty straightforward as is.
Update
Probably the best way to do this, allowing for testing in IE7 before proceeding completely, is to copy the suspect elements over to the new css file. Since IE7 doesn’t work with the current css file anyway, it doesn’t hurt to leave the elements in place while getting the iehacks file to work. Add the [if IE] call to the headers and check in IE6, IE7. Once everything looks okay, then remove the suspect elements from the original css file, one by one.
Joe St John said,
November 10, 2006 @ 2:20 pm
Thanks, Cindy–that worked like a charm!
Undead Flowers » Bugs said,
November 12, 2006 @ 9:09 pm
[…] I’ve been made aware that there’s a problem with displaying my blog in the brand spanking new Internet Explorer 7. My good friend Cindy over at digitalramble.com has fortunately worked out a solution. […]
Paula G said,
February 24, 2007 @ 6:18 pm
Thanks for doing this. It worked wonders…. I was scratching my head for a while and you saved me hours
Robert John Kaper said,
April 3, 2007 @ 7:34 am
MSIE6 market share amongst IE users has dropped from 99% to 60% in just a few months, for a total share of around 50% these days. Hopefully it won’t take long until it joins MSIE5.5 and the dodo and can be ignored alltogether. There’s such a huge difference between MSIE6 and MSIE7 when it comes to rendering standards-compliant HTML/CSS that in the future MSIE7 could very well be considered to have been the final step towards the milestone that deprecated older browsers. Upgrading was a lot harder in the days of NN4, so hopefully MSIE6 won’t be around much longer and we can all rejoice. (Until some of the fancy stuff in CSS3 becomes popular, obviously.)
Cindy said,
April 3, 2007 @ 9:02 am
Yes, especially since MS rolled out IE7 for XP, I think it will drop down to nearly nothing. Unfortunately while IE7 is a marginal improvement over IE6, it still has many of the issues that IE6 does, including this one…