browsers / layout all messed up - HTML Forums

bunny1 · 11-06-2009, 10:20 AM

Hi Alll

I have no idea what is going on with my layout. This page looks fine on my laptop on IE7. It looks fine on my friends latop on IE7. But it looks terrible on other peoples IE7. And then it totally messes up for other browsers.
What do i need to do??
http://www.inafrenzy.com/secure/site/

Code:

<!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=utf-8" />
<title>Inafrenzy Welcome</title>
<link href="style.css" rel="stylesheet" type="text/css" />  
</head>  
  
<body><div id="wrap">

				<div class="style1" id="top">Join!  &nbsp;&nbsp;|&nbsp;&nbsp;   Sign In  &nbsp;&nbsp;|&nbsp;&nbsp;  Help</div>   
                
                <div id="nav">
       	        	<img src="images/navigation.png" alt="" align="texttop" />                </div>
                
                <div id="welcome">
       	      		<img src="images/welcome-to-inafrenzy.jpg" alt="" align="top" />                </div>
 				
                <div id="banner">
        			<img src="images/banner.png" alt="" />        		</div>

 				<div id="search">
	    			<input name="textfield" type="text" id="textfield" value="" size="14" />&nbsp; <img src="images/search.png" align="middle">        		</div>
        
  				<div id="Haves" class="style2">
				   <p class="style2">Recently Added <br>Haves</p>
    			</div>
  				<div id="Wants" class="style3">
  				  <p class="style3">Recently Added <br />
  				    Wants</p>
  </div>
  			<div id="main">
                  
                  	<div id="leftcolumn">
                            <p><img src="images/video.png" alt="" align="bottom" /></p>
							<p></p>
                        	<p><img src="images/justjoined.png" alt="" align="texttop" /></p>
                        	<p><img src="images/newusers.png" alt="" align="texttop" /></p>
							<p></p>
                            <p><img src="images/mostpopular.png" alt="" align="texttop" /></p>
                        	<p><img src="images/mostpopularcontent.png" alt="" align="texttop" /></p>
                    </div>
                    
                    <div id="middlecolumn">
                    		<p><img src="images/middlecontent.png" alt="" align="texttop" /><br /></p>
                          	<p><img src="images/donebarters.png" alt="" /><br /></p>
                          	<p><img src="images/donebarterscontent.png" alt="" /><br /></p>
                    </div>
                    
                    <div id="rightcolumn">
             				<p><img src="images/alerts.png" alt="" align="texttop" />
                          	<p><img src="images/categories.png" alt="" /></p>
                        	<p><img src="images/tags.png" alt="" /></p>
                        	<p align="center"> <img src="images/tagwords.png" alt="" align="absmiddle" /></p>
                            <p><img src="images/ad.png" alt="" /></p>
                        	<p><img src="images/stalkuseverywhere.png" alt="" /></p>
                        	<p><img src="images/stalk.png" alt="" /></p>
                    </div>                
  </div>
  				<div id="footer" class="style4" align="left"> &nbsp;  ©2009 Inafrenzy.com. All rights reserved.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;About   |   Site Map   |   Blog   |   Terms &amp; Conditions   |   Privacy Statement   |   Help</div>
</div></body></html>

Code:

@charset "utf-8";

body {   
    margin:0px auto; 
	padding:0px;   
	text-align: left;
    background: #96B4CE;
}   
* {
	margin: 0;
	padding: 0;
	border: 0;
}
#wrap {   
    background:#96B4CE url(images/bg2.jpg) no-repeat;   
	background-position: top; 
	background-position: center;
	text-align:center;	
	height:1418px;
	margin: 0 auto;
	padding: 0;
}
#top {
	position:relative;
	margin-left:780px;
	top:6px;
	clear: both; 
} 
#nav {
	margin: 0px auto 0;
	position:relative;
	clear: both;
	top: -10px;
	z-index:2;
}
#welcome {
	margin: 0px auto 0;
	position:relative;
	clear: both;
	margin-left:6px;
	top: -4px;
}
#main {
	margin: 0px auto 0;
	position:relative;
	float:left;
	margin-top:-85px;
	clear: both;
}
#search {
	margin-left:690px;
	top:-150px;
	z-index:2;
	display: inline;
	position:relative;
	clear: both; 
}
#leftcolumn {
	margin: 0px auto 0;
	position:relative;
	clear: both;
	margin-left:190px;
}
#middlecolumn {
	margin-left:472px;
	position:relative;
	clear: both;
	margin-top:-1007px;
}
#rightcolumn {
	margin-left:822px;
	position:relative;
	clear: both;
	margin-top:-970px;
}
#Haves {
	position:relative;
	margin-left:-140px;
	top:-13px;
	z-index:2;
	clear: both;
}
#Wants {
	position:relative;
	margin-left:185px;
	top:-45px;
	z-index:2;
	clear: both;
}
#banner {
	position:relative;
	margin-left:440px;
	margin-top:-60px;
	top:-200px;
	clear: both; 
}
#footer {
	position:relative;
	margin-left:180px;
	margin-top:24px;
	clear: both; 
}

.style1 {font-family: "Arial Rounded MT Bold"; font-size: x-small; color: #FFFFFF;}
.style2 {font-family: "Arial Rounded MT Bold"; font-size: 14px; color: #FFFFFF}
.style3 {font-family: "Arial Rounded MT Bold"; font-size: 14px; color: #999999}
.style4 {font-family: "Arial"; font-size: 11px; color: #747474}

Tzfyr · 11-10-2009, 11:23 AM

It looks fine on my Firefox. Do you have any screenshots where it isn't working, or some explanation of exactly what's happening? That might help pinpoint the problem as there is a lot of code there.