Hari's CornerHumour, 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
Tutorials and HOWTOs by
Posted on Tue, Mar 6, 2007 at 16:43 IST (last updated: Wed, Oct 29, 2008 @ 21:58 IST)
<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-leftfor each of the main CSS elements (the header, the content and the footer) and instead gave the
margin-leftattribute 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
marginattributes (for the inside content block as well as for the sidebar block) with the
paddingattribute to get the same gap.
marginCSS attribute and so it makes some bizzare layout decisions when rendering the
<div>blocks. Here are the explanatory screen shots: Before 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