I don't know why this is happening!

groog · 07-06-2007, 01:52 AM

This is really screwy. I'm building this site for a friend and I ran into trouble.

http://groogstestpages.freehostia.com/indeedstudios/

Everything is fine until you scroll down. It works in IE but in Firefox the content extends past the box it's supposed to be in.

My HTML

Code:

<html>
<head>
<title>
Indeed Studios
</title>
<link href="indeedstudios.css" rel="stylesheet" type="text/css">
</head>
<body>

<div id="wrapper">
    <div id="header"></div>
    <div id="content">
        <div id="left">
            <div id="menu">
            <?php
            include("include/menu.php");
            ?>
            </div>
            <div id="games">
            <?php
            include('include/games.php');
            ?>
            </div>
            <div id="tutorials">
            <?php
            include('include/tutorials.php');
            ?>
            </div>
            <div id="downloads">
            <?php
            include('include/downloads.php');
            ?>
            </div>
            <div id="affiliates">
            <?php
            include('include/affiliates.php');
            ?>
            </div>
        </div>
        <div id="middle">
            <div id="notice">
            <?php
       include('include/notice.php');
       ?>
            </div>
        </div>
    </div>
    <div id="footer">
    <?php
   include('include/copywrite.php')
   ?>
    </div>
</div>

</body>
</head>

My CSS

Code:

body{
font-family: verdana, arial;
color: #FFF;
font-size: 12px;
text-align: center;
background-color: #000;
}

#wrapper{
width: 900px;
margin: auto;
}

#header{
width: 900px;
height: 100px;
background-image: url('images/header.png');
}

#content{
width: 900px;
margin: 5px 0px 0px 0px;
text-align: left;
height: 100%;
}

#left{
float: left;
width: 170px;
margin: 0px 5px 0px 0px;
border: 2px solid #FFF;
height: 100%;
text-align: left;
}

#middle{
float: left;
width: 707px;
border: 2px solid #FFF;
height: 100%;
padding: 5px;
text-align: center;
}

#middlecontent{
text-align: left;
width: 697px;
}

#middletop{
width: 697px;
}

#menutop{
background-image: url('images/menu.png');
width: 170px;
height: 20px;
}

#gamestop{
background-image: url('images/games.png');
width: 170px;
height: 20px;
}

#tutorialstop{
background-image: url('images/tutorials.png');
width: 170px;
height: 20px;
}

#downloadstop{
background-image: url('images/downloads.png');
width: 170px;
height: 20px;
}

#affiliatestop{
background-image: url('images/affiliates.png');
width: 170px;
height: 20px;
}

#menu{
float: left;
width: 180px;
text-align: left;
}

#games{
float: left;
width: 180px;
text-align: left;
}

#downloads{
float: left;
width: 180px;
text-align: left;
}

#tutorials{
float: left;
width: 180px;
text-align: left;
}

#affiliates{
float: left;
width: 180px;
text-align: center;
}

ul{
margin: 0px 0px 0px 0px;
padding-left: 5px;
list-style-type: none;
}

#gamecontent{
float: left;
width: 180px;
text-align:left;
padding: 5px;
}

#tutorialcontent{
float: left;
width: 180px;
text-align:left;
padding: 5px;
}

#downloadcontent{
width: 180px;
float: left;
text-align:left;
padding: 5px;
}

#affiliatecontent{
width: 613px;
float: left;
text-align: left;
padding: 5px;
}

#footer{
border: 2px solid #FFF;
margin: 5px 0px 0px 0px;
clear: both;
width: 888px;
text-align: center;
font-size: 10px;
padding: 5px;
float: left;
}

I did the CSS validator at w3schools and it checked out ok.