Alignment issues

[Geoserv]

I am getting two different looks from Firefox and IE7.

IE7:


Firefox:


Here is the CSS that controls that section:

#user-summary{float:left}

#user-summary div.user-image{float:left;position:relative;}

#user-summary div.user-profile{float:left;background:#f6f6f6;margin-left:3px;padding:14px 18px;width:300px}
 
#user-summary div.user-profile h3{font-size:.85em;line-height:1.4;font-weight:normal;position:relative}

#user-summary div.user-profile h3 strong{color:#333}

#user-summary div.user-profile h3 a{font-weight:bold}

#content p.user-desc{width:460px;overflow:hidden;padding-top:10px;clear:both}

Here is the HTML:

<div id="content" id="xnews-4" >
	<h1 class="title-with-star" id="ls_thetitle-4">

							 
				  <a href="/answers/General/Top_Stumbles__Published_Stumbles/">Top Stumbles / Published Stumbles</a>
							        
		</h1>
		

			
			<ul class='star-rating' id="xvotes-4">
				<li class="current-rating" style="width: 125px;" id="xvote-4"></li>
				<span id="mnmc-4">
					<ul>
						<li><a href="javascript:vote(0, 14, 4, '4c43edcbb3a5ebbaa0e505b1eefe06ca',2)" class='one-star'>1</a></li>
						<li><a href="javascript:vote(0, 14, 4, '4c43edcbb3a5ebbaa0e505b1eefe06ca',4)" class='two-stars'>2</a></li>

						<li><a href="javascript:vote(0, 14, 4, '4c43edcbb3a5ebbaa0e505b1eefe06ca',6)" class='three-stars'>3</a></li>
						<li><a href="javascript:vote(0, 14, 4, '4c43edcbb3a5ebbaa0e505b1eefe06ca',8)" class='four-stars'>4</a></li>
						<li><a href="javascript:vote(0, 14, 4, '4c43edcbb3a5ebbaa0e505b1eefe06ca',10)" class='five-stars'>5</a></li></ul>
									</span>
</li>
			</ul>
		
	
	<br /><br />
		

		<div id="user-summary">

<div class="user-image">
							<img src="http://images.websnapr.com/?url=www.topstumbles.com&amp;size=T" alt="Image" />
			<br /><a href="javascript://" onclick="show_hide_user_links(document.getElementById('userlinks-4'));">		
			<span id="ls_avatar-4"><img src="http://www.newsdots.com/answers/avatars/Gravatar_30.gif" alt="Avatar" /></span>			</a>	<br /><span id="userlinks-4" style="display:none;">
			<a href = "/answers/user/view/profile/god">View profile</a>  
							</span>

			<br/>

			</div>

<div class="user-profile">
<h3><strong>URL:</strong>
									<a href="/answers/out/Top_Stumbles__Published_Stumbles" >www.topstumbles.com</a>
							</h3>

<h3><strong>Posted by </strong>
							
					<a href="javascript://" onclick="show_hide_user_links(document.getElementById('userlinks-4'));">
							<span id="ls_link_submitter-4">god</span></a>

			
			<span id="ls_timeago-4"> 4 days ago			
				
			</span>
</h3>

		
							<h3><strong>Category</strong>: <a href="/answers/category/General">General</a></h3>
							
					</div>

<br /><br />
		
	
<br /><br />

				<div style="width: 300px; margin: 5px 10px 10px 10px;"><a href="/answers/images/img_14.jpg" title="Top Stumbles / Published Stumbles" class="thickbox"><img border="1" src="/answers/modules/image_upload/plugins/thumb.php?img=img_14.jpg&w=300&h=450" alt="" /></a><center><span style="font: normal 10px verdana, arial;">(click image)</span></center></div></p>
	</div>
</div>

I want it to look the way it does in Firefox.

Sorry for the length.

You can see it live at http://www.newsdots.com/answers

Thanks for looking and offering any potential aid.

Geoserv.

[buildakicker]

Have you tried:

#user-summary{float:left; clear:both;}

[Geoserv]

Can't believe I didn't think of that.

That worked like a charm.

Thanks alot.

Geoserv

[buildakicker]

OH YEAH! That's what the forums are for. I'm glad it works!