Popup div problem in FF and Chrome

Please view attachments. I am using following code for simple menu popup. It works fine in IE (ie.jpg). Problem is in FF and Chrome (ff.jpg). In FF there is lot of space between button and popup div. Please review my code and suggest CSS fix so that popup get right under the button. Just like in ie.jpg.

<style type="text/css"> 
	
#nav {
		margin:0; 
		padding:0; 
		list-style:none;
	}	
	

		#nav dropdown {
			position:relative;
			top:-30px;
		}
		
		#nav li {
			float:left; 
			display:block; 
			width:107px; 
			position:relative;
			z-index:500; 
			margin:0 1px;
		}
		
		/* this is the parent menu */
		#nav li a {
			display:block; 
			padding:8px 5px 0 5px; 
			font-weight:700;  
			height:31px; 
			text-decoration:none; 
			color:#fff; 
			text-align:center; 
			color:#333;
		}
 
		#nav li a:hover {
			color:#fff;
		}
	
		/* you can make a different style for default selected value */
		#nav a.selected {
			color:#f00;
			padding-left:38px;
			background-image:url('images/cart-2.png');
			background-repeat:no-repeat;
		}
	
		/* submenu, it's hidden by default */
		#nav ul {
			position:absolute; /* absolute */
			left:0; 
			display:none; 
			margin:0 0 0 -1px; 
			padding-top:0px; 
			list-style:none;
		}
		
		#nav ul li {
			width:200px; 
			float:left; 
			padding-top:0px; 
			border-top:1px solid #fff;
		}
		
		#nav ul.alignleft {
			left:-100px;
		}
		
		/* display block will make the link fill the whole area of LI */
		#nav ul a {
			display:block;  
			height:15px;
			padding: 0px 0px; 
			color:#666;
		}
		
		#nav ul a:hover {
			text-decoration:underline;	
		}
 
		/* fix ie6 small issue */
		/* we should always avoid using hack like this */
		/* should put it into separate file : ) */
		*html #nav ul {
			margin:0 0 0 -2px;
		}
 
	</style> 
	<ul id="nav"> 
		<li><span id="con2" style="text-align:left;"><a href="#" class="selected" style="text-align:left;">Cart (1)</a>&nbsp;&nbsp;&nbsp;&nbsp;</span> 
		<ul class="alignleft"> 
			<li> 
			 <div class="dropdown" id="content"> 
			<link href="styles.css" rel="stylesheet" type="text/css"> 
<table  bgcolor="#f3e3be"> 
  
			   <tr><td bgcolor="#f3e3be" class="orangetext"><img src="p_images_th/th_pb3bc58_pink.jpg" width="50" height="50"></td> 
			       <td bgcolor="#f3e3be" class="orangetext">Crib / Toddler(Matching Bumper)</td> 
				   <td bgcolor="#f3e3be" class="orangetext">1</td> 
				</tr> 
				<tr><td colspan="3" bgcolor="#f3e3be" class="orangetext">Price: $69.99</td></tr> 
								<tr height="5"><td colspan="3" bgcolor="#f3e3be" class="orangetext"><hr /></td></tr> 
				<tr><td bgcolor="#f3e3be" class="orangetext">Edit Cart</td><td colspan="2" class="orangetext" align="right">Sub Total: $69.99 &nbsp;</td></tr> 
				<tr><td colspan="3" bgcolor="#f3e3be" class="orangetext" align="right"><strong>Checkout</strong> &nbsp;</td></tr> 
				</table>   
							</div> 
			</li> 
		</ul> 
		<div class="clear"></div> 
	</li> 
</ul> 

HTML:

 

Never, ever use IE as a reference for how things work. IE is the worst browser on the planet. Inept at best, it's 13 years behind all others in modern standards and practices. Always, always use ANY other browser to initially test your markup. THEN look to see how IE screws things up. If it works in IE but not any of the other browsers, your markup is flat out wrong!

Are you using a doctype?

 

One quick thing I noticed:
#nav dropdown {
should be
#nav .dropdown {

Other than that, is there a reason you're wrapping the table popup in so many layers? In theory you could just make the table a child of the original <li> and style it based on that with less code layers in between.

 

Thanks drhowarddrfine for the great tip. No. no doctype in the page.

davmillar, after adding dot (#nav .dropdown {) popup is appearing on top of the button. See the image.

I am beginner level CSS coder. Can you please help me in fixing it all.

Some Green to you both. Thanks

 

Without a doctype, you will never get IE to attempt to perform like the other far more modern browsers. You are in 'quirks mode' and it's like it's 1998 all over again. Add this to your first line:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

 

In addition to drhowarddrfine's comment about needing a doctype, you also really should clean that HTML up to the bare essentials before attempting to style it. All you really need is this:

<ul id="nav"> 
  <li>
    <a href="#" id="cartbtn" style="text-align:left;">Cart (1)</a>
    <div id="dropdown"> 
      <table bgcolor="#f3e3be"> 
        <tr>
          <td bgcolor="#f3e3be" class="orangetext"><img src="p_images_th/th_pb3bc58_pink.jpg" width="50" height="50"></td> 
           <td bgcolor="#f3e3be" class="orangetext">Crib / Toddler(Matching Bumper)</td> 
           <td bgcolor="#f3e3be" class="orangetext">1</td> 
        </tr> 
        <tr><td colspan="3" bgcolor="#f3e3be" class="orangetext">Price: $69.99</td></tr> 
        <tr height="5"><td colspan="3" bgcolor="#f3e3be" class="orangetext"><hr /></td></tr> 
        <tr><td bgcolor="#f3e3be" class="orangetext">Edit Cart</td><td colspan="2" class="orangetext" align="right">Sub Total: $69.99 &nbsp;</td></tr> 
        <tr><td colspan="3" bgcolor="#f3e3be" class="orangetext" align="right"><strong>Checkout</strong> &nbsp;</td></tr> 
      </table>   
    </div>
    <div class="clear"></div> 
  </li> 
</ul>

HTML:

From there, you have a lot less nested elements to worry about positioning and adjusting.