CODEWITHSUNDEEP
cssinternet-explorer-8
Juuso Palander
Juuso Palander

Reputation: 96

IE8 CSS rendering issue (table)

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;
}

Upvotes: 5

Views: 1848

Answers (3)

Dan Doyon
Dan Doyon

Reputation: 6720

In regards to empty <td> cells. It used to be that you needed at least an &nbsp; to have it render properly across browsers. I think that may no longer be case with current versions.

As an aside, I would recommend using tools like firefox webdeveloper and firebug . Webdeveloper has a plethora of nice features along with a link to the w3c Validator which has helped me find malformed html.

Upvotes: 0

clairesuzy
clairesuzy

Reputation: 27624

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

Upvotes: 2

Jonathan Pitre
Jonathan Pitre

Reputation: 2425

Remove the left and right padding:
padding: 10px;
becomes
padding: 10px 0px 10px 0px;

Hope this helps!

N.S.

Upvotes: 0

Related Questions