CODEWITHSUNDEEP
htmlinternet-explorerhtml-table
SaturnsEye
SaturnsEye

Reputation: 6499

Tall tables in IE

I've never come across this problem before but my td's are displaying 3-4x taller in IE compared to Firefox and Chrome.

<tr>
<td align="right" valign="top" style="padding:0px" scope="row"><img src="image.png" width="15" height="15"></td>            
<td width="247" height="74" align="left" valign="top" style="padding:0px" scope="row">    </td></tr>
<tr>
<td width="20" align="right" valign="top" style="padding:0px" scope="row"><img src="images.png" width="15" height="15"></td>        
<td height="39" align="left" valign="top" style="padding:0px" scope="row"></td></tr>
<tr>
<td width="20" align="right" valign="top" style="padding:0px" scope="row"><img src="image.png" width="15" height="15"></td>        
<td height="54" align="left" valign="top" style="padding:0px" scope="row"></td></tr>
<tr>
<td width="20" align="right" valign="top" style="padding:0px" scope="row"><img src="image.png" width="15" height="15"></td>        
<td align="left" valign="top" style="padding:0px" scope="row"></td>

</tr>

Upvotes: 0

Views: 90

Answers (1)

x4rf41
x4rf41

Reputation: 5337

So, i checked out the the http://jsfiddle.net/Sx6be code. the problem is that the browser distribute the remaining height differently. the Firefox and Chrome make the rows the exact height that is defined in the td tags, but the internet explorer tries to distribute the height equally (the same way the table distributes its column widths)

what you have to do is: force the last (empty) row that is within the rowspan to be as high as possible (the row below 'Network of fully qualified...'):

<tr>
    <td width="20" align="right" height="240" valign="bottom" style="padding:0px" scope="row"></td>
    <td align="left" valign="top" style="padding:0px" scope="row"></td>
</tr>

i put the height to 240 to achieve this.

look at this: http://jsfiddle.net/Sx6be/5/ you can change the height of the td to 0 to see what exactly the problem is

but you can only use this fix if you know the height of the table (because you can only fixed values as height).

a better solution is to use an unsorted list <ul> instead of the table for the Key Benefits part.

table based layout is VERY outdated. you should really avoid using it, by now you should know why.

Upvotes: 1

Related Questions