table size dun match in ie and firefox

[mistdreamz]

hi i have a table alignment problem as it works well with firefox but not my ie

the table height displays correctly in firefox as u can see from the attachement

heres the table source code



<table id="borderTable" width="155px" height="300px">
<tr>
<td class="col1" onmouseover="this.className='col2';" onmouseout="this.className='col1';">
What's New</td>
</tr>
<tr>
<td class="col1" onmouseover="this.className='col2';" onmouseout="this.className='col1';"><blockquote>
Promotions
</blockquote>
</td>
</tr>
<tr>

<td class="col1" onmouseover="this.className='col2';" onmouseout="this.className='col1';">
The Story of Louise</td>
</tr>
<tr>
<td class="col1" onmouseover="this.className='col2';" onmouseout="this.className='col1';">
The Choices</td>
</tr>
<tr>
<td class="col1" onmouseover="this.className='col2';" onmouseout="this.className='col1';"><blockquote>
For Fun
</blockquote>
</td>
</tr>
<tr>
<td class="col1" onmouseover="this.className='col2';" onmouseout="this.className='col1';"><blockquote>

At Work
</blockquote>
</td>
</tr>
<tr>
<td class="col1" onmouseover="this.className='col2';" onmouseout="this.className='col1';"><blockquote>
Get Active
</blockquote>
</td>
</tr>
<tr>
<td class="col1" onmouseover="this.className='col2';" onmouseout="this.className='col1';"><blockquote>
Be Classy
</blockquote>
</td>
</tr>
<tr>

<td class="col1" onmouseover="this.className='col2';" onmouseout="this.className='col1';"><p>Accessories</p>
</td>
</tr>
<tr>
<td class="col1" onmouseover="this.className='col2';" onmouseout="this.className='col1';">
Our Shop
</td>
</tr>
<tr>
<td class="col1" onmouseover="this.className='col2';" onmouseout="this.className='col1';">
Feedback
</td>
</tr>
<tr>
<td class="col1" onmouseover="this.className='col2';" onmouseout="this.className='col1';">
Career with us

</td>
</tr>
</table>



any way to solve this problem instead of converting the navigation to a jpeg?

thanks

[amaze]

did u try to use padding-bottom / padding-top in the <td> style?

[mistdreamz]

its the same. the indented portion still looks fatter in IE but not in firefox even after adding a padding...

[icio]

Can you show us the CSS?

[mistdreamz]

.col1 {
background-color: 990000;
border-bottom: 1px dotted #000000;
}

.col2 {
background-color: pink;
}


thanks for your time

i thought of using non breaking spaces aka &nbsp; but i do not think this is a very good alternative though