Sunday, November 11, 2007

Hope For CSS Hell

Earlier tonight I was working a CSS based HTML layout. The layout was really trivial, something along the lines of:

Header
Body

I had various combinations of absolute and static positioning. Firefox had no problems rendering what I was looking for, however, IE was causing the body area to overlap the header. It was a mess.

I Googled for internet explorer absolute positioning margin-top and happened to stumble upon this very handy page. It outlines a variety of issues, workarounds and tests for CSS. Sure enough, I had run into the old IE/Win: Margin collapsing and hasLayout issue (I know, it's obvious, isn't it).

The solution turned out to be incredibly simple: re-order the HTML, so that the body div tags appeared before the header div tags. I would so never have figured that out without this push.

The smart thing to do would be to take some time and study up on the issues mentioned on that page rather than waiting for the next big gotcha.

No comments:

Post a Comment