what is going on with the layout? - HTML Forums

bunny1 · 11-06-2009, 10:19 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}

maneetpuri · 11-07-2009, 06:28 AM

Hi.

You have defined the margin left for the "left, middle and right" column.
For the left colum it's around 400px.

Which is fine when you see on laptop bacause the laptop resolution is wide but when you see it on a normal resoultion it will distort in all the browsers.

I checked the pages in 1280 resolution and in 1024.
It's coming fine in all browsers in 1280 but it's distorted in all the browser in 1024.

Hope This Helps,
Cheers,

Web Designing Company

bunny1 · 11-07-2009, 06:54 AM

What do you suggest i do? remove the left margin for all three columns?
im not sure what to do that will work for all resolutions

thanks for the help

bunny1 · 11-07-2009, 07:58 AM

I think ive fixed it for all screen dimensions now, however i still have this issues of the search box and footer being out of line in FF3 and chrome but look fine in IE7

Thanks for the tips above