So I had my Wordpress theme worked out using the “3 Column Fluid Layout” that I mentioned in an earlier article, and I tested it with Safari, Firefox, Opera and Internet Explorer 6 and it looked the way it should. I skimped on testing it with Internet Explorer 7 because I didn’t have space on my MacBook Pro for another Parallels disk image for IE 7. So, of course, it worked poorly with IE 7.

What was I thinking? What, IE 7 might have a bug?

It does indeed have at least one.

It turns out that the “margin: -100%” bit of CSS doesn’t work. I can’t say what value IE7 comes up with when you use “margin: -100%” but it’s clearly not the right one.

Fortunately there’s a fix. It’s a little weird but it works and it doesn’t break the other browsers.

My CSS for the left column had read like this:

#leftside {
  width: 180px;
  right: 180px;
  margin-left: -100%;
}

As a reminder, the leftside div is contained in the container div, which also contains the content and rightside divs.

The fix is to add the following CSS:

#container > #leftside {
  left: -180px;
  margin-left: expression(document.all.content.offsetWidth * -1);
}

This tells the browser that any leftside div container in container should have its left side at -180 pixels, and should use the negative offsetWidth of the content div for its left margin width.

This is made possible by the fact that IE7 allows you to embed Javascript in CSS files.

If you’re using the 3 column liquid layout and you’ve used different div IDs then you’ll need change content to whatever you called your center div.

This fix is documented here

[tags]css, 3 columns, liquid layout, internet explorer, internet explorer 7, margin[/tags]

|  Print This Post