Adamwts Posted March 21, 2007 Share Posted March 21, 2007 Hey, I am having a problem with my background in Firefox. The page code follows below: HEADER.HTM: <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <LINK REL="SHORTCUT ICON" HREF="style/images/icons/browsericon.ico"> <link href="style/main.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="logo_strip"> <a href> <img border="0" alt="Kokoskrazy.com" id="logo" src="images/logo.gif" width="266" height="99"> </a> </div> <div id="nav_bar"> <a href="/index.php">Home</a> | <a href="/members.php">Member Area</a> | <a href="/forums/">Forums</a> | <a href="/usercp.php">User CP</a>| <a href="/memberlist.php">Member List</a> </div> <div id="contained"> <div id="main_body"> <div id="userbar"> <hr> <p><b>10/03/2007:</b> Forums have now been completed!<br> <b>02/03/2007:</b> Even more bugs fixed, sorry for database errors if you tried viewing website today, we have restored most of the website and will investigate that problem that we encountered.<br> <b>01/03/2007:</b> Fixed more bugs around the website. Sorry members who had already uploaded avatars, will not happen again. Also changed the colour scheme a bit.<br> <b>28/02/2007:</b> Some bugs on our recent scripts have been fixed and are more secure!<br> <b>22/02/2007:</b> Kokoskrazy has now been released and accepting registrations!<br> </p> <hr> <p> </div> <div id="container"> <noscript> <strong>You will not be able to use all applications correctly if you do not have Javascript enabled!</strong></noscript>okfoewkfoekw </body> </html> MAIN.CSS: /* Body ***************************************************************************/ body { font-family: 'Century Gothic', Trebuchet MS, Tahoma, Verdana, Arial, Helvetica, sans-serif; font-size: 10pt; background-image:url('../images/background.gif'); margin: 0px; text-align: center; } table, tr, td { font-size: 10pt; font-family: 'Century Gothic', Trebuchet MS, Tahoma, Verdana, Arial, Helvetica, sans-serif; } /* HR ***************************************************************************/ hr { height: 1px; color: #000000; } /* Logo Strip ***************************************************************************/ #logo_strip { text-align: left; background-color: #FFFFFF; background-image:url('../images/bannerbackground.gif') } #logo { margin: 0px; } /* Navbar ***************************************************************************/ #nav_bar { height: 26px; color:#FFFFFF; text-align: left; font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif; padding-top: 4px; padding-left: 5px; font-size: 12px; background-image:url('../images/nav_background.gif'); } #nav_bar a{ color: 8e8e8e; } #nav_bar a:hover{ color: 5e5e5e; } /* Main Body Container ***************************************************************************/ #main_body { margin: auto; width: 750px; color: #000000; text-align: left; background-color: #ffffff; border-left-style: solid; border-left-width: 2; border-right-style: solid; border-right-width: 2; } /* Userbar ***************************************************************************/ #userbar { width: 167px; float: left; text-align: left; background-color: #ffffff; padding-top: 5px; padding-right: 4px; padding-bottom: 4px; padding-left: 4px; border-right-style:solid; border-right-width:1; } /* Content Container ***************************************************************************/ #container { margin: auto; width: 570px; text-align: left; padding-bottom: 10px; padding-left: 4px; float: right; } /* Footer ***************************************************************************/ #footer { display: block; float: left; width: 100%; text-align: center; background-color: #F7F3F7; } /* Footer Links ***************************************************************************/ #links { display: block; float:left; width: 100%; text-align: center; background-color: #F8F8F8; } What my problem is, is that in the DIV represented as '#mainbody', I have a white background and borders on it. In Internet Explorer, it displays 100% perfect, but in Firefox I cant get it to display the background or borders for the DIV '#mainbody'. I would be greatful if someone could help me out. Thanks Quote Link to comment Share on other sites More sharing options...
obsidian Posted March 21, 2007 Share Posted March 21, 2007 I'm confused... you say you want the background and borders on #container, but in your CSS, you have no border or background color declared: #container { margin: auto; width: 570px; text-align: left; padding-bottom: 10px; padding-left: 4px; float: right; } Quote Link to comment Share on other sites More sharing options...
Adamwts Posted March 21, 2007 Author Share Posted March 21, 2007 oops, im so sorry, its in '#mainbody', sorry for that. Quote Link to comment Share on other sites More sharing options...
obsidian Posted March 21, 2007 Share Posted March 21, 2007 Here's the problem: you have two elements within your #mainbody (#container and #userbar). Both of these elements are floated, so your containing div is not expanding to the full height of the child divs. You need to throw a "fix" on your #mainbody div to tell it to clear all of its children that are floated. Here is the one that usually does it for me. Add the following class to the end of your CSS page, then add the class="clearfix" attribute to your #mainbody div. .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix {display: inline-block;} /* Hides from IE-mac \*/ * html .clearfix {height: 1%;} .clearfix {display: block;} /* End hide from IE-mac */ Hope this helps some. Quote Link to comment Share on other sites More sharing options...
Adamwts Posted March 21, 2007 Author Share Posted March 21, 2007 thanks, it works 100%! http://kokoskrazy.com is the result!!! Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.