Fixed width on IE8 doesn't work

Question

I have a problem with fixed width on an website. I need to make it work on IE8 and I don't know what to do.

This is my code:

And here is the tables styles that is rendering:

This is the page I am talking about: http://www.bayercropscience.ro/fidelis/magazin (I run Win XP with IE8 on a virtual machine to test it).

Answer 1

The reason for the layout issue is because some of your images are very wide: http://awards.createdirect.ro/cache/images/HQ6906_16.jpg-800x600

It seems IE 8 is basing the first column width on the largest image without taking the inline max-width style into account first. As @Vaibhav suggested, adding table-layout: fixed; tells the browser to base the column widths on the first row only, which is why it fixes the issue.

https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout

Another solution would be to manually resize your images to be 60px wide, which would also be better for performance ;)

Additionally, I noticed an issue with this select element: <select class="select2 search_input">.

By default, a select list will be as wide as its longest <option> value, which in your case very long:

Tableta ASUS Transformer Book T100TA-DK005H (Intel Atom Quad-Core Z3740, 10.1" Multi-Touch, 2GB RAM, 500GB + 32GB eMMC, USB 3.0, microHDMI, Windows 8.1, Licenta Full Office Home & Student 2013, 2 Ani Garantie)

This causes the select to be really wide, triggering horizontal scroll bars in the browser. It can be fixed by simply adding width: 100%; to .search_input.

This is only noticeable in IE 8 because the Select2 plugin isn’t running due some JS errors.

Good luck!