shrinking a box

[roballoo]

I have a top nav bar that I want to make shorter. I can adjust the {height: XXpx;} in the CSS but the text doesn't move up. Since this is at the top of the screen I adjust the margin-top to get the affect I want except in IE/Win and (less so) in Opera. Is there a better way to go about doing this? The CSS div tag I used is: #topnav. Examples and links below.

http://www.roballoo.com/clients/site...design-11.html

http://www.roballoo.com/clients/sitepoint/style-11.css

CSS:

/* CSS Document */

body {
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	font-family: verdana, arial, helvetica, sans-serif;
	font-size: 1em;	/* resize base font size here */
	background: url(images/bground-shadow.jpg);
	background-repeat: repeat-y;
	background-position: 50% 50%;
	background-attachment: fixed;
	
	}

#container, #container-top, #container-nav, #container-main {
	position: relative;
	width: 800px;
	margin-left: auto;
	margin-right: auto;
	/* border: 1px solid green; */
	}
	
/* **************** TOP NAV **************** */
#topnav {
	position: relative;
	float: right;
	display: inline;
	margin: 0 0 0 0;
	_margin-left: 10px; /* shows to IE only */
	padding: 0px 10px 0px 10px; 
	/* _padding-top: 2px; */
	/* white-space: nowrap; */
	background: #666666 url(images/corner-bl.gif) bottom left no-repeat;
	color: white;
	text-decoration: none;
	/* text-align: right; */
	font-size: .8em;
	/* border: 1px solid brown; */
	vertical-align: middle; 
	z-index: 30;  /* legacy code from old version */
	/* height: 25px; */
	}

#topnav a {
	color: #ffffff;
	padding-right: 1em;
	/* _font-size: .8em; */ /* show to  IE only */

	}
#topnav a:hover {
	color: #FFCC33;
	}

#topnav b { display: none; }

#topnav ul {
	padding: 0 0;
	_padding: 6px 0 0 0;
	margin-left: 0;
	font-size: 1em;
	}
	
#topnav ul li {
	list-style: none;
	margin: 0;
	display: inline;
	}


#login-form {
	display: inline;
	color: #ffffff;
	width: 6em;
	/* border: 1px solid purple; */
	}
	
#login1, #login2, #login3 {
	display: inline;
	width: 6em;
	/* _font-size: .8em; */
	/* border: 1px solid white; */
	}
	
#login1 input {
	border: none;
	margin-right: 5px;
	vertical-align: middle;
	}
	
#user {
	float: right;
	position: relative;
	/* clear: both; */
	margin: 10px 0px 10px 100px;
	
	/* margin-top: 10px;
	margin-right: 0px;
	margin-left: 100px;
	margin-bottom: 10px; */
	padding-right: 10px;
	white-space: nowrap;
	font-size: .7em;
	text-decoration: none;
	/* text-align: right; */
	z-index: 100;
	/* border: 1px solid brown;	*/
	}
	
#user b{
	color: #cc0033;
	font-weight: bold;
	}

/* **************** MAIN NAV BAR **************** */

#navbar ul {
	padding: 4px 0 4px 4px;
	/* _padding: 6px 0 0 0; */
	margin-left: 0;
	font: normal 1em;
	background-color: #ffcc33;
	}
	
#navbar ul li {
	list-style: none;
	margin: 0;
	display: inline;
	}
	
#abacus {
	padding-right: 40px;
	padding-left: 10px;
	}
	
#navbar {
	position: relative;
	/* _position: absolute; */
	clear: both;
	/* float: left; */
	width: 800px;
	font-size: .8em;
	_font-size: 1.0em;
	text-align: left;
	white-space: nowrap;
	color: black;
	padding: 0px 0px 0px 0px;
	/* _padding-top: 10px; */
	_padding-bottom: 0px;
	/* padding-top: 0px;
	padding-left: 10px; */
	margin-top: 0px;
	/* _margin-top: -100px; /* shows to IE win only */
	margin-bottom: 20px;
	_margin-bottom: 10px;
	margin-left: 0;
	margin-right: 0;
	z-index: 20;
	vertical-align: middle;
	/* background-color: #ffcc33; */
	/* border: 1px solid green; */
	}
	
#navbar a{
	padding-right: 10px;
	_font-size: .8em; /* show to IE only */
	font-weight: bold;
	
	}
	
#navbar a:hover {
	/* z-index: 30; */
	}
	
#logo {
	
	position: absolute;
	/* _position: relative; */
	clear: both;
	/* float:left; */
	margin-top: 30px;
	_margin-top: -50px;
	margin-left: 20px;
	margin-bottom: 5px;
	width: 48px;
	/* border: 1px solid blue; */
	z-index: 10;
	}
	
#navbar, #logo img {
	
	}
/* #navbar b { display: none; } */
	

/* **************** collumns **************** */


#left-col, #right-col {
	/* _clear: both; */
	/*_margin-top: 200px; */
	/* display: none; */
	}

#left-col {
	float: left;
	width: 580px;
	_width: 569px;
	margin: 0 10px 0 10px;
	/* border: 1px solid blue; */
	}
	
#right-col {
	float: right;
	width: 180px;
	_width: 169px;
	margin: 0 10px 0 0;
	/* border: 1px solid brown; */

	}	

/* **************** body main **************** */

/* **************** main boxes **************** */

#local-box {
	/* position: relative; */
	clear: both;
	border-right: 1px solid #ffcc33;
	border-top: 0px;
	border-bottom: 0px;
	background: url(images/corners/y-corner-tl-big.gif) top left no-repeat;
	/* height: 100px; */
	}
	
#savings-box {
	/* position: relative; */
	border-right: 1px solid #cc0033;
	border-top: 0px;
	border-bottom: 1px solid #cc0033;
	background: url(images/corners/r-corner-tl-big.gif) top left no-repeat;
	height: 200px; /* terrible hack I know - but works until I get something better */
	}	
	
#local-box #local-coupon {
	position: relative;
	float: right;
	width: 450px;
	_width: 440px;
	margin: 10px 10px 10px 10px;
	_margin-top: -75px; /* bad ie hack! Oh how we hat IE IE IEEEEEEEEEEE */
	vertical-align: top;
	border: 1px dotted #666666;
	}
	
#local box #local-coupon img {
	margin: 4px 4px 4px 4px;
	}

/* #ninety-ninety-local-left, #ninety-ninety-savings-left {
	border: 1px solid brown;
	height: 100px;
	
	} */

/* #left-col #ninety-ninety-local-left, #ninety-ninety-savings-left {
	border-right: 1px solid #ffcc33;
	border-top: 0px;
	border-bottom: 0px;
	background: url(images/corners/y-corner-tl-big.gif) top left no-repeat;
	height: 100px; 
	
	}*/

#ninety-ninety-local-logo {
	/* border: 1px solid brown; */
	}

#ninety-ninety-local-logo img, #ninety-ninety-savings-logo img {
	position: relative;
	float: left;
	width: 77px;
	/* clear: right; */
	/* clear: both; */
	padding: 10px 10px 10px 10px;
	/* border: 1px solid green; */
	/* z-index: 200; */
	/* display: none; */
	}
	
#ab99-savings-logo p {
	width: 77px;
	padding-left: 10px;
	
	}
	
#local-list {
	clear: both;
	/* border: 1px solid brown; */
	
	}
	
table.table-local {
position: relative;
	width: 100%;
	padding: 4px 4px 4px 4px;
	/* margin: 5px 5px 5px 5px; */
	/* border: 1px solid blue; */
	}
	
.table-savings {
	float: right;
	width: 483px;
	_width: 473px; /* width is 580px - circle logo width + margins/padding */
	margin-top: -79px; /* works with terrible 99 savings hack */
	position: relative;
	vertical-align:top;
	padding-right: 10px;
	/* border: 1px solid green; */
	}
	
table.table-local h2,
table.table-savings h2 {
	text-align:center;
	font-size: 1em;
	color: #666666;
	}

table.table-local h3,
table.table-savings h3 {
	font-size: .75em;
	}
	
table.table-local ul, 
table.table-savings ul {
	list-style: none;
	font-size: .75em;
	}
	
table.table-local ul h3, 
table.table-savings ul h3 {
	font-size: 1em;
	}
	
table.table-local li,
table.table-savings li {
	list-style: none;
	}
	
table-local li a,
table-savings li a {
	display: block;	
	}
	

	
#search {
		/* position: absolute;*/
		padding: 5px 10px 5px 10px;
		margin-bottom: 20px;
		background: #ffcc33 url(images/corners/y-corner-bl-filled.gif) bottom left no-repeat;
		text-align: center;
		/* z-index: 50;*/
		/* border: 1px solid blue; */
		vertical-align: middle;
		
		}
		
#search input {
	vertical-align: middle;
	}
	

/* **************** begin copy of main part **************** */


	
	
/* **************** end copy of old part **************** */

/* **************** right collumn begin **************** */


#whats-new, #signup, #contest, #coupon { margin-bottom: 10px; }


#coupon
		   {
	/* position: absolute;
	clear: both; */
	width: 170px;
	_width: 160px;
	border: 1px dotted #666666;
	/* background-color: #ffcc33; */
	/* height: 50px; */
	/* padding: 4px 4px 4px 4px; */
	/* margin-bottom: 10px; */
	}
	
#coupon p {
	padding: 4px 4px 4px 4px;
	}
	
#signup a img, #signup a:hover img {
	border: none;
	}
	
#whats-new {
	width: 170px;
	/* _width: 160px; */
	border: 1px solid #ffcc33;
	/* padding: 0px 2px 2px 2px; */
	vertical-align: top;
	}
	
#whats-new h3 {
	background-color: #ffcc33;
	padding: 2px 2px 2px 2px;
	margin: 0 0 0 0;
	text-transform: uppercase;
	text-align:center;
	font-size: 76%;
	color: #333333;
	}
	
#whats-new p {
	/* padding: 2px 2px 2px 2px; */
	padding: 0 0 0 0;
	}
	
#whats-new ul {
	/* margin-left: -20px; */
	margin: 0;
	padding: 0;
	font-size: 76%;
	list-style: none;
	color: #666666;
	/* border: 1px solid blue; */
	}
	
#whats-new ul li {
	margin: 0;
	}	
	
#whats-new ul li a {
	display: block;
	padding: 2px 2px 2px 2px;
	
	}
#signup {
	margin-left: 40px;
	margin-right: 40px; 
	}
	

/* **************** left collumn begin **************** */

#footer
	{
	clear: both;
	text-align: center;
	font-size: 10pt;
	padding-top: 25px;
	padding-bottom: 25px;;
	/* border: 1px solid grey; */

	}
	
/* **************** typography **************** */

a {
	text-decoration: none;
	/* font-weight: bold; */
	color: maroon;
	}
a:link {
	}
a:visited {
	}
a:active {
	}
a:hover {
	color: red;
	text-decoration: underline;
	}
	
h2 {
	
	}
	
p {
	font-size: 76%;
	}

HTML:

<!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>99 Abacus 11</title>

<link href="style-11.css" rel="stylesheet" type="text/css" />

</head>

<body>
<div id="container-top">

 <div id="topnav">
    <ul>
	  <li><a href="#">Home</a></li>
	  <li><a href="#">About Us</a></li>
	  <li><a href="#">FAQ</a></li>
	  <li><a href="#">Sign Up</a></li>
	  <li><div id="login-form">
	 <form id="login1" name="login" method="post" action="">
      <label>Login
        <input id="login2" type="text" name="name" maxlength="11" tabindex="1" />
      </label>
      <label>Password
        <input id="login3" type="password" name="password" maxlength="14" tabindex="2" />
      <input type="image" src="images/go-grey.gif" value="Submit" alt="Submit" tabindex="3" />
      </label>
    </form>
	</div> <!-- login-form -->
	</li>
	</ul>
 </div> <!-- topnav -->
 
  <div id="user"><b>Alviso Bill you've saved $7.77! </b> | <a href="#">My Account</a> | <a href="#">My    Settings </a>| <a href="#">Logout</a>  
  </div> <!-- user -->
</div> <!-- container top -->

<div id="container-nav">
  
  <div id="logo">
  <img src="images/99abacus_logo.gif" alt="99 Abacus Logo" width="48" height="45" longdesc="http://99abacus.com" />  </div> <!-- logo -->

  <div id="navbar">
    <ul>
	  <li id="abacus"><a href="#"><b>ABACUS</b></a></li>
	  <li><a href="#">What's New</a></li>
	  <li><a href="#">Community</a></li>
	  <li><a href="#">Coupons</a></li>
	  <li><a href="#">Daily Deal</a></li>
	  <li><a href="#">Weekly Winner</a></li>
	</ul>
  </div> <!-- navbar -->
</div> <!-- container nav --> 

<div id="container-main"> 
    <div id="left-col">
	  <div id="local-box">
	     <div id="ab99-local-logo"><img src="images/99local.gif" alt="99 Local" width="77" height="79" />
		 	<div id="local-coupon">
		         <table class="table-local">
	    <tr>
		  <td><img src="stock_photos/car_360393_yellow_1.jpg" alt="Save on Car Insurance" width="150" height="75" /></td>
		  <td>
			<h2>Save on car Insurance</h2>
			<p>Sunshinus mornus. Loren Ibsin Apleum. Habeus corpus Christi. Sunshinus mornus. Habeus corpus Christi. <b>(<a href="#">More...</a>]</b></p>		  </td>
		</tr>
	  </table>
		   </div> <!-- local coupon -->
		  </div> 
	     <!-- 99 local logo -->
	  	 <div id="local-list">
		 
		 <table class="table-local">
		     <tr><td colspan="3"><h2>Your one stop for Bay Area savings</h2></td></tr>
	    <tr>
		  <td>
		    <ul>
			  <li><b>San Francisco</b></li>
			  <li><a href="#">Habeus corpus Christi</a></li>
			  <li><a href="#">Sunshinus mornus</a></li>
			  <li><a href="#">Loren Ibsin Apleum</a></li>
			  <li><a href="#">Sevus Sinus Soonus</a></li>
			  <li>&nbsp;</li>
			  <li><b>(<a href="#">All San Francisco stores</a>)</b></li>		   
			 </ul>
		  </td>
		  <td>
			<ul>
			  <li><b>East Bay</b></li>
			  <li><a href="#">Habeus corpus Christi</a></li>
			  <li><a href="#">Sunshinus mornus</a></li>
			  <li><a href="#">Loren Ibsin Apleum</a></li>
			  <li><a href="#">Sevus Sinus Soonus</a></li>
			  <li>&nbsp;</li>
			  <li><b>(<a href="#">All East Bay stores</a>)</b></li>
			 </ul>
		  </td>
		  <td>
			<ul>
			  <li><b>South Bay</b></li>
			  <li><a href="#">Habeus corpus Christi</a></li>
			  <li><a href="#">Sunshinus mornus</a></li>
			  <li><a href="#">Loren Ibsin Apleum</a></li>
			  <li><a href="#">Sevus Sinus Soonus</a></li>
			  <li>&nbsp;</li>
			  <li><b>(<a href="#">All South Bay stores</a>)</b></li>
			 </ul>
		  </td>
		</tr>
	  </table>
		 
		 </div> <!-- local list -->

		 
	  </div> <!-- local box -->
	  <div id="search">
        <form id="form1" name="form1" method="post" action="">
          <label>Search local businesses
            <input name="textfield" type="text" size="20" />
          </label>
          <input name="image" type="image" value="Submit" src="images/go-yellow.gif" alt="Submit" />
          <label></label>
        </form>
      </div> 
	  <!-- search -->
	  
     <div id="savings-box">
	  <div id="ab99-savings-logo"><img src="images/99savings.gif" alt="99 Savings" width="77" height="79" /><br />				
	  </div>
	  <table class="table-savings">
	    <tr>
		  <td colspan="2">
		  <h2>Shop at your favorite web sites and save!</h2>		  </td>
	    </tr>
		<tr>
		  <td>
		    <ul>
              <li><b>Browse A-G</b></li>
			  <li><a href="#">Habeus corpus Christi</a></li>
		      <li><a href="#">Sunshinus mornus</a></li>
		      <li><a href="#">Loren Ibsin Apleum</a></li>
		      <li><a href="#">Sevus Sinus Soonus</a></li>
		      <li>&nbsp;</li>
			  <li><b>(<a href="#">See all sites A-G</a>)</b></li>
            </ul></td>
	      <!-- <td>
	        <ul>
              <li><b>Browse H-N</b></li>
			  <li><a href="#">Habeus corpus Christi</a></li>
	          <li><a href="#">Sunshinus mornus</a></li>
	          <li><a href="#">Loren Ibsin Apleum</a></li>
	          <li><a href="#">Sevus Sinus Soonus</a></li>
	          <br />
	          (<a href="#">See all sites O-N</a>)
          </ul></td> -->
		  <td>
	        <ul>
              <li><b>browse O-Z</b></li>
			  <li><a href="#">Habeus corpus Christi</a></li>
	          <li><a href="#">Sunshinus mornus</a></li>
	          <li><a href="#">Loren Ibsin Apleum</a></li>
	          <li><a href="#">Sevus Sinus Soonus</a></li>
	          <li>&nbsp;</li>
	          <li><b>(<a href="#">See all sites O-Z</a>)</b></li>
          </ul></td>
		</tr>
	  </table>
	 </div> <!-- savings box -->
	 
  </div> <!-- left collumn -->
  
  <div id="right-col">
	  <div id="signup"><a href="#"><img src="images/signup.gif" alt="Signup today! For FREE!" width="100" height="100" /></a></div>
	  <div id="whats-new">
	    <h3>What's New</h3>

		<ul>
		  <li><a href="#">99 Abacus buys Google</a></li>
	  	  <li><a href="#">99 Abacus buys Apple</a></li>
	  	  <li><a href="#">99 Abacus buys 66 Abacus</a></li>
		</ul>
	  </div> 
	  <div id="contest"><a href="#"><img src="images/red-shell.jpg" alt="FREE weekly Cruise Giveaway"  /></a></div>
	  <div id="coupon">
	  <img src="stock_photos/497664_coffee_beans.jpg" width="170" height="150" alt="Coffee sale. Save 10% today." />
    <p>Save 10% on your next order of fresh roasted
      bolivian coffee beans at CuriousCoffee.com. The
      world's best coffee roasting company.</p>
	  </div>
  </div> <!-- right collumn -->
  
   <div id="footer">99 Abacus &copy; 2006</div>
</div> <!-- container main -->
</body>
</html>

I'm also having a similar problem with a search box in the middle of the page. My therory is that this has something to do with the form tags as that os iinvolved with both elements? But beyond that nothing else I've tried has been successful.

[lostseed]

Looks best in FireFox, IE 6 Win appears good, only the yellow bar is a pixel off on the left.
In Opera's latest version it appears good, but the shadows around the page are missing until I scroll, which is really strange.

You are using Relative positioning, have you tried absolute? That may make a difference, but this is more an area for experts. I have a lot of trouble in cross-browsers.

[Tyssen]

It's the margin on #topnav ul which is affecting the height.

[roballoo]

Strange. That didn't seem to help the problem. There was also a margin on #topnav li. That didn't seem to do the trick either. I'll keep plugging away, but any other ideas?

Lostseed ~

I saw the 1 pixel problem on my PC buyt on my wife's laptop it was fine. We were both on the same version of IE but she is on Win 98 and I'm in XP pro. Very strange. I also noticed the Opera problem. It doesn't duplicate on Mac side though. Even stranger.

[Kravvitz]

Does this help?

#topnav ul {
	padding: 0;
	_padding: 6px 0 0 0;
	margin: 0;
	font-size: 1em;
	}