...

View Full Version : browsers / layout all messed up



bunny1
11-06-2009, 04:23 PM
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/


<!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>




@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}

abduraooft
11-06-2009, 04:27 PM
Start with fixing the errors in your markup ,see http://validator.w3.org/check?uri=http%3A%2F%2Fwww.inafrenzy.com%2Fsecure%2Fsite%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

drhowarddrfine
11-06-2009, 05:10 PM
It doesn't look right in more modern browsers either.

bunny1
11-06-2009, 11:20 PM
Thanks for the suggestion

I have checked my mark-up and fixed it.

However i dont know where to go from here. it looks good in my IE7 but im not sure about other people's

And how do i ensure it looks good in other browsers without messing it up for IE7?

Excavator
11-07-2009, 02:12 AM
Hello bunny1,
Try making your #wrap fit the square on your background image, instead of the whole image. You might want to put the image on body so you can see the outside edges but the square is what's supposed to wrap your #top, #nav, ...

Try this just for starters:

#wrap {
width: 920px;
background:#96B4CE url(images/bg2.jpg) no-repeat;
text-align:center;
margin: 0 auto;
position: relative;
}

of course all your ap elements will need to be re-positioned.


[edit] Good job on the valid code by the way!</edit>

bunny1
11-07-2009, 02:02 PM
ive managed to fix this

but i still have problems with the footer and search box

they look fine in IE7 but not in FF3 and Chrome

drhowarddrfine
11-07-2009, 04:45 PM
they look fine in IE7 but not in FF3 and Chrome

How could that happen since you, of course, used FF3 or Chrome to create the site?

Excavator
11-07-2009, 05:26 PM
Hello bunny1,
Does your footer work if it's under the wrap?
Have a look at doing it like this:
<p align="center"> <img src="images/tagwords.png" alt="" align="middle"></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 class="push"></div>

</div>
<!--end wrap--></div>
<div id="footer" class="style4" align="left"> <p>&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</p></div>

bunny1
11-07-2009, 11:57 PM
Thanks Excavator. I managed to fix it.
I want to thank you for all your help but im not sure how to send a "thanks"??

Excavator
11-08-2009, 12:08 AM
Thanks Excavator. I managed to fix it.
I want to thank you for all your help but im not sure how to send a "thanks"??

Look to the bottom right of posts in the active forum. There is a "Thank user for this helpful post" button.

I'm glad you got it fixed!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum