Works perfectly in IE, but fails in FF - soo weird

Discussion in 'CSS' started by Chrilz, Apr 8, 2007.

  1. #1
    I'm working on this new subsection for one of my sites. And i'm having this weird problem, my site looks very nice in IE, but in FF on of my tables is placed below the other content. You can see it here, http://media.dild.net/.

    This is my design code (divs and so on):
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
          <head>
                <title>dild.net - Funny Videos, Funny Movies, Video Clips</title>
       <link rel="stylesheet" type="text/css" href="../css/style.css" />
        <style type="text/css">
        </style>      
    	</head>
    
    
    <body>
    <div id="top">
     <div class="menu">
           <div class="menu_frontpage">
             <a href="../" title=""></a>
    	   </div>
    	   	   	   
    	   <div class="menu_videos">
             <a href="../videos" title=""></a>
    	   </div>
    	   
    	   <div class="menu_pictures">
             <a href="../pictures" title=""></a>
    	   </div>	   	   
     </div>
    </div>
    <div id="site">
     <div id="content-left">
      <div class="leftcontentheader">
     Header
       </div>
        <div class="leftcontenttext">
       Content
        </div>
      <div class="leftcontentheader">
       Advertisment
       </div>
        <div class="leftcontenttext">
        Banner
        </div>
      </div>
     <div id="content-right">
       <div class="rightcontentheader">
        Friends
        </div>
        <div class="rightcontenttext">
         Random friends of dild.net
        </div>
        <div class="rightcontentheader">
         Advertisment
        </div>
        <div class="rightcontenttext">
        Banner
        </div>
     </div>
    </div>
    
              <div id="bund">
    		    Footer
    		  </div>
    </body>
    </html>
    Code (markup):
    And this is my CSS:
    
    /* Global */
    
    body {
    	background-image: url('../images/bg.gifx');
    	background-repeat: repeat;
    	background-color: #202020;
        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: #202020;
        width: 975px;
        height: 100px;
        float: left;
        clear:both;
    }
    
    div#site {
        margin: 0 auto;
        background-repeat: repeat-y;
        background-color: #202020;
        width: 955px;
    }
    
    div#content-left {
        background-color: #ebebeb;
        margin: 0 auto;
        width: 735px;
        float: left;
        border: 4px solid #e0e0e0;
        text-align: justify;
        padding: 0px 0px 0px 0px;
        clear:both;
    }
    div#content-right {
        background-color: #ebebeb;
        margin: 0px 0px 0px 0px;
        width: 200px;
        float: right;
        border: 4px solid #e0e0e0;
        text-align: justify;
        padding: 0px 0px 0px 0px;
        clear:both;
    }
    
    div#bund {
        margin: 0px auto 20px auto;
        background-image: url('../images/bund.gif');
        background-repeat: no-repeat;
        background-color: #202020; 
        width: 950px;
        height: 37px;
        text-align:center;
        clear:both
    }
    
    .leftcontentheader {
    	background-image: url('../images/headerbg.gif');
    	background-repeat: repeat;
    	margin: 0px;
    	width: 735px;
    	margin-bottom: 0px;
    	background-color: #252525;
    	padding: 0px;
    	color: #FFFFFF;
    	font-weight: bold;
    }
    
    .leftcontenttext {
    	padding: 4px;
    }
    
    .rightcontentheader {
    	background-image: url('../images/headerbg.gif');
    	background-repeat: repeat;
    	margin: 0px;
    	width: 200px;
    	margin-bottom: 0px;
    	background-color: #252525;
    	padding: 0px;
    	color: #FFFFFF;
    	font-weight: bold;
    }
    
    .rightcontenttext {
    	padding: 4px;
    }
    
    Code (markup):
    Do any of you people know how i can solve my problem?
     
    Chrilz, Apr 8, 2007 IP
  2. Chrilz

    Chrilz Peon

    Messages:
    110
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #2
    I have made it work perfectly now, i just deleted the clear:both under both div#content-left and div#content-right :).
     
    Chrilz, Apr 8, 2007 IP