By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,788 Members | 1,115 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,788 IT Pros & Developers. It's quick & easy.

My table is not sizing right in the div

P: 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
Share this Question
Share on Google+
1 Reply


P: 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.