Having problems with my site in FireFox :s

Hey all, as the title say i have some problems with my site to work properly in FireFox.
It works just well in IE, and it validates with W3C.

My site code:

<div id="top">
 <div id="menu">
       <div id="menu_frontpage">
         <a href="./" title=""></a>
	   </div>
	   
	   <div id="menu_videos">
         <a href="./?id=videos" title=""></a>
	   </div>
	   
	   <div id="menu_games">
         <a href="./?id=games" title=""></a>
	   </div>
	   	   
 </div>
</div>
<div id="site">
<!-- Banner #1 !-->
 <div id="content-left">
<h1>Content</h1>
Content #1
          <div class="topspacer"></div>
 </div>
 <div id="content-right">
Content #2
          <div class="topspacer"></div>
 </div>
</div>
          <div id="bund">
		    <p class="boks">Bottom
			</p>
		  </div>
<div class="topspacer"></div>

Code (markup):

My CSS:

/* Global */

body {
	background-image: url('../images/bg.gifx');
	background-repeat: repeat;
	background-color: #f5fbfe;
    margin: 0;
	text-align: center;
	font-size: 12px; 
	font-family: 'Trebuchet MS', Verdana, Sans-Serif, Arial;
}

/* Design */

div#top {
    margin: 0 auto;
    background-image: url('../images/logo.gif');
    background-repeat: no-repeat;
    background-color: #21597b;
    width: 800px;
    height: 197px;
}

div#site {
    margin: 0 auto;
    background: url('../images/sitebg.gif');
    background-repeat: repeat-y;
    background-color: #ffffff;
    width: 800px;
}

div#content-left {
    margin: 0 auto;
    width: 545px;
    float: left;
    border-right: 1px solid #a1d1ee;
    text-align: justify;
    padding: 0px 10px 0px 15px;
}
div#content-right {
    margin: 0 auto;
    width: 200px;
    float: right;
    text-align: justify;
    padding: 0px 15px 0px 0px;
}

div#bund {
    margin: 0px auto 20px auto;
    background-image: url('../images/bund.gif');
    background-repeat: no-repeat;
    background-color: #EBF4FE; 
    width: 800px;
    height: 30px;
    text-align:center;
}

div#spacer {
	height: 1px;
}

div#topspacer {
	height: 7px;
}


div#chart {
    visibility: hidden;
}

/* Menu */

div#menu {
    margin: 0px 0px 0px 0px;
    padding: 140px 0px 0px 5px;
}

div#menu_frontpage {
    float: left;
    width: 65px;
    height: 36px;
    background: url('../images/menu_frontpage.gif') 0 -36px no-repeat;
    text-indent: -10000em;
}

div#menu_frontpage a {
    display: block;
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	text-decoration: none;
	background: url('../images/menu_frontpage.gif') top left no-repeat;
}

div#menu_frontpage a:hover {
	background-image: none;
}

Code (markup):

You see the site layout and so on at http://fundingdong.wido.dk

I hope someone can figuere out what i am doing wrong .

 

Firefox is doing it correctly. IE wrongly encloses everything if the parent has hasLayout. A float is out of the flow. As far as a float's parent is concerned, it has no content. Add {display: table;} to #site, and it will enclose its float descendents.

See my enclosing float elements demo for the various methods. Further, Google for float tutorials, as proper understanding is critical to css layout.

cheers,

gary

 

Thx kk5st for your suggestion, but i have fixed it with an other method ..

I have put in a <div style="clear:both;"></div> just like this:

<div id="content-right">
Content #2
<div class="topspacer"></div>
</div>
<div style="clear:both;"></div>
</div>

 

Then you should look at the last method in my demo. It uses Tony Aslett's 'clearfix' method. Effectively it does the same as you have done without the non-semantic, non-structural markup.

Do study the methods. Any given method, including your explicit clearing, will have conditions under which it will not work as desired. In any given case, though, one of the methods will.

cheers,

gary