...

View Full Version : Not aligning properly in FF



phpnewb
07-02-2007, 02:13 AM
My site displays fine in IE, but the section labeled "bottom" appears in the top right in FF. Here is the style:

#page { width:900px;
margin 0px;
padding:0px;

height:1000px;
background-image: url(img/tile.jpg);
background-repeat: repeat-x;

}
#header {
width:950px;
height:125px;


margin-bottom:5px;



}
#main {
width:950px;
padding:0px;

}





#main-left { width:160px;
float:left;
clear:left;
height:400px;
background:white;



}
#main-center {width:400px;
height:267px;
margin-left:23%;
border: 22px solid #4973AB;
border:1px solid #E3E3E3;


}

#main-right {
position:relative;
bottom:10px;


font-family:arial;

margin-top:0px;
width:200px;
margin-right:75px;
padding:0px;
float:right;
clear:right;
margin-bottom:0px;

}
#main-right1 {



font-family:arial;

margin-top:0px;
width:200px;
margin-right:75px;
padding:0px;
float:right;
clear:right;


}
#bottom {

margin-top:0px;

padding:10px;

margin-left:10px;
margin-right:10px;


}
#links {

background-color:#4973AB;

margin: 0 10px;

}

#username {
margin:0px;
padding:0px;
width:90%;
}
#password {
margin:0px;
padding:0px;
width:90%;

}
#submit-reset {

width:90%;
margin-right:auto;
margin-left:auto;

}
hr {

height:1px;
width:100%;
}
.roundedtop {
background: url(img/toprightcornerlinks1.jpg) no-repeat top right;
}
.roundedbottom {
background: url(img/bottomrightcornerlinks1.jpg) no-repeat top right;
}
.roundedtop1 {
background: url(img/toprightcornerlinks1.jpg) no-repeat top right;
}
.roundedbottom1 {
background: url(img/bottomrightcornerlinks1.jpg) no-repeat top right;
}
.roundedtop2 {
background: url(img/toprightcornerlinks1.jpg) no-repeat top right;
}
.roundedbottom2 {
background: url(img/bottomrightcornerlinks1.jpg) no-repeat top right;
}
img.corner {
width: 15px;
height: 15px;
border: none;
display: block !important;
}
.logo_img {
float:left;
clear:left;

}

#divheader {
border: 1px solid #4973AB;
padding-top:15px;
background: url("img/divheader1.jpg") no-repeat;

}

#main-center1 {

font-family:arial;
border: 1px solid #E0E0E0;
border-top:none;
border-left:none;
border-bottom:none;

float:left;
clear:left;
width:600px;
padding:0px;
margin-bottom:5px;
margin-top:0px;
height:525px;
}
p.opening {
margin: 0.5em;
padding:10px;

}
h2 {
margin-top:0px;
padding:0px;
}
#divheader1 {
border: 1px solid #4973AB;
padding-top:15px;
background: url("img/divheader1.jpg") no-repeat;
}



.roundedtopa {
background: url(img/righttopcornerlink3.jpg) no-repeat top right;
}
.roundedbottoma {
background: url(img/rightbottomcornerlink3.jpg) no-repeat top right;
}
.roundedtopb {
background: url(img/toprightcornerlink4.jpg) no-repeat top right;
}
.roundedbottomb {
background: url(img/bottomrightcornerlink4.jpg) no-repeat top right;
}

#table {
float:right;
clear:right;
width:800px;


height:20px;



}
h3.header { margin:0px;
color:#4973ab;
}
#head { margin:0px;
padding:0px;
float:right;
clear:right;

position:relative;
bottom:40px;
right:35px;



}
hr {
color:#4973AB;
height:1px;
width:90%;
}
h2.opening {background: url(img/sitenewsbackground.jpg);
}

h2.openingindex {color:black;




}
p.openingindex {color:black;
margin: 0.5em;
padding:10px;
}
#login { position:relative;
right:85px;
top:4px;
padding:0px;
width:150px;
margin:0px;
padding:0px;

float:right;
}
#topimg {position:relative;
top:10px;
margin-bottom:0px;
padding:0px;
float:left;
clear:left;
}
#slideshow {
float:left;
clear:left;
width:600px;
border: 1px solid #E0E0E0;
border-top:none;
border-left:none;
border-bottom:none;

margin:0px;
padding:0px;
}
#ranks {font-family:arial;

margin-right:30px;
position:relative;
bottom:0px;
padding:0px;
float:right;
clear:right;
margin-bottom:10px;
}
td {border-color:#4973AB;

}
table {border-color: rgb(73, 115, 171);
}
h2 {padding:0px;
margin:0px;}
h2.head {color:white;}

a:link.navlink, a:visited.navlink, a:active.navlink {font-family:arial; text-decoration:none; color:white;}
a:hover.navlink {text-decoration:none; color:orange ;}
a:link.navlink1, a:visited.navlink1, a:active.navlink1 {font-family:arial; text-decoration:none; color:#4973ab;}
a:hover.navlink1 {text-decoration:none; color:orange ;}

#left {border: 1px solid #E0E0E0;
border-top:none;
border-bottom:none;
border-left:none;
width:600px;
margin-bottom:5px;
margin-left:30px;
}
hr.maincenter {color:#E0E0E0;
width:85%;
margin:0px;
padding:0px;

}
p.maincenter {padding:0px;
margin:0px;
position:relative;
top:5px;
}
Here is the html for the page:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Welcome to Chattennis.com- The place for tennis forums</title>
<meta name="keywords" content="tennis chat, tennis discussion, tennis forums, tennis boards, tennis board, tennis forum, tennis information, tennis tips, tennis help, tennis training, tennis articles, tennis strategy, tennis tactics">
<meta name="description" content="Welcome to Chattennis.com. We are your main source for tennis forums, message boards, tennis news, tennis tips, and tennis strategy.">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<style type="text/css">

</style>



<link rel="Shortcut Icon" href="/favicon.ico">


<script type="text/javascript">
<!--
var image1=new Image()
image1.src="img/net.jpg"
var image2=new Image()
image2.src="img/tennisplayer.jpg"
var image3=new Image()
image3.src="img/ballandnet.jpg"
var image4=new Image()
image4.src="img/tennisnet.jpg"
//-->
</script>


</head>

<body>
<div id="page">



<div id="header">
<img src="img/goodbanner.jpg">


<div id="head">
<div id="table">
<table cellspacing="4" border="0">
<tr>
<td><a class="navlink" href="index.html"><font size="3">Home</font></a></td>
<td width="1"><img src="img/links.jpg" width="1" alt=""></td>
<td><a class="navlink" href="phpBB2/index.php">Forums</a></td>
<td width="1"><img src="img/links.jpg" width="1" alt=""></td>
<td><a class="navlink" href="articles.html">Articles</a></td>

<td width="1"><img src="img/links.jpg" width="1" alt=""></td>
<td><a class="navlink" href="tipoftheday.html">Tip of the Day</a></td>
<td width="1"><img src="img/links.jpg" width="1" alt=""></td>
<td><a class="navlink" href="phpBB2/viewforum.php?f=2">News</a></td>








<td width="1"><img src="img/links.jpg" width="1" alt=""></td>
<td><a class="navlink" href="phpBB2/profile.php?mode=register">Register</a></td>
<td width="1"><img src="img/links.jpg" width="1" alt=""></td>
<td><a class="navlink" href="links.html">Links</a></td>
</tr>
</table>
</div>
</div>
</div>





<div id="main">



<div id="main-right">
<p class="maincenter"><font size="6" color="#4973ab">Login</font></p>
<hr class="maincenter" align="left">
<center>



<form method="post" action="phpBB2/login.php">

Username <input type="text" class="post" name="username" size="20">
<div id="password">
Password <input type="password" class="post" name="password" size="20">
Remember me <input type="checkbox" name="autologin" />
</div>

<div id="submit-reset">
<input type="submit" value="Log in" class="mainoption" name="login"> <br>
<input type="hidden" name="redirect" value="" />
Not a member <a class="navlink1" href="phpBB2/profile.php?mode=register">Register</a><br>
<font size="2">It's free and easy.</font><br>
<a class="navlink1" href="phpBB2/profile.php?mode=sendpassword"><font size="2">Forgot your password</font></a>

</div>
</form>

</center>


</div>

<div id="slideshow">
<img src="firstcar.gif" name="slide">
<script type="text/javascript">
<!--
//variable that will increment through the images
var step=1
function slideit(){
//if browser does not support the image object, exit.
if (!document.images)
return
document.images.slide.src=eval("image"+step+".src")
if (step<3)
step++
else
step=1
//call function "slideit()" every 2.5 seconds
setTimeout("slideit()",6000)
}
slideit()
//-->
</script>


</div>


<div id="main-center1">
<p class="maincenter"><font size="6" color="#4973ab">Site News</font></p>
<hr class="maincenter" align="left">
<p class="opening">Welcome to Chattennis.com your one stop place for tennis information and discussion. We have a wealth of information in our articles and on our forums. We also have a tip of the day section with many helpful tips.
</p>
<p class="opening">June 27, 2007- Ihave redesigned the site once again. Also, I have added a few articles: "Choosing the right racquet" and
"The Split Step." Make sure to check out our forums. You can find lots of helpful tips on strategy and technique, but you can also discuss tennis in general.</p>
</div>

<div id="main-right1">
<p class="maincenter"><font size="6" color="#4973ab">Forum Topics</font></p>
<hr class="maincenter">
<script language="JavaScript" type="text/javascript" src="http://www.chattennis.com/phpBB2/topics_anywhere.php?mode=show&f=uMiwzLDYsNyw4LDEx&n=10&r=y&sr=y&so=d&b=non&lpb=0&lpd=0&lpi=y&br=y&ch=30&chw=e&cl=navlink1&ct=arial"></script>
</div>
</div>
<div id="bottom">
<center>
<table cellspacing="4" border="0">
<tr>
<td><a class="navlink1" href="index.html"><font size="2">Home </font></a></td><td width="1"><img src="img/links.jpg" width="1" alt=""></td><td><a class="navlink1" href="contactus3.php"><font size="2">Contact Us</font></a></td><td width="1"><img src="img/links.jpg" width="1" alt=""></td><td> <a class="navlink1" href="privacypolicy.html"><font size="2">Privacy Policy</font></a></td><td width="1"><img src="img/links.jpg" width="1" alt=""></td><td> <a class="navlink1" href="termsofuse.html" target="_blank"><font size="2">Terms of Use</font></a></td></tr> </table> </center>


</div>

</div>


<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-1180536-1";
urchinTracker();
</script>
</body>
</html>

Thanks,
Richard

koyama
07-02-2007, 02:49 AM
#main {
width: 950px;
padding: 0px;
overflow: hidden;
}

To learn more: http://www.quirksmode.org/css/clearing.html

phpnewb
07-02-2007, 01:25 PM
Thanks, that perfectly solved the problem.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum