Tuesday Mar 6, 2007

CSS fix for bad layout alignment in Internet Explorer

Posted at 04:43:38 pm by hari under Tutorials and HOWTOs (186 views)

The new fixed width theme for this blog was giving me problems with Internet Explorer. I had remembered that IE 6 and previous versions were finicky about margins. Instead of computing the exact margin size from the edge of the previous <div> element, the margin is calculated from the body's edge. This led to a weird problem where the width of the entire layout was shifted a lot more to the right than I intended.

I had used margin-left: 60px; in the CSS of the main layout <div> tags: the header, the content and the footer ids. And also used margin-left to create spaces to the left of the inside content element and the sidebar.

Here's how I fixed the bug to make it pixel correct in Internet Explorer.

Removed the margin-left for each of the main CSS elements (the header, the content and the footer) and instead gave the <body> element a margin-left attribute with the same width to get the same result. The content block is shifted to the right by 60 pixels and doesn't stick to the left edge of the browser.
Replaced the inner margin attributes (for the inside content block as well as for the sidebar block) with the padding attribute to get the same gap.

That's it. The theme is now compatible with IE as well. I suspect that IE 6 and below have problems with the margin CSS attribute and so it makes some bizzare layout decisions when rendering the <div> blocks.

Here are the explanatory screen shots:

Before the fix:
IE 6 Wrong Layout

After the fix:

The above fix should be applicable for CSS layout problems of this nature with IE while ensuring that other browsers also render correctly. There are other CSS rendering issues with Internet Explorer, but that's another story altogether

10 comments

Comment from: Dominic [Visitor] · http://geekblog.oneandoneis2.org/

Yup, that got it! :smile:

Tuesday Mar 6, 2007 @ 19:18

Comment from: hari [Member] · http://literaryforums.org

I knew I had come across this one before. That's why I now decided to document it. For my benefit and for other people as well.

Ain't I generous? :razz:

Tuesday Mar 6, 2007 @ 19:20

Comment from: Sudipta Chatterjee [Visitor] · http://sudiptachatterjee.blogspot.com

Yes, that was one good deed. Even I was planning to start a blog to document the little tips and tricks I discover from time to time.

Wednesday Mar 7, 2007 @ 09:02

Comment from: hari [Member] · http://literaryforums.org

Sudipta, I'd be interested in your technical writings. Do review blogs too when you get the chance. That would be something of interest.

Wednesday Mar 7, 2007 @ 09:17

Comment from: J_K9 [Visitor] · http://linux.wolphination.com

I love the new design - it's very nice.

Great job on the fix, by the way. I too am going to have to set up an IE hack this weekend so that the transparent PNG on MiraGroupware.org will display properly on IE6 :roll:

Thursday Mar 8, 2007 @ 13:22

Comment from: hari [Member] · http://literaryforums.org

Thanks, Max. I've been playing around with some CSS techniques. I've done a redesign on my Hari's Reviews site as well. But it's not yet online as yet.

Thursday Mar 8, 2007 @ 14:22

Comment from: J_K9 [Visitor] · http://linux.wolphination.com

CSS is great fun when you get into it, but it can also be a bit of a pain at times.

I'm looking forward to seeing the redesigned version of Hari's Reviews