HTML table horizontal overflow past div in IE8
I'm building an HTML table that could be at most 5 columns wide and any number long; it rests inside a div. It looks great in FF/Chrome/Safari, but messes up in IE8:
http://img42.imageshack.us/img42/7209/artistlist.png (I'm a new user so I can't post images directly...)
Here's the code: <h2 class="blockhead">14 artists found</h2>
<div class="blockbody">
<div class="blockrow">
<font size="+0">
<div style="max-width: 99.9%;">
<center><table style="max-width: 99.9%;"><tr>
<td><center><a href="djdb2.php?id=994"><img src="djdb/artist/0/994.jpg" style="max-width: 140px; max-height: 140px; border: 2px #414141 solid;" hspace=10><br>John '00' Fleming</a></center></td>
<td><center><a href="djdb2.php?id=657"><img src="djdb/artist/0/657.jpg" style="max-width: 140px; max-height: 140px; border: 2px #414141 solid;" hspace=10><br>John Acquaviva</a></center></td>
<td><center><a href="djdb2.php?id=1120"><img src="djdb/artist/1/1120.jpg" style="max-width: 140px; max-height: 140px; border: 2px #414141 solid;" hspace=10><br>John Askew</a></center></td>
<td><center><a href="djdb2.php?id=474"><img src="djdb/artist/0/474.jpg" style="max-width: 140px; max-height: 140px; border: 2px #414141 solid;" hspace=10><br>John Dahlbäck</a></center></td>
<td><center><a href="djdb2.php?id=1164"><img src="djdb/artist/1/1164.jpg" style="max-width: 140p开发者_如何学Cx; max-height: 140px; border: 2px #414141 solid;" hspace=10><br>John Dalagelis</a></center></td>
</tr><tr>
<td><br><center><a href="djdb2.php?id=250"><img src="djdb/artist/0/250.jpg" style="max-width: 140px; max-height: 140px; border: 2px #414141 solid;" hspace=10><br>John Daly</a></center></td>
<td><br><center><a href="djdb2.php?id=935"><img src="djdb/artist/0/935.jpg" style="max-width: 140px; max-height: 140px; border: 2px #414141 solid;" hspace=10><br>John Debo</a></center></td>
<td><br><center><a href="djdb2.php?id=2"><img src="djdb/artist/0/2.jpg" style="max-width: 140px; max-height: 140px; border: 2px #414141 solid;" hspace=10><br>John Digweed</a></center></td>
<td><br><center><a href="djdb2.php?id=1132"><img src="djdb/artist/1/1132.jpg" style="max-width: 140px; max-height: 140px; border: 2px #414141 solid;" hspace=10><br>John Peel</a></center></td>
<td><br><center><a href="djdb2.php?id=338"><img src="djdb/artist/0/338.jpg" style="max-width: 140px; max-height: 140px; border: 2px #414141 solid;" hspace=10><br>John Selway</a></center></td>
</tr><tr>
<td><br><center><a href="djdb2.php?id=980"><img src="djdb/artist/0/980.jpg" style="max-width: 140px; max-height: 140px; border: 2px #414141 solid;" hspace=10><br>John Talabot</a></center></td>
<td><br><center><a href="djdb2.php?id=335"><img src="djdb/artist/0/335.jpg" style="max-width: 140px; max-height: 140px; border: 2px #414141 solid;" hspace=10><br>John Tejada</a></center></td>
<td><br><center><a href="djdb2.php?id=863"><img src="djdb/artist/0/863.jpg" style="max-width: 140px; max-height: 140px; border: 2px #414141 solid;" hspace=10><br>Koen Groeneveld</a></center></td>
<td><br><center><a href="djdb2.php?id=1009"><img src="djdb/artist/1/1009.jpg" style="max-width: 140px; max-height: 140px; border: 2px #414141 solid;" hspace=10><br>Mike Shannon</a></center></td>
</tr></table></center></div>
</font>
</div>
</div>
I know it's not pretty, but I'm building this on top of vBulletin so before I edit their code I want to make sure I know exactly what CSS styles I need to edit. I have tried many, many suggestions from Google, and even this site, but nothing has seemed to help IE make the table fit within the div. Does anybody know how I can do this? I'm open to trying anything if you're willing to explain something to me!
I finally fixed this! I had to add "table-layout: fixed;" to the table's style, set the table to width=100%, and enclose it inside its own div.
If I recall correctly(1), IE8 only supports the max-width CSS if you are running in Standards Mode in HTML.
- Do you have a DocType specified?
- Is it an HTML one? XHTML isn't fully supported in IE8
(1) - Just verified, in Quirks Mode (what you get if no DocType is specified), max-width is ignored in IE8.
精彩评论