...

View Full Version : I don't know why this is happening!



groog
07-06-2007, 02: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

<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

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.

_Aerospace_Eng_
07-06-2007, 03:19 AM
Get rid of the heights on #content and #left.

groog
07-06-2007, 11:04 AM
Ok I tried that and it didn't work.

koyama
07-08-2007, 03:38 PM
Ok I tried that and it didn't work.
I don't see that the heights have been removed.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum