Large Gap Below Navigation in IE 6 for PC [Archive]

reach100

07-30-2008, 01:33 AM

Hi There, I am seeing a very large white gap between my navigation and content in IE6.

Please help if possible: http://koniakowsky.vernetti.net/index.php

My CSS

/* CSS Document */

body {
background-color: #e0ad60;
background-image: url(/images/main_bg.gif);
background-repeat: repeat-x;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
font-family: Helvetica, Arial, sans-serif;
font-size:12px;
color: #333333;
line-height: 18px;
}
a {color: #000000;}

#main{
width: 946px;
background-image: url(/images/main_bg_shade.jpg);
background-repeat:repeat;
}

#header {
width: 920px;
height: 301px;
overflow:hidden;

}

h4 {color: #666666}

#mainnav {
width: 920px;
height: 48px;
background-image:url(../images/buttons_bg.gif);

}
#content {
width: 880px;
background-color:#eee9e5;
padding: 20px;
text-align: left;
}
#footer {
width: 900px;
padding:10px;
background: none;
}
#footer a{
color: #ffffff;
}
#footer a:hover{
color: #dddddd;
}

.rightshade{
float:right;
}

.leftshade{
float:left;
}
#nav {
margin: 0;
padding: 0;
background-image: url(../images/buttons_bg2.gif);
list-style-type: none;
height: 48px;
float: left; /* Contain floated list items */
}
#nav li {
margin: 0;
padding: 0;
float: left;
}
#nav a {
float: left;
padding: 0 20px;
color: #FFF;
text-decoration: none;
line-height: 4;
text-align: center;
border-right: 1px solid #8a8a8a;
}
#nav a:hover {
background: #8a8a8a;
}
#body_hom #nav_hom a, #body_map #nav_map a,
#body_jou #nav_jou a,#body_his #nav_his a,
#body_ref #nav_ref a,
#body_con #nav_con a {
background: #BEB06F;
color: #1A1303;
font-weight: bold;
}

#rt_nav {
margin: 0;
padding: 0;
list-style-type: none;
height: 48px;
float: right; /* Contain floated list items */
}
#rt_nav li {
margin: 0;
padding: 0;
float: right;
}
#rt_nav a {
float: left;
padding: 0 20px;
color: #FFF;
text-decoration: none;
line-height: 4;
text-align: center;
}
#rt_nav a:hover {
background-image: url(../images/buttons_bg2.gif);
}

My Page
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Wade Koniakowsky Fine Art - The Art of the Ocean</title>
<link href="includes/Styles.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div align="center">
<div id="main"><img src="images/left_shade.jpg" width="13" height="651" class="leftshade" /><img src="images/right_shade.jpg" width="13" height="651" class="rightshade" />
<div id="header"><a href="/index.php"><img src="images/main_header.jpg" width="920" height="301" border="0" /></a></div>
<div id="mainnav">
<ul id="nav">
<li id="nav_wad"><a href="/about.php">About Wade</a></li>
<li id="nav_gal"><a href="/gallery.php">Gallery</a></li>
<li id="nav_sur"><a href="/surfboards.php">Surfboards</a></li>
<li id="nav_lic"><a href="/licensing.php">Licensing</a></li>
<li id="nav_con"><a href="/contact.php">Contact</a></li>

</ul>
<ul id="rt_nav">
<li><a href="/store/checkout_shipping.php">Checkout</a></li>
<li><a href="/store/shopping_cart.php">Shopping Cart</a></li>
</ul>
</div>

<div id="content">
<table width="100%" border="0" cellspacing="15" cellpadding="0">
<tr>
<td width="414"><img src="images/wade_title.gif" width="341" height="20" /></td>
<td width="421"><img src="images/announcements.gif" width="341" height="20" /></td>
</tr>
<tr>
<td valign="top"><p>Wade Koniakowsky translates the power and magic of the ocean to canvas. He has been deeply involved in art and surfing his entire adult life. Wade resides in San Diego, California with his wife and two daughters. </p></td>
<td rowspan="2" valign="top"><p class="style1">KONIAKOWSKY Gallery Opens at New Location ion the Cedros Design District - 320 S. Cedro s Avenue Solana Beach, CA.</p>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="5"><img src="images/line.gif" width="420" height="12" /></td>
</tr>
<tr>
<td colspan="4"><img src="images/surfboard.jpg" width="262" height="100" /></td>
<td width="216"><p><strong>SURFBOARDS<br />
</strong><span class="style2"><a href="http://www.koniakowsky.com/uploads/Surfboard Brochure 2.08LR.pdf">Download Information pdf </a></span></p></td>
</tr>
<tr>
<td colspan="5"><img src="images/line.gif" width="420" height="12" /></td>
</tr>
<tr>
<td colspan="5"><img src="images/blank.gif" width="10" height="10" /></td>
</tr>
<tr>
<td colspan="5">Soon you can Order Prints and recent artwork in our new online store.</td>
</tr>
<tr>
<td colspan="5"> </td>
</tr>
<tr>
<td width="107"><img src="images/home_print1.jpg" width="107" height="138" /></td>
<td width="10"><img src="images/blank.gif" width="10" height="10" /></td>
<td width="107"><img src="images/home_print2.jpg" width="107" height="138" /></td>
<td width="10"><img src="images/blank.gif" width="10" height="10" /></td>
<td><img src="images/home_print.jpg" width="188" height="138" /></td>
</tr>
</table> </td>
</tr>
<tr>
<td valign="top"><img src="images/blank.gif" width="10" height="10" /><br />
<img src="images/wade_movie.jpg" width="390" height="225" /></td>
</tr>
</table>
</div>
</div>
<div id="footer">Copyright 2007, Wade Koniakowsky Fine Art<img src="images/blank.gif" width="40" height="10" />MEMBER SURFING ARTISTS INTERNATIONAL<img src="images/blank.gif" width="40" height="10" /><a href="/policies.php">Site Policies </a></div>
</div>
</body>
</html>

abduraooft

07-30-2008, 06:28 AM

I think it's the box model bug,
#content {
width: 880px;
background-color:#eee9e5;
padding: 17px;
text-align: left;
} may work.

reach100

07-30-2008, 07:58 PM

Thank you very much for your expert advice!
Rich