Question

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: 140px; 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!

Answer 1

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.