Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Jun 2007
    Posts
    62
    Thanks
    0
    Thanked 0 Times in 0 Posts

    I don't know why this is happening!

    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.

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Get rid of the heights on #content and #left.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    New Coder
    Join Date
    Jun 2007
    Posts
    62
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok I tried that and it didn't work.

  • #4
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by groog View Post
    Ok I tried that and it didn't work.
    I don't see that the heights have been removed.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •