css table cell ie8 issue

Question

Hi all,

Am sure this one is basic :) I have a webpage with the following css

.gameboard-table
{
    border: solid 3px black;
    padding: 0px;
    border-collapse: collapse;
}

.gameboard-table tr
{
    padding: 0px;
    margin: 0px;
}

.gameboard-table td
{
    padding: 0px;
    margin: 0px;
    vertical-align: bottom;
    border: solid 1px black;
}

And I then put an imagebutton control (asp.net) into it setting the size to 64*56. In IE7 this works perfectly, the black borders meet my image.

However in IE8 I get a gap of approx 5px at the bottom of my image, which increases the size of my table and makes it look silly. Toggling between compatibility mode on/off makes this issue apparent.

Any ideas how to fix it: without using emulate!

Ta.

Answer 1

What html does asp.net generate?

What css is applying to your button?

how big is your button really?

how big is the image on your button?

what is the whitespace, is it really whitespace, or is the button?

Give us something to go on!