468,238 Members | 1,847 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,238 developers. It's quick & easy.

My table is not sizing right in the div

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.com/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>Indiana 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.jpg" 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.com"><img src="/comfortteam/img/menuicons/hybridsystem.jpg" alt="Hybrid Systems" /></a>
</td>
<td>
<a href="http://www.ask.com"><img src="/comfortteam/img/menuicons/indoorairquality.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;
}
May 1 '07 #1
1 2526
rsteph
71
Scratch that, got it working... it was a simple oversight.
May 2 '07 #2

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

5 posts views Thread by Olav Tollefsen | last post: by
13 posts views Thread by Giggle Girl | last post: by
reply views Thread by NPC403 | last post: by
reply views Thread by kermitthefrogpy | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.