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:
table_pertruding

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:
table_fitted

Advertisements

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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