Question

I have a page that is using tables, in FF etc it works perfect, but in IE7 it causes issues, it’s basically where the four corners have a td and and img (its a rounded corner form) .. if I remove the whitespace from the document it fixes the issue.. What actually happens is that it messes up the tables.. it puts a thin white line between the upper tr that holds the 2 corners and the next tr

I need to remove the the whitespace between the img and the TD, is there a better work around, as I have lots and not only that if I reformat the document the problem returns..

Here is a simple example..

   <table width="100%" height="418" border="0" cellpadding="0" cellspacing="0" bgcolor="#F04A23"
            style="margin: 0px; padding: 0px">
            <tr>
                <td width="12" align="left" valign="top">
                    <img src="content/images/corner_left.gif" width="12" height="12" />
                </td>

as you can see there is white space between img and td… and I remove it so it looks like this:

<img src="content/images/corner_left.gif" width="12" height="12" /></td>

the problem is gone, (notice the td and image are right next to each other)

Any ideas, I tried setting all sorts of css, padding 0px, margins 0px etc …

Any ideas really appreciated.

Answer 1

The only way to “fix it” (and I use that term loosely) is to remove the whitespace.

More importantly, you should stop making websites like it’s 2001. 🙂