Brendan Tompkins [MVP]

Blog First. Ask Questions Later.

Weird IE Rendering Bug

UPDATE: This is a very known issue (just not to me) and is called the The Box Model Problem.

I think my office mate, Brandon Boyd, found an IE table rendering bug. Don’t know if this is a known issue or not, but this is interesting. Take this HTML Snippet, for example:

<html>
<body>
<table>
   <tr>
<td>
  <div style="padding: 20px; width: 430px; background-color: green;">
   <div style="border: black 1px solid; padding: 20px; background-color: purple;">
    <table cellspacing="0" width="100%">
     <tr><th>Column1</th><th>Column2</th><th>Column3</th></tr>
     <tr><td>1</td><td>2</td><td>3</td></tr>
     <tr><td>1</td><td>2</td><td>3</td></tr>
     <tr><td>1</td><td>2</td><td>3</td></tr>
    </table>
   </div>
  </div>
</td>
   </tr>
</table>
</body>
</html>

In IE, this renders like so:

But in FF, it renders nicely:

See how it cuts off the left-hand side of the table! This looks to me to be a pretty blatant bug, not just a wierdy “my browser versus yours” rendering issue. You can view the page here, just to check for yourself.

Anyone seen this before?

-Brendan

Listening to: Jens Lekman : When I Said I Wanted To Be Your Dog

Published Feb 28 2005, 05:17 PM by Brendan Tompkins

Comments

Brian Richards said:

The dreaded IE box model quirk rears it's head again. IE treats an absolute width as the outer dimension, while the standard (and most other browsers) treats it as the content dimension then adding the padding and border widths. This problem looks to be an issue with the use of fixed width and padding sizes on the divs combined with the percentage width on the table. The table doesn't want to push out the div. One fix is to set the doctype of the page to contain strict instead of trasitional (ie. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">). This forces IE out of quirks mode and will make the page appear the same in IE6 and FF, but it only works on IE6. Beyond that, the next best thing would probably be to not use a 100% width on the table and fix the width to be the right fixed size for the div. There can still be overal size issues though.

# February 28, 2005 5:17 PM

Chris Wallace said:

IE box-model issue?

# February 28, 2005 5:19 PM

Don Demsak said:

I agree with Brian, and I always use what is refered to as the Doctype Switch: http://msdn.microsoft.com/library/en-us/dnie60/html/cssenhancements.asp?frame=true#cssenhancements_topic2 to switch IE into standards compliant mode. But, yes, it is only for IE 6, but it does make it render the same as FF.

# February 28, 2005 5:43 PM

Brendan Tompkins said:

Thanks everyone! This is actually going to be a big help to us here in our development, as we try to tackle some of these cross browser issues.

# March 1, 2005 7:16 AM

sergio.loscialo@cit.com said:

Check out http://www.meyerweb.com/eric/css/edge/ for more "rendering" issues with IE. First view the samples in IE then in Firefox...world of difference.

# March 1, 2005 9:59 AM

Name (required)

Your URL (optional)

Comments (required)

Remember Me?

Enter the numbers above:

Add

About Brendan Tompkins

Brendan has been programming with .NET since the first public beta and is owner and operator of Port Technology Services, a consultancy company providing .NET application development services to the Maritime industry. In July, 2007, he was awarded the Microsoft MVP award for ASP.NET. He's also a proud co-founder of failed .COM startup Intrinsigo, and has had a hand in the failure of numerous other businesses. He currently runs CodeBetter.Com and Devlicio.us, and lives in Norfolk, Virgina with his wife Tiara and son Ian.