Enormous table spacing in IE
- Started
- Last post
- 14 Responses
- besler
Anyone have any idea why there's an enormous space beneath the photo in IE 6, 7 and 8?
http://projects.mindutopia.com/a…
Yes, I'm using tables. And no, I can't switch to CSS.
- besler0
Anybody...
- airey0
i'd guess it's the double-margin / padding issue IE suffers. see if any of this info helps:
http://www.positioniseverything.…
the short answer is to make the "display: inline" on whatever element the table is containing.
- bigtrick0
no idea. that's pretty fucked up.
- acescence0
well i'm not going to spend my sunday evening with your spaghetti, but i will give you this tip:
tools > developer tools
then
outline > outline table cells
- bigtrick0
oh ok, figured it out. basically, the way the table rows are set up, the row with the picture in it + the row below it are trying to take up as much space as that one td on the left you have with rowspan = 2. so, they are splitting that height between them, evenly.
to force the table cell with the picture in it to have less white space at the bottom, you have to give the cell below it (the one with rowspan=3 and colspan=3) a big height, one big enough to force it to take up that white space. i used height=3000, which is overkill, but it fixed it for me in ie8.
have fun!
- That worked. But I don't want to have a fixed height that would have to be changed with each page.besler
- besler0
Any other ideas?
- bigtrick0
so just set it to 30000 on every page - there are no ill effects (in ie8) to setting it to a ridiculous height.
- acescence0
the issue isn't the table containing the image (which you've set to a height of 290) but the cell that contains that table
- besler0
I've tried changing everything I can think of, everything that's been recommended to me. Nothing's working. WTF
- acescence0
.
- hans_glib0
your table structure is all to cock. As you're using two nested tables why not make the main content cell one nested table? I used the following code and it works in IE6. The sizing may be wrong as I just took the most obvious measurements from your code (I couldn't be bothered to fathom it out)
<table border="1" cellspacing="0" cellpadding="0">
<tr>
<td width="14"> </td>
<td width="187"> </td>
<td width="14"> </td>
<td width="703"><table width="703" border="1" cellspacing="0" cellpadding="0">
<tr>
<td colspan="3" height="290"> </td>
</tr><tr>
<td colspan="3" height="20"> </td>
</tr><tr>
<td width="382" height="290"> </td>
<td width="19" height="290"> </td>
<td width="310" height="290"> </td>
</tr><tr>
<td colspan="3"> </td>
</tr><tr>
<td width="382" height="290"> </td>
<td width="19" height="290"> </td>
<td width="310" height="290"> </td>
</tr>
</table>
</td>
<td width="14"> </td>
</tr>
</table>:: with apologies to other qbners for posting table code in the pv (and nested table code at that o_O) ::