Weird Internet Explorer Print Bug Involving IFRAME and TABLE

I ran into a very strange bug with printing in IE. It happened in an online calendar program that I work on. Somebody showed me a printed page from IE 6 where the attendees, which are in an IFRAME, had this big 6 inch left margin. The table was pushed off the right edge of the paper, you couldn’t even read it. On screen, the page looked just fine, there was a 10 pixel border. I printed the same page in Firefox and it printed just fine.

So, I went onto testing and couldn’t figure out a way to fix it, except to get rid of the 10 pixel table cell before the IFRAME table cell. Let me show you how to recreate the problem easily:

1. Create a file called test.html and put this in it:
Code:

<html>
<head>
<title>Test Iframe in table print</title>
</head>
<body>
<table border=1 width=”100%”><tr>
  <td colspan=2>Test Header</td>
</tr><tr>
  <td width=”10″> </td>
  <td><iframe width=”100%” height=”100″ src=”iframe.html”></td>
</tr></table>
</body>
</html>

2. Create another file called iframe.html and put this in it:
Code:

<html>
  <head>
  <title></title>
  </head>
  <body>
     This is the body of the IFRAME. This is the body of the IFRAME. This is the body of the IFRAME. This is the body of the IFRAME. This is the body of the IFRAME. This is the body of the IFRAME. This is the body of the IFRAME.
     This is the body of the IFRAME. This is the body of the IFRAME. This is the body of the IFRAME. This is the body of the IFRAME. This is the body of the IFRAME. This is the body of the IFRAME. This is the body of the IFRAME.
  </body>
</html>

3. Point IE to test.html. Notice it looks fine on screen. Now, print the page. Notice the huge left margin? What the heck?

The important ingredients to creating this problem are:

      A table cell with colspan=2 above the table cell holding the IFRAME (or maybe just in the same table)
      a table cell to the left of the IFRAME table cell
      The IFRAME must have a width=”100%”

My solution to this production problem (the real problem was a lot more complex, but had the basic ingredients) was to remove the table cell before the IFRAME table cell. We really didn’t need that 10 pixel padding.
        

Comments are closed.