Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Nov 2006
    Posts
    94
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Not aligning properly in FF

    My site displays fine in IE, but the section labeled "bottom" appears in the top right in FF. Here is the style:
    Code:
    #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:
    Code:
    <!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
    Need help with your tennis game visit the Chattennis.com tennis forums, tennis chat, and tennis articles.

  • #2
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Code:
    #main {
    	width: 950px;
    	padding: 0px;
    	overflow: hidden;
    }
    To learn more: http://www.quirksmode.org/css/clearing.html

  • #3
    New Coder
    Join Date
    Nov 2006
    Posts
    94
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks, that perfectly solved the problem.
    Need help with your tennis game visit the Chattennis.com tennis forums, tennis chat, and tennis articles.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •