71
I've got a page with a menu div that is 1066px wide by 150px high. And then I have some images that are 150px by 150px for the menu items. I put the images in a table that is set to 150x150px with a 1px border around the table, and around each cell in the table.
For some reason though, a space is appearing inside the table, below the images. I've made the menu div background color red, so that it is obvious what's happened. I've also resized the div to find the actual size of the table. The table appears to be 156px high, I currently have the div set to 157px to make it clear what the problem is.
Can anyone help me with how to get rid of the red line underneath my images in the menu? I've been playing with it for a while now, but have not been able to fix it. Any help would be greatly appreciated.
Here's a link to the page: http://www.atlashvac.c om/comfortteam/index.asp
Here's the page code: (after validation)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Indian a Comfort Team</title>
<style type="text/css" media="screen">
@import "/ComfortTeam/styles.css";
</style>
</head>
<body>
<!-- Insert the banner and menu fields -->
<!-- The banner at the top of the page -->
<div id="banner">
</div>
<!-- The primary menu for the site -->
<div id="menu">
<table cellpadding="0" cellspacing="0" >
<tr>
<td>
<a href=""><img src="/comfortteam/img/menuicons/menuspacer.jpg" alt="" /></a>
</td>
<td>
<a href="http://www.yahoo.com"> <img src="/comfortteam/img/menuicons/outdoorunits.jp g" alt="Outdoor Units" /></a>
</td>
<td>
<a href="http://www.google.com" ><img src="/comfortteam/img/menuicons/furnace.jpg" alt="Indoor Units" /></a>
</td>
<td>
<a href="http://www.altavista.c om"><img src="/comfortteam/img/menuicons/hybridsystem.jp g" alt="Hybrid Systems" /></a>
</td>
<td>
<a href="http://www.ask.com"><i mg src="/comfortteam/img/menuicons/indoorairqualit y.jpg" alt="Indoor Air Quality" /></a>
</td>
<td>
<a href="http://www.hotbot.com" ><img src="/comfortteam/img/menuicons/geothermal.jpg" alt="Geothermal " /></a>
</td>
<td>
<a href="http://www.webcrawler. com"><img src="/comfortteam/img/menuicons/menuspacer.jpg" alt="Radiant Systems" /></a>
</td>
</tr>
</table>
</div>
</body>
</html>
And here's the .css file:
body {
position: absolute;
margin-top: 0px;
margin-bottom: 0px;
left: 0px;
top: 0px;
width: 100%;
min-width: 1058px;
height: 100%;
text-align: center;
background-color: #FFFFFF;
}
/* =============== =============== =============== =============== ========= */
/* Specific DIVs */
#banner {
position: inherit;
left: 0px;
top: 0px;
width: 1066px;
height: 150px;
text-align: left;
voice-family: "\"}\"";
voice-family: inherit;
background-image:url(img/header.jpg);
z-index: 5;
}
#menu {
position: inherit;
left: 0px;
top: 150px;
width: 1066px;
height: 157px;
text-align: left;
background-color: #FF0000;
z-index: 10;
}
#mainbody {
position: inherit;
left: 0px;
top: 300px;
width: 1066px;
height: 900px;
max-height: 900px;
text-align: left;
background-color: #cccccc;
z-index: 1;
}
#sidebar {
position: relative;
float: left;
left: 0px;
top: 2px;
width: 154px;
max-width: 150px;
height: 900px;
max-height: 900px;
text-align: left;
background-color: #98B5ED;
border: solid 2px #000000;
z-index: 9;
}
#content {
position: relative;
float: left;
left: 0px;
top: 2px;
width: 758px;
max-width: 758;
height: 900px;
max-height: 900px;
padding-left: 10px;
padding-top: 15px;
text-align: left;
voice-family: "\"}\"";
voice-family: inherit;
background-color: #FFFFFF;
z-index: 1;
}
#sidebar_right {
position: relative;
float: left;
right: 0px;
top: 0px;
width: 154px;
max-width: 150px;
height: 900px;
max-height: 900px;
text-align: left;
background-color: #0000ED;
border: solid 2px #000000;
z-index: 9;
}
/* =============== =============== =============== =============== ========= */
/* Font Elements */
#menu table {
width: 1066px;
max-width: 1066px;
height: 148px;
max-height: 148px;
text-align: center;
border: solid 1px #000000;
margin: 0px 0px 0px 0px;
padding: 0px;
}
#menu td {
width: 150px;
max-width: 150px;
height: 148px;
max-height: 148px;
text-align: center;
vertical-align: middle;
border: solid 1px #000000;
margin: 0px 0px 0px 0px;
padding: 0px;
}
#menu img {
width: 150px;
max-width: 150px;
height: 148px;
max-height: 148px;
text-align: center;
border: none;
}
