Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

background color does not cover over all the boxs in Firefox but IE do

Status
Not open for further replies.

xbl12

Programmer
Dec 12, 2006
66
Hi;

i don't known why background color does not cover over all the boxs in Firefox but IE does, could anyone help, please.

my code as following
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/strict.dtd">[/URL]
<html>
<head>
<META HTTP-EQUIV="content-type" CONTENT="text/html; charset=utf-8">
<style type="text/css">
html,body{
  padding: 0;
  margin:0;
}


#container {
   position: relative;
   width: 796px; /* width + border for IE 5.x */
   w\idth: 790px; /* real width */
   height: auto;
   border: 0px;
   padding: 0;
   margin-top: 10px;
   margin-bottom:auto;
   margin-left: auto;
   margin-right: auto;
   background-color:#f0f0ec;
}

#wrapper{
 margin: auto;
 border:0;
 padding:0;
 width: 640px;
 height:auto;

}
.box{
 border:0;
 padding:0;
 width:190px;
 height:220px;
 float: left;
 margin-left:15px;
 margin-top:20px;
 background-color:#FFFF99;
 color:#333333;
 text-align:center;
 overflow:scroll;
}
</style>
</head>
<body>
<div id="container">
<div id="wrapper">
//in here i am goning to use while loop to select all the data from database, so i may have 30 boxs, or 50boxs.
<span class="box">
gskjhdlk JAHDSLKAJSHD ADHSLKAHDLKSA HASDLADSLK ADHSAlds
</span>
<span class="box">
gskjhdlk JAHDSLKAJSHD ADHSLKAHDLKSA HASDLADSLK ADHSAlds
</span>
<span class="box">
gskjhdlk JAHDSLKAJSHD ADHSLKAHDLKSA HASDLADSLK ADHSAlds
</span>
<span class="box">
gskjhdlk JAHDSLKAJSHD ADHSLKAHDLKSA HASDLADSLK ADHSAlds
</span>
<span class="box">
gskjhdlk JAHDSLKAJSHD ADHSLKAHDLKSA HASDLADSLK ADHSAlds
</span>
<span class="box">
gskjhdlk JAHDSLKAJSHD ADHSLKAHDLKSA HASDLADSLK ADHSAlds
</span>
</div>
</div>

</body>
</html>
 
Your question has nothing to do with php and would be better asked in forum215. Since the solution is simple, I will provide it here, but if you have any subsequent questions, please ask in that forum.

All the elements within the container are floated and as the rules state, floated elements do not contribute to the container height (they are considered taken off the document flow, which is needed to expand the parent element). Read here on how to fix it:
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top