eSpace Blog RSS
06Jan

How to Avoid the IE Box Model bug

3

One of the common bugs of IE is the box model bug which affects the box model of any HTML block-level element when the page is in quirks mode. In brief, IE includes the padding when calculating the width of the block. Personally, I found this very logical and I don't like to consider it a bug, but since it violates the W3C standards, it is a bug.

One simple approach to avoid this bug is to avoid specifying both width and padding or border for an element. How?

Say you have a sidebar block for which you need to specify a width, a border and a padding.

<style type="text/css">
             #sidebar {
 background-color: #CCCCCC;
 padding: 5px;
 width: 183px;
 border: 1px solid #000000;
 }
 </style>
 <div id="sidebar">Content for sidebar goes here.</div>

Here is the result in Firefox and IE:

To avoid the bug, you can simply add a child block to the sidebar. Then, specify the width for the sidebar and specify the border and padding for the child block.

<style type="text/css">
             #sidebar {
 background-color: #CCCCCC;
 width: 183px;
 }
 #sidebar_content {
 padding: 5px;
 border: 1px solid #000000;
 }
 </style>

<div id="sidebar">
   <div id="sidebar_content">Content for sidebar goes here.</div>
   </div>

Now, you get the same results for both Firefox and IE with exactly the same width you specified in your CSS code.

Written by:

Hatem Mahmoud (www.expressionlab.com)

Comments

1 ibrahim Ahmed wrote: on Wednesday, January 07, 2009:

Thank you for the trick. I can positively claim that resolving CSS compatibility issues, and the annoying ie idiosyncrasies (Bugs) are eating more time of my projects than it should. Rails Plugins like css_dryer and working in strict/transitional doctypes made our life a little bit easier, but do you use any other framework, plugins, to tackle css development problem, like blueprint for example. btw, keep up the good work :)

2 Hatem wrote: on Tuesday, January 27, 2009:

Thanks, Ibrahim. Actually, I don't like CSS frameworks alot. Instead, I prefer you design your own framework. I have posted some guidelines here <a title="Cascading Style Sheets - Part 02: CSS Guidelines" href="/2009/1/27/cascading-style-sheets-part-02-css-guidelines">Cascading Style Sheets - Part 02: CSS Guidelines</a>

3 Hatem wrote: on Thursday, January 29, 2009:

Here is the link: http://www.expressionlab.com/2009/1/27/cascading-style-sheets-part-02-css-guidelines

Post a Comment

eSpace podcast Prodcast

RSS iTunes

Archive

Latest Comments