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.
