PDA

View Full Version : Footer too low


bunny1
07 Nov 2009, 06:30 AM
Hi

I am trying to make my page work across different browsers
it works for IE7 now
but the footer and is too high in FF3 and in chrome the footer and search box are not aligned properly
im not sure what i need to do to fix it
here is the link http://www.inafrenzy.com/secure/site/

here is the 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="top" /> </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" style="height: 19px;" value="" size="14" />&nbsp; <img src="images/search.png" align="middle" alt="search"/> </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="top" /></p>
<p><img src="images/newusers.png" alt="" align="top" /></p>
<p></p>
<p><img src="images/mostpopular.png" alt="" align="top" /></p>
<p><img src="images/mostpopularcontent.png" alt="" align="top" /></p>
</div>

<div id="middlecolumn">
<p><img src="images/middlecontent.png" alt="" align="top" /><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="top" /></p>
<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="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>
<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>
</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;
width: 400px;
}
#search {
margin-left:690px;
top:-145px;
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 {
margin:0;
padding:0
position:relative;
padding-top:10px;
text-align:center;
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}


thanks!