Another problem with IE7

Hi, I'm testing THIS theme and work ok with IE6 and FireFox but don't with IE7.

With IE7 I see this:



HTML

		<div id="header">
			<p id="top_info">Browse <a href="#">Today's favorites</a> or <a href="#">All time favorites</a>.<br />Please <a href="#">Log in</a> to share and download files.</p>
			
			<div id="logo">
				<h1><a href="#" title="Centralized Internet Content">Internet <span class="title">Sharing</span></a></h1>
				<p>What do you want to share today?</p>
			</div>
		</div>
					
		<div id="tabs">
			<ul>	
				<li><a href="#" accesskey="m"><span class="key">M</span>usic</a></li>
				<li><a class="current" href="#" accesskey="v"><span class="key">V</span>ideos</a></li>
				<li><a href="#" accesskey="r">A<span class="key">r</span>chives</a></li>
				<li><a href="#" accesskey="i"><span class="key">I</span>mages</a></li>
				<li><a href="#" accesskey="d"><span class="key">D</span>ocs</a></li>
				<li><a href="#" accesskey="a"><span class="key">A</span>ll</a></li>
			</ul>
			<div id="search">
				<form method="post" action="?">
					<p><input type="text" name="search" class="search" /> <input type="submit" value="Search" class="button" /></p>
				</form>
			</div>
		</div>
					
		<div class="gboxtop"></div>
		<div class="gbox">
			<p><a href="#">Lorem ipsum dolor</a> sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex. Ut wisi enim ad minim veniam, quis nostrud <a href="#">exerci tation</a> ullamcorper suscipit lobortis nisl ut aliquip ex.</p>
		</div>

HTML:

CSS

/* header */
#header { height: 75px; }
#logo { padding: 15px 0 0 8px; }
#logo p { margin: 0; padding: 0 0 0 10px; color: #808080; background: #fff; }
#top_info { float: right; width: 570px; margin: 20px 5px 0 0; text-align: right; }

/* horizontal tabbed menu */	
#tabs { background: #fff url(images/bigbox.gif) no-repeat top left; color: #000;  height: 64px; text-align: center; padding: 0 0 0 210px; }
#tabs li { display: inline; height: 45px; }
#tabs li a { float: left; background: #fff url(images/barbg.gif) no-repeat; color: #808080; padding: 7px 0; width: 82px; text-align: center; font-weight: bold; text-decoration: none; }
#tabs li a:hover { background: #fff url(images/barcurrent.gif) no-repeat; color: #000; }	
#tabs li a.current { background: #fff url(images/barcurrent.gif) no-repeat; color: #2C71AE; }	
.key { text-decoration: underline; }

/* search form */
#search { 
	float: left;
	clear: both;
	color: #000;
	background: #fff url(images/searchbg.gif) no-repeat;
	padding: 14px 0 20px 5px;
	width: 500px;
	margin: 5px 0 0 0;
}
	#search p { padding: 0; margin: 0; }


/* grey subheader */
.gboxtop { clear: both; height: 8px; background: #dedede url(images/gboxtop.gif) no-repeat; color: #000; }
.gbox { background: #dedede url(images/gbox.gif) no-repeat bottom left; color: #444; padding: 1px 13px 7px 13px; margin: 0 0 20px 0; }
.gbox p { padding: 7px 0; margin: 0;}

Code (markup):

Can you help me to fix?

 

Most likely there is padding on the form.

 

Part of the problem is the inproper and unsemantic use of the HTML markup. This can be fixed, but it won't be easy without a complete re-write of the HTML and CSS code.