Hi

 

I'm trying to format this table with a hover over/ hi light state. It's working fine except I've got an annoying gap (top) in the hover state which I've tried everything to get rid of.

 

Code below. Can anyone see where I'm going wrong.

 

HTML

<table summary="hover over table" class="datatable">

<tr><td>item 1 </td></tr>
<tr><td>item 2 </td></tr>
<tr><td>item 3 </td></tr>
<tr><td>item 4 </td></tr>
<tr><td>item 5 </td></tr>
<tr><td>item 6 </td></tr>
<tr><td>item 7 </td></tr>
<tr><td>item 8 </td></tr>

 </table>

 

CSS

.datatable {
border: 0px solid #0261B6;
padding: 0px;
border-collapse:collapse;
width: 760px;
}
.datatable td {
border-top: 0px solid #7da5d6;
border-right: 0px solid #7da5d6;
border-bottom: 1px solid #7da5d6;
border-left: 0px solid #7da5d6;	
padding: 0px 4px 4px 4px;
border-spacing: 0px;
text-align:left;
font-size: 0.8em;
width: 760px;
}
.datatable th {
border: 0px solid #828282;
background-color: #7da5d6;
color:#FFFFFF;
font-weight: bold;
text-align: center;
padding: 4px 4px 4px 4px;
width: 760px;
}
.datatable caption {
font: bold 0.9em Arial, Helvetica, sans-serif;
color: #33517A;
text-align: left;
padding-top: 0px;
padding-bottom: 0px;
}
.datatable tr:hover, .datatable tr.hilite {
background-color: #DFE7F2;
color: #000000;
}

 

Thanks,

 

Jo.

Hi

 

not too sure what gap you mean? if you mean the gap that this forum doesnt have and same with most websites then you can add body{ margin-top:0px; } this will remove the gap:)

 

seville

It's always a nice thing to Reset Browser Default CSS (link) since each browser has different defaults. This will start you out with a blank canvas that you can then build from.

 

Cheers!

I mean the white gap that appears at the top of each cell when it's highlighted. See image.

 

 

Hope that makes it clearer.

 

Thanks.

I tested your code in IE7 and Firefox and I don't get that space. It may be due to some other code you have; are you using a doctype? Or it may be due to margin or padding either from a browser default or from another style.

This is the doctype I'm using. Should that make a difference?

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Try this:

 

<table cellspacing="0px">

Brilliant! Thanks.

 

It worked perfectly.