IE8 CSS rendering issue (table)

Question

I've got quite common IE8 issue with my site. IE8 renders my page differently than other browsers, which is quite annoying. I'd love if someone could help, please!

I've tried to give IE8 its own stylesheet but it doesn't seem to work.

Here's the page with the issue:

http://www.routeqr.com/toimex/tuotteet

Scroll down to picture section and you'll see that the first colum and the second column got too much space between them.

The TH-tags are also rendered wrong.

IE doesn't render margins properly there, just check the same page with Firefox or with other browser and you should see the difference.

I'd appreciate it a lot if someone could help me, I'm so lost myself.

HTML-code

<table class="tuotekuvat">
<tbody>
<tr>
<th><a name="kannakkeet">&raquo; Kannakkeet</a></th>
</tr>

CSS

.custom .tuotekuvat th {
float: left;
margin-top: 15px;
margin-bottom: 15px;
padding: 10px;
background-color: #333333;
}

Answer 1

The table is not coded correctly, you have one th (cell) with no colspans specified, and in the table itself some rows have 6 cells (columns) and some have 5. any browser may have trouble evening that up ;)

Then you are floating the single th - IE 7 and below don't understand float on a table cell/header element and will be forcing the whole of the 1st column to be as wide as the header link

If I can suggest you stick to one method or another, either floating a header outside the table, or even putting it in it's own <thead> element - and then using table-layout: fixed on the entire table so that the columns are forced to be of equal width. that should help even it up.. but mainly if you decide that the table is to have six columns (whether all of them are used or not) then for example that single th should be <th colspan="6">

get the table HTML right first and the rest should perfectly OK across browser if you then want to make it look like there's gaps between table rows and table headings you can pad the th.. but I don't really see a need for it to float outside the table structure