extra space in IE

[corypark]

I'm trying to use a suckerfish CSS Dropdown menu but it is creating extra unwanted space beneath it in IE. I'm out of ideas.. and my search for solutions was fruitless.... please help

page: http://intuitechinc.com/jammies/menuTest2.html

css:

ul {
	list-style: none;
	padding: 0;
	margin: 0;
	background-color:#009933;
}

#nav a {
	font-weight: bold;
	color: #ffffff;
	text-decoration: none;
}

#nav li li a {
	display: block;
	font-weight: normal;
	color: #fff;
	padding: 0.2em 10px;
}

#nav li li a:hover {
	padding: 0.2em 5px;
	background-color: #CC6666;
}

li {
	float: left;
	position: relative;
	width: 161px;
	text-align: center;
	cursor: default;
	background-color: #996666;
	border: 1px solid #fff;
	border-left: none;
}
li#farLeft {
	border-left: solid 1px #fff;
	}

li ul {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	background-color: #996666;
	font-weight: normal;
	padding: 0.5em 0 1em 0;
	border: solid 1px #fff;
	border-top: none;
}

li>ul {
	top: auto;
	left: auto;
}

li li {
	display: block;
	float: none;
	border: 0;
}

li:hover ul, li.over ul {
	display: block;
}
#mainTbl{
	width:100%;
	text-align:center;
	}
#container {
	width: 700px;
	text-align:center;
	background-color: #fff;
	padding: 15px auto;
	margin:auto;
	voice-family: "\"}\""; 
	voice-family:inherit;
	width: 700px;
}
#header {
	width:659px;
	background:#666666;
	border: solid 2px #CCCCCC;
	text-align: center;
	padding-top: 20px;
	margin: auto;
	margin-bottom: 20px;
	}
#images {
	background:#FFFFFF;
	margin: 15px auto 20px auto;
	width: 612px;
	padding-left: 3px;
	}
#images img {
	margin: 3px 3px 3px 0;
	}
#navTop {
	width:650px;
	margin:0;
	clear:both;
	font-size: 12px;
}
#content {
	border: solid #999999 2px;
	width: 650px;
	margin: auto;
}

hr {
	display: none;
}
.page {
	width: 718px;
	margin: 25px auto;
	text-align: center;
	background-color:#FFFFFF
}
.header {
	margin: 20px auto 20px auto;
	padding: 15px 0 0 0;
	padding-bottom: 0px;
	background-color:#666;
	text-align:center;
	border:#333 ridge 2px;
}

html:

<table class="page" align="center" width="718" border="0">
  <tr>
    <td><table border="0" cellpadding="0" cellspacing="0" class="header">
  <tr>
          <td>In
<div id="images"><img class="right" src="images/coffee.jpg" /><img src="images/calendar.gif" /><img src="images/cell.jpg" /><img src="images/writing.jpg" /><img src="images/traffic.gif" /><img src="images/package.jpg" /><img src="images/keyboard.jpg" /><img src="images/watch.jpg" /><img src="images/paperwork.jpg" />
			</div>

	<div><ul id="nav"><li id="farLeft"><a href="">Help Resources </a>
                  <ul>
                    <li><a href="">thing 1</a></li>
                    <li><a href="">thing 2</a></li>
                    <li><a href="">thing 3</a></li>
                    <li><a href="">thing 4</a></li>
                    <li><a href="">thing 5</a></li>
                  </ul>
  				</li>
				<li><a href="">Products &amp; Services</a>
                  <ul>
                    <li><a href="">thing 1</a></li>
                    <li><a href="">thing 2</a></li>
                    <li><a href="">thing 3</a></li>
                    <li><a href="">thing 4</a></li>
                    <li><a href="">thing 5</a></li>
                  </ul>
			  </li>
				 <li><a href="">Help Us Help You </a>
                  <ul>
                    <li><a href="">thing 1</a></li>
                    <li><a href="">thing 2</a></li>
                    <li><a href="">thing 3</a></li>
                    <li><a href="">thing 4</a></li>
                    <li><a href="">thing 5</a></li>
                  </ul>
 				 </li>
 				 <li><a href="">Advertise in IYJ </a>
                  <ul>
                    <li><a href="">thing 1</a></li>
                    <li><a href="">thing 2</a></li>
                    <li><a href="">thing 3</a></li>
                    <li><a href="">thing 4</a></li>
                    <li><a href="">thing 5</a></li></ul></li></ul></div></td></tr></table>
</td>
  </tr>
</table>

THanks

[monicasaha]

make img display:block;

[corypark]

that does nothing... thanks though

anybody?

[monicasaha]

ok add this code in your css this will definately work.

img, div{
	padding:0;
	margin:0;
	border:0;

}

#images {
	background:#FFFFFF;
	margin: 15px auto 20px auto;
	width: 612px;
	padding:3px;
	overflow:hidden;
	}
	
#images img{
	display:block;
	float:left;
}

[monicasaha]

sorry at first i got the prob with ur images...now i have done with ur bottom margin of ur dropdownmenu..
here is the css code

 img, div, ul, li, a{
	padding:0;
	margin:0;
}

.spacer{
	font-size:0;
	line-height:0;
	clear:both;
}
ul {
	list-style-type: none;
	background-color:#009933;
	
}
#nav{
	margin:0;
	padding:0;
}

#nav a {
	font-weight: bold;
	color: #ffffff;
	text-decoration: none;
}

#nav li li a {
	font-weight: normal;
	color: #fff;
	padding: 0.2em 10px;
}

#nav li li a:hover {
	padding: 0.2em 5px;
	background-color: #CC6666;
}

li {
	float: left;
	position: relative;
	width: 161px;
	text-align: center;
	cursor: pointer;
	background-color: #996666;
	border: 1px solid #fff;
	border-left: none;
}
li#farLeft {
	border-left: 1px  solid #fff;
	}

li ul {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	background-color: #996666;
	font-weight: normal;
	padding: 0.5em 0 1em 0;
	border: solid 1px #fff;
	border-top: none;
}

li>ul {
	top: auto;
	left: auto;
}

li li {
	display: block;
	float: none;
	border: 0;
}

li:hover ul, li.over ul {
	display: block;
}
#mainTbl{
	width:100%;
	text-align:center;
	}
#container {
	width: 700px;
	text-align:center;
	background-color: #fff;
	padding: 15px auto;
	margin:auto;
	voice-family: "\"}\""; 
	voice-family:inherit;
	width: 700px;
}
#header {
	width:659px;
	background:#666666;
	border: solid 2px #CCCCCC;
	text-align: center;
	padding-top: 20px;
	margin: auto;
	margin-bottom: 20px;
	}
.header #images {
	background:#FFFFFF;
	margin: 15px auto 20px auto;
	width:609px;
	padding:3px;
	overflow:hidden;
	}
	
#images img{
	display:block;
	float:left;
	margin-right:3px;
}
.norightmargin{
	margin-right:0!important;
}
#navTop {
	width:650px;
	margin:0;
	clear:both;
	font-size: 12px;
}
#content {
	border: solid #999999 2px;
	width: 650px;
	margin: auto;
}

hr {
	display: none;
}
.page {
	width: 718px;
	margin: 25px auto;
	text-align: center;
	background-color:#FFFFFF
}
.header {
	margin:20px auto;
	background-color:#666;
	padding: 15px 0 0 0;
	text-align:center;
	border:2px solid #333;
}

and html

<table border="0" cellpadding="0" cellspacing="0" class="header">
  <tr>
          <td>In
<div id="images"><img src="images/coffee.jpg" width="65" height="80" /><img src="images/calendar.gif" width="65" height="80" /><img src="images/cell.jpg" width="65" height="80" /><img src="images/writing.jpg" width="65" height="80" /><img src="images/traffic.gif" width="65" height="80" /><img src="images/package.jpg" width="65" height="80" /><img src="images/keyboard.jpg" width="65" height="80" /><img src="images/watch.jpg" width="65" height="80" /><img src="images/paperwork.jpg" width="65" height="80" class="norightmargin" />			</div>

	<div style="height:15px;"><ul id="nav"><li id="farLeft"><a href="">Help Resources </a>
                  <ul>
                    <li><a href="">thing 1</a></li>
                    <li><a href="">thing 2</a></li>
                    <li><a href="">thing 3</a></li>
                    <li><a href="">thing 4</a></li>
                    <li><a href="">thing 5</a></li>
                  </ul>
  				</li>
				<li><a href="">Products &amp; Services</a>
                  <ul>
                    <li><a href="">thing 1</a></li>
                    <li><a href="">thing 2</a></li>
                    <li><a href="">thing 3</a></li>
                    <li><a href="">thing 4</a></li>
                    <li><a href="">thing 5</a></li>
                  </ul>
			  </li>
				 <li><a href="">Help Us Help You </a>
                  <ul>
                    <li><a href="">thing 1</a></li>
                    <li><a href="">thing 2</a></li>
                    <li><a href="">thing 3</a></li>
                    <li><a href="">thing 4</a></li>
                    <li><a href="">thing 5</a></li>
                  </ul>
 				 </li>
 				 <li><a href="">Advertise in IYJ </a>
                  <ul>
                    <li><a href="">thing 1</a></li>
                    <li><a href="">thing 2</a></li>
                    <li><a href="">thing 3</a></li>
                    <li><a href="">thing 4</a></li>
                    <li><a href="">thing 5</a></li></ul></li></ul></div></td></tr></table>

add this table i hope this will solve ur prob.

[corypark]

cool! thanks... what was wrong with the pictures?

[monicasaha]

my pleasure..
at first images were also showing extra space below.. in IE 6... that is why i got misguided