views:

20

answers:

1

I found this very interesting:

http://matthewjamestaylor.com/blog/ultimate-3-column-holy-grail-pixels.htm

He avoid using horizontal margin and paddings to avoid problems with IE. I think he "fakes" padding using relative positioning.

Have you ever done something like this? I'm a missing a common trend against IE hacks? Does this practice have any drawbacks?

+1  A: 

That example is outdated.

Problems with margins and paddings like that were a problem with the broken box model of IE5. In later versions of IE you will only get that broken box model if IE is in quirks mode. That's something you should be avoiding at all cost. Use the right doctype!

The example you linked actually relies on that broken box model. He has an updated version that doesn't: http://matthewjamestaylor.com/blog/holy-grail-no-quirks-mode.htm

But what kind of IE problems are you actually trying to address? Do you specifically want a 3-column layout like in the page you linked to? Do you want general solutions for IE layout problems? Or do you want to be able to forget about IE altogether?

The most important thing to know about when dealing with layout and IE6/7 is its hasLayout property. Read On having layout for all the details on that.

If you are specifically looking for tools that can help you build complex layouts compatible with all browsers, you could have a look at grid frameworks like YUI Grids or Blueprint. But I can't say I'm a fan of those, since they tend to result in unsemantic div soup.

If you don't mind a little (experimental) JavaScript to fix up your entire website automagically, you could give IE7.js a try. I've used this, though it definitely has its quirks and limitations, so use at your own risk.

To come back to your original question, though, relative positioning is no ultimate solution for anything, it's just one of the tools in the box. Understand it and use it when it's appropriate. See, for example, Sitepoint's CSS layout and formatting reference. And as dry as it may be, I find the CSS specification to be invaluable, especially the chapters on the visual formatting model details.

mercator