On my site (www.gamersinsaninty.com no typo) the main content box which is on the right of the left boxes is where it is suppsoed to be in ie6, ie7, opera, ff2, but not ff3. i know ff3 is a beta, but i woiuld still like to fix this problem. I have my content div (the right box) set to float:left. When i do this, the div appears at the bottom of the page under the left boxes. When i take off the float, it displays as it should in ff3, but is messed up in other browsers. Can someone tell me how i can undo the float in ff3, or to fix this problem so it displays correctly. heres my code and css css body { background: #901f1f; margin: 0px; padding: 0px; } #container { position: relative; left: 50%; margin-left: -476px; /*half the width of the div */ width: 953px; height: auto; } #header { background:url(images/header.gif) no-repeat; width: 953px; height: 223px; } #nav { float:right; margin-right:65px; margin-top:15px; width:502px; } a { color:#cc0000; font-size:10px; font-family:Verdana, Arial, Helvetica, sans-serif; text-decoration:none; } a:hover { color:#cc6666; } a.left { margin-left:8px; } a.nav { color:#ead5d4; font-size:12px; font-weight:bold; margin-right:16px; } a.nav:hover { color:#ffffff; } #main { float:left; background:url(images/content.gif) repeat-y; width: 953px; min-height: 35px; padding-bottom:10px; } #leftstuff { float:left; margin-left:27px; } #donate_left { background:url(images/donate_left.gif) no-repeat; width:231px; height:42px; } #community_left { background:url(images/community_left.gif) no-repeat; width:231px; height:51px; } #members_left { background:url(images/members_left.gif) no-repeat; width:231px; height:51px; } #content { float:left; } .left_box_mid { background:url(images/left_box_mid.gif) repeat-y; width:231px; min-height:30px; } .left_box_bot { background:url(images/left_box_bot.gif) no-repeat; width:231px; height:3px; } .loginrow{ font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; margin:2px 0 2px 8px; } .formrow{ font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; float:left; width:555px; margin:2px 0; } p { margin:3px; padding:0; font-size:10px; font-family:Verdana, Arial, Helvetica, sans-serif; } span { font-size:10px; font-family:Verdana, Arial, Helvetica, sans-serif; } span.content { margin:3px; } span.title { font-weight:bold; } span.left { margin-left:8px; } .news { display:inline-table; background:#ffffff; padding:2px; margin:0 0 10px 5px; width:658px; min-height:40px; } .news_title { display:inline-table; background:#E2E2E2; padding-bottom:4px; padding-left:5px; /padding-top:4px; width:653px; } #footer { background:url(images/footer.gif) no-repeat; width: 953px; height: 18px; clear:both; } Code (markup): html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Gamers Insanity</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <link href="css.css" rel="stylesheet" type="text/css"> </head> <body> <div id="container"> <div id="header"> <div id="nav"><a href="/index.php" class="nav">Home</a><a href="/roster.php" class="nav">Roster</a><a href="/matches.php" class="nav">Matches</a><a href="#" class="nav">Sponsors</a><a href="#" class="nav">Media</a><a href="http://forum.gamersinsaninty.com" class="nav">Forums</a><a href="/servers.php" class="nav">Servers</a><a href="/contact.php" class="nav">Contact</a> </div> </div> <div id="main"> <div id="leftstuff"> <div id="donate_left"></div> <div class="left_box_mid"><span class="left">This is a test.</span> </div> <div class="left_box_bot"></div> <div id="community_left"></div> <div class="left_box_mid"> <?php $user_id = $user->data['user_id']; if($user->data['user_id'] != ANONYMOUS) //If the user isnt a guest { $rank_id = $user->data['user_rank']; $result = mysql_query("SELECT * FROM phpbb_ranks WHERE rank_id='$rank_id'") or die(mysql_error()); while($row = mysql_fetch_array($result)) { if(($row['rank_title']{0} == 'A') || ($row['rank_title']{0} == 'E') || ($row['rank_title']{0} == 'I') || ($row['rank_title']{0} == 'O') || ($row['rank_title']{0} == 'U')) { $an = "an"; } else { $an = "a"; } echo "<span class=\"left\">Hello ".$user->data['username']."!</span><br><span class=\"left\"> You are ".$an." ".$row['rank_title'].".</span>"; } echo '<br><br><a href="'.append_sid($phpbb_root_path .'ucp.php?mode=logout&sid='.$user->session_id).'" class="left">Logout</a> <span>|</span>'; $con = mysql_connect("p50mysql141.secureserver.net","gamers_forum","Clarefire1"); if (!$con) { die('Could not connect: ' . mysql_error()); } mysql_select_db("gamers_forum", $con) or die(mysql_error()); $result = mysql_query("SELECT * FROM phpbb_profile_fields_data WHERE user_id='$user_id' ORDER BY user_id") or die(mysql_error()); while($row = mysql_fetch_array($result)) { if($row[pf_admin_panel] == '1') { ?> <a href="/admin">Go to admin panel</a> <?php } } mysql_close($con); } else { ?> <form action="/phpBB3/ucp.php?mode=login" method="post" enctype="multipart/form-data"> <div style="text-align:center;"><span class="left">Please <strong>login</strong> below, or <a href="/forum/ucp.php?mode=register">register</a>.</span></div> <div class="loginrow"> <div style="float:left; width:64px; line-height:18px;">Username:</div> <div style="float:left; width:120px;"> <input name="username" type="text" id="user" class="txt_input"> </div> </div> <div class="loginrow"> <div style="float:left; width:64px; line-height:18px;">Password:</div> <div style="float:left; width:120px;"> <input name="password" type="password" id="pass" class="txt_input"> </div> </div> <div class="loginrow"> <input name="login" type="submit" id="submit" value="Login" class="btn_submit" style="margin:0px 0px 0px 84px;"> </div> <input type="hidden" name="redirect" value="/index.php"> </form> <?php } ?> </div> <div class="left_box_bot"></div> <div id="members_left"></div> <div class="left_box_mid"> <?php $con = mysql_connect("p50mysql141.secureserver.net","gamers_content","Clarefire1"); if (!$con) { die('Could not connect: ' . mysql_error()); } mysql_select_db("gamers_content", $con); $result = mysql_query("SELECT * FROM members ORDER BY member_id ASC LIMIT 10") or die(mysql_error()); while($row = mysql_fetch_array($result)) { echo "<span class=\"left\">".$row[member_tag]."".$row[member_name]."</span><br>"; } mysql_close($con); ?> </div> <div class="left_box_bot"></div> </div> <div id="content"> <?php $con = mysql_connect("p50mysql141.secureserver.net","gamers_content","Clarefire1"); if (!$con) { die('Could not connect: ' . mysql_error()); } mysql_select_db("gamers_content", $con); $result = mysql_query("SELECT * FROM articles ORDER BY article_id ASC LIMIT 3") or die(mysql_error()); while($row = mysql_fetch_array($result)) { echo "<div class=\"news\">"; echo "<div class=\"news_title\">"; echo "<span class=\"title\">» ".$row['article_title']."</span>"; echo "<span>".$row['article_sub']."</span>"; echo "</div>"; echo "<p>".$row['article_content']."</p>"; echo "<br><br>"; echo "<span class=\"content\"><i>Posted on: ".$row['article_date'].". By: ".$row['article_author']."</i></span>"; echo "</div>"; } mysql_close($con); ?> </div> </div> <div id="footer"></div> </div> </body> </html> Code (markup):
If FF2 and other compliant browsers are rendering it properly, then you have found a bug in the FF3 Beta and "to fix it" you need to report it to the FF development team. FF3 wasn't released for Joe to browse on. It was released for people to find bugs in it. The same goes for IE8. Imagine you find some hack to get it looking good in the Stable browsers AND FF3beta-- that means that when they fix the bug, your site will look bad in FF3 again.
iw as thinking on that but i thought that it may juse be a different rendering engine than ff2, also that they wouldnt listen to "Oh my site doesnt work, so you should revamp your whole web browser"
Heh, yeah. Well, if your site it totally valid, well written, blah blah, then they'll see better what exactly the error in their browser is. It's the same rendering engine, but with extra stuff added to it (so, it will still be a Gecko engine) and so then also, of course, bugz. Like I said, if FF2 and Opera and Safari and IE7 are showing it right, and you have no errors, then FF3 is totally the one wrong. You can either report it, or hope someone else does and sit back and wait... cause eventually when the bugs are fixed, it should also show your site correctly.