My site has a header. This header is a table formed by 1 row and 2 cells. One of the cells has only one image, but the other has a nested table with two other cells, having, each one, one image.

Anyway, this is what my header is looking like:



I've set the background color of the nested table's upper cell to yellow, and the bottom cell's background color to blue (as you can see in the image).
NOTE: These colors are only for understanding better the problem.

As you can see, the images have a 3 pixel extra (bottom) space. I've tried everything to eliminate it (messing with the height attributes), but still haven't figured what could it be...

Does anyone know what the problem could be?

This is the table code (it isn't important, since the error probably doesn't come from here):

<div id='header'>
<div id='sitetitle'>

<table border='0' cellpadding='0' cellspacing='0' width='935'>
<tr>
<td><img alt='' border='0' height='194' id='slice_r1_c1' name='slice_r1_c1' src='' width='193'/>
</td>
<td>
<table align='left' border='0' cellpadding='0' cellspacing='0' width='742'>
<tr><!-- row 1 -->
<td>
<img alt='' border='0' height='104' id='slice_r1_c2' name='slice_r1_c2' src='' width='742'/>
</td>
</tr>
<tr><!-- row 2 -->
<td><!-- Begin:Ads -->
<script type='text/javascript'>
<!-- some vars -->
</script>
<span style='white-space:nowrap;'>
<script src='' type='text/javascript'/>
<a href='' target='_blank'>
<img alt='' border='0' height='90' src='' style='background-color:#CECFCE' width='14'/>
</a>
</span>
</td>
</tr>
</table>
</td>
</tr>
</table>

</div>
</div>

This is the code of the CSS tags that apply (probably the source of the problem is here)...

body{
    margin:0;
    padding:0;
    background:#e6e6e6;
    color:#333;
    text-align:center;
    background-color: #FFFFFF;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 76%;
}

#container{
    width:935px;
    padding:0 0px;
    margin:0 auto;
    background:#f0f0f0;
    color:#333;
    text-align:left;
    border-left:0px solid #eef;
    border-right:0px solid #eef;
    float: center;
}

#header{
background-color: #888666;
}

#sitetitle{
    float:left;
    height:220px;
    width: 935px;
    color: #333;
    background-color: #666666;
    margin: 0px 0px 0px 0px;
}

#sitetitle a{
color:#fe7003;
font-weight:normal;
}

#sitetitle a:hover{
color:#fe7003;
}

NOTE: This only happens with Firefox. In Dreamweaver and with IExplorer/Opera, the extra (bottom) space, doesn't appear.

Try this:
http://css-discuss.incutio.com/?page...edGapsInTables

Or.. http://css-discuss.incutio.com/?page=CollapsingBorder
http://css-discuss.incutio.com/?page=NicerTables

Originally Posted by LadynRed

Try this:
http://css-discuss.incutio.com/?page...edGapsInTables

"display:block" WORKED!!!!!

Thanks

You're welcome, glad it worked