IE8 table width issue

So recently I came across another classic from back in the day….IE8! I was having some trouble with an image within a table. It was not obeying the width of the table, even though I’d set a max-width on the image…

Here is the issue, the image overlapping the edge of the table out to the right:

After some investigation I remembered why this problem occurred. IE8 requires a width, and the table-layout property to be set to fixed on the table:

table { table-layout: fixed; width: 665px; }
      td { width: 665px; height: 360px; }
      img { max-width: 665px; }

The result can be seen below with Ayrton fitting nicely within the table. This works with all modern browsers I tested too – IE9/10, Firefox, Chrome and Safari:


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s