Hari's Corner

Humour, comics, tech, law, software, reviews, essays, articles and HOWTOs intermingled with random philosophy now and then

CSS fix for bad layout alignment in Internet Explorer

Filed under: Tutorials and HOWTOs by Hari
Posted on Tue, Mar 6, 2007 at 16:43 IST (last updated: Wed, Oct 29, 2008 @ 21:58 IST)

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.
  1. 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.
  2. 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:
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 :P

10 comment(s)

  1. Yup, that got it! :smile:

    Comment by Dominic (visitor) on Tue, Mar 6, 2007 @ 19:18 IST #
  2. 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:

    Comment by hari (blog owner) on Tue, Mar 6, 2007 @ 19:20 IST #
  3. 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.

    Comment by Sudipta Chatterjee (visitor) on Wed, Mar 7, 2007 @ 09:02 IST #
  4. Sudipta, I'd be interested in your technical writings. Do review blogs too when you get the chance. That would be something of interest.

    Comment by hari (blog owner) on Wed, Mar 7, 2007 @ 09:17 IST #
  5. 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: :P

    Comment by J_K9 (visitor) on Thu, Mar 8, 2007 @ 13:22 IST #
  6. 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.

    Comment by hari (blog owner) on Thu, Mar 8, 2007 @ 14:22 IST #
  7. 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 :)

    Comment by J_K9 (visitor) on Thu, Mar 8, 2007 @ 18:58 IST #
  8. It's been done. Take a look and tell me what you think. More fun with CSS. :mrgreen: If you cannot see the new style, just refresh your browser.

    Comment by hari (blog owner) on Thu, Mar 8, 2007 @ 20:51 IST #
  9. It matches :P It's looking great. Good job!

    Comment by J_K9 (visitor) on Sun, Mar 11, 2007 @ 19:14 IST #
  10. Thanks Max. :mrgreen:

    Comment by hari (blog owner) on Sun, Mar 11, 2007 @ 20:37 IST #

Comments closed

The blog owner has closed further commenting on this entry.