Old post:
I show product data in:
<div class="display">
For some reason IE7 will not stretch the background color of <div class="display"> till after the closing div of display, but have the last few items drop out of dedicated area. Why could that be? Looks ok in other browsers....
The code is:
CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<style type="text/css">
*{border:none;margin:0;padding:0;}
body{background-color:#000000;color:#457689;margin:20px 0;font:normal 12px Verdana, Geneva, Arial, helvetica, sans-serif;line-height:150%;}
h1 {font-size:130%;margin-bottom:15px;text-transform:Uppercase;}
h2 {font-size:115%;margin-bottom:15px;}
h3 {font-size:100%; font-weight:bold;margin-bottom:15px; margin-top:25px;}
h4 {font-size:90%;font-weight:bold;}
ul {list-style-type:none; margin-bottom:10px;}
p {margin:0 0 15px 0;}
a:link,a:visited,a:hover,a:active{text-decoration:none;color:#457689;}
a:hover{color:#000000;}
dl {margin-top:10px;}
dt{font-weight:bold;}
dd{margin-bottom:10px;}
input, textarea, select {padding:2px;border:#625a29 1px solid;color:#48545E;background-color:#000000;}
select {margin-bottom:3px;}
table {width:660px; font-size:11px;}
br {line-height:1px; margin:0; padding:0;}
/* - - container holding website - -*/
#container{width:940px;margin:15px auto 0 auto;padding:5px 20px 20px 20px; background-color:#625a29;}
/* - - top - -*/
#top {text-align:right;}
#top div {float:left; text-align:left;width:650px;}
#top div p{font-size:100%; margin-top:0; padding-top:0; color:#333;}
#top p {font-size:120%; font-weight:bold;padding-top:20px;}
#top ul {margin-top:5px; background-color:#333; padding:10px 0;}
#top li {padding:0 10px; border-right:#fff 1px solid;}
#top img {margin-bottom:10px;}
/* - - top nav bar - -*/
.navGlobal li {display:inline;}
/* - - nav bar on left - -*/
#nav {float:left; width:140px; margin-top:10px;}
#nav h2 {margin-bottom:5px;}
#nav ul {border-top:#457689 1px dotted; margin-bottom:15px;}
#nav li {border-bottom:#457689 1px dotted;}
/* - - container holding content - -*/
#content{ margin-left:20px; background-color:#000000; color:#333; padding:20px 20px 90px 20px; float:left; width:740px;margin-top:10px;}
#content a:link,#content a:visited,#content a:hover,#content a:active{text-decoration:none;color:#333; font-weight:bold;}
/* - - breadcrumb - -*/
#breadcrumb {font-size:90%; margin-top:0;}
#breadcrumb a:link,#breadcrumb a:visited,#breadcrumb a:hover,#breadcrumb a:active{font-weight:normal;}
/* - - top discount box - -*/
#discount{background-color:#457689; padding:10px;border:#333 2px solid; margin:20px 0; }
#discount p {margin:0; padding:0;}
/* - - display boxes - -*/
.display, .display2 {background-color:#457689; padding:20px 20px 20px 0; margin:20px 0; }
.display h2, .display h3, .display2 h2 {margin-left:20px;}
.display table {margin:0 20px 20px 20px;}
.display table h2 {margin-left:0;}
td, th {border:#625a29 1px solid; padding:5px; text-align:left; vertical-align:top;}
th {background-color:#625a29; color:#fff;}
.display p, .display ul, .display2 p {margin:5px 20px;}
.display div {float:left; width:160px; margin-left:20px; margin-bottom:20px; text-align:center;}
.display2 div {float:left; width:400px; margin-right:20px;}
.display p.small { text-align:left; margin-bottom:15px;}
.display2 p.small { font-size:85%; margin-left:420px; line-height:100%;}
.thumbs {float:left; width:160px; height:220px; margin:15px 15px 0 0;text-align:center; position:relative;}
.thumbs img {margin-bottom:15px;}
.thumbs div {position:absolute; bottom:0; left:0; width:100%; text-align:center;}
/* - - productPage - -*/
.productPage {background-color:#457689; padding:20px; margin:20px 0; text-align:center; }
.productPage div {margin:20px 0;}
.productPage div img {margin:0 10px;}
.productPage table {margin:20px 0;}
/* - - top and bottom - -*/
#footer {text-align:right; margin-top:10px;}
#footer p {font-size:90%;}
/* - - copy - -*/
#copy{width:980px;margin:0 auto; color:#333; font-size:90%; text-align:right;}
#copy a:link,#copy a:visited,#copy a:hover,#copy a:active{color:#333;}
/* - - more - -*/
.tel {font-size:120%; font-weight:bold;}
.small {font-size:90%;}
#links a:link,#links a:visited,#links a:hover,#links a:active { font-size:90%; font-weight:normal;}
.ital { font-style:italic;}
.right {text-align:right;}
.left {text-align:left;}
.noBorder {border:none;}
</style>
<!--[if IE]>
<style type="text/css">
#container{padding-top:20px;}
</style>
<![endif]-->
</head>
<body>
<div id="container">
<div id="top">
<div><a href="index.php" title="Home">Home</a></div>
<p>Telephone</p><br clear="left" />
<ul class="navGlobal">
<li><a href="index.php" title="Home">Home</a></li>
<li> <a href="faq.php" title="FAQ">FAQ</a></li>
<li> <a href="links.php" title="Links">Links</a></li>
</ul>
</div>
<div id="nav">
<h2>CATEGORIES</h2>
<ul>
<li><a href="overview.php?cid=15" title="photos">photos</a></li>
<li><a href="overview.php?cid=13" title="more">more</a></li>
</ul>
</div>
<div id="content">
<p id="breadcrumb"><a href="index.php" title="Home">Home</a> > photos</p>
<h1>CATEGORIES</h1><div class="display"><h2>photos</h2>
<div class="thumbs">
<div><a href="item.php?cid=13&pid=56" title="photos"><img src="products/preview/56-1.jpg" width="160" height="103" alt="photos" /></a><h4><a href="item.php?cid=13&pid=56" title="photos">photos</a></h4></div>
</div>
<div class="thumbs">
<div><a href="item.php?cid=13&pid=57" title="photos 2"><img src="products/preview/57-1.jpg" width="160" height="96" alt="photos 2" /></a><h4><a href="item.php?cid=13&pid=57" title="photos 2">photos 2</a></h4></div>
</div>
<div class="thumbs">
<div><a href="item.php?cid=13&pid=58" title="photos 3"><img src="products/preview/58-1.jpg" width="160" height="112" alt="photos 3" /></a><h4><a href="item.php?cid=13&pid=58" title="photos 3">photos 3</a></h4></div>
</div><br clear="left" />
<div class="thumbs">
<div><a href="item.php?cid=13&pid=59" title="photos 4"><img src="products/preview/59-1.jpg" width="160" height="97" alt="photos 4" /></a><h4><a href="item.php?cid=13&pid=59" title="photos 4">photos 4</a></h4></div>
</div>
<div class="thumbs">
<div><a href="item.php?cid=13&pid=60" title="photos 5"><img src="products/preview/60-1.jpg" width="160" height="106" alt="photos 5" /></a><h4><a href="item.php?cid=13&pid=60" title="photos 5">photos 5</a></h4></div>
</div>
<div class="thumbs">
<div><a href="item.php?cid=13&pid=61" title="photos 6"><img src="products/preview/61-1.jpg" width="160" height="74" alt="photos 6" /></a><h4><a href="item.php?cid=13&pid=61" title="photos 6">photos 6</a></h4></div>
</div>
<div class="thumbs">
<div><a href="item.php?cid=13&pid=62" title="photos 7"><img src="products/preview/62-1.jpg" width="160" height="146" alt="photos 7" /></a><h4><a href="item.php?cid=13&pid=62" title="photos 7">photos 7</a></h4></div>
</div>
<div class="thumbs">
<div><a href="item.php?cid=13&pid=63" title="photos 8"><img src="products/preview/63-1.jpg" width="160" height="126" alt="photos 8" /></a><h4><a href="item.php?cid=13&pid=63" title="photos 8">photos 8</a></h4></div>
</div>
<br clear="left" />
</div>
</div><br clear="left" />
<div id="footer">
<footer info
</div>
</div>
<p id="copy">Copyright</p>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<style type="text/css">
*{border:none;margin:0;padding:0;}
body{background-color:#000000;color:#457689;margin:20px 0;font:normal 12px Verdana, Geneva, Arial, helvetica, sans-serif;line-height:150%;}
h1 {font-size:130%;margin-bottom:15px;text-transform:Uppercase;}
h2 {font-size:115%;margin-bottom:15px;}
h3 {font-size:100%; font-weight:bold;margin-bottom:15px; margin-top:25px;}
h4 {font-size:90%;font-weight:bold;}
ul {list-style-type:none; margin-bottom:10px;}
p {margin:0 0 15px 0;}
a:link,a:visited,a:hover,a:active{text-decoration:none;color:#457689;}
a:hover{color:#000000;}
dl {margin-top:10px;}
dt{font-weight:bold;}
dd{margin-bottom:10px;}
input, textarea, select {padding:2px;border:#625a29 1px solid;color:#48545E;background-color:#000000;}
select {margin-bottom:3px;}
table {width:660px; font-size:11px;}
br {line-height:1px; margin:0; padding:0;}
/* - - container holding website - -*/
#container{width:940px;margin:15px auto 0 auto;padding:5px 20px 20px 20px; background-color:#625a29;}
/* - - top - -*/
#top {text-align:right;}
#top div {float:left; text-align:left;width:650px;}
#top div p{font-size:100%; margin-top:0; padding-top:0; color:#333;}
#top p {font-size:120%; font-weight:bold;padding-top:20px;}
#top ul {margin-top:5px; background-color:#333; padding:10px 0;}
#top li {padding:0 10px; border-right:#fff 1px solid;}
#top img {margin-bottom:10px;}
/* - - top nav bar - -*/
.navGlobal li {display:inline;}
/* - - nav bar on left - -*/
#nav {float:left; width:140px; margin-top:10px;}
#nav h2 {margin-bottom:5px;}
#nav ul {border-top:#457689 1px dotted; margin-bottom:15px;}
#nav li {border-bottom:#457689 1px dotted;}
/* - - container holding content - -*/
#content{ margin-left:20px; background-color:#000000; color:#333; padding:20px 20px 90px 20px; float:left; width:740px;margin-top:10px;}
#content a:link,#content a:visited,#content a:hover,#content a:active{text-decoration:none;color:#333; font-weight:bold;}
/* - - breadcrumb - -*/
#breadcrumb {font-size:90%; margin-top:0;}
#breadcrumb a:link,#breadcrumb a:visited,#breadcrumb a:hover,#breadcrumb a:active{font-weight:normal;}
/* - - top discount box - -*/
#discount{background-color:#457689; padding:10px;border:#333 2px solid; margin:20px 0; }
#discount p {margin:0; padding:0;}
/* - - display boxes - -*/
.display, .display2 {background-color:#457689; padding:20px 20px 20px 0; margin:20px 0; }
.display h2, .display h3, .display2 h2 {margin-left:20px;}
.display table {margin:0 20px 20px 20px;}
.display table h2 {margin-left:0;}
td, th {border:#625a29 1px solid; padding:5px; text-align:left; vertical-align:top;}
th {background-color:#625a29; color:#fff;}
.display p, .display ul, .display2 p {margin:5px 20px;}
.display div {float:left; width:160px; margin-left:20px; margin-bottom:20px; text-align:center;}
.display2 div {float:left; width:400px; margin-right:20px;}
.display p.small { text-align:left; margin-bottom:15px;}
.display2 p.small { font-size:85%; margin-left:420px; line-height:100%;}
.thumbs {float:left; width:160px; height:220px; margin:15px 15px 0 0;text-align:center; position:relative;}
.thumbs img {margin-bottom:15px;}
.thumbs div {position:absolute; bottom:0; left:0; width:100%; text-align:center;}
/* - - productPage - -*/
.productPage {background-color:#457689; padding:20px; margin:20px 0; text-align:center; }
.productPage div {margin:20px 0;}
.productPage div img {margin:0 10px;}
.productPage table {margin:20px 0;}
/* - - top and bottom - -*/
#footer {text-align:right; margin-top:10px;}
#footer p {font-size:90%;}
/* - - copy - -*/
#copy{width:980px;margin:0 auto; color:#333; font-size:90%; text-align:right;}
#copy a:link,#copy a:visited,#copy a:hover,#copy a:active{color:#333;}
/* - - more - -*/
.tel {font-size:120%; font-weight:bold;}
.small {font-size:90%;}
#links a:link,#links a:visited,#links a:hover,#links a:active { font-size:90%; font-weight:normal;}
.ital { font-style:italic;}
.right {text-align:right;}
.left {text-align:left;}
.noBorder {border:none;}
</style>
<!--[if IE]>
<style type="text/css">
#container{padding-top:20px;}
</style>
<![endif]-->
</head>
<body>
<div id="container">
<div id="top">
<div><a href="index.php" title="Home">Home</a></div>
<p>Telephone</p><br clear="left" />
<ul class="navGlobal">
<li><a href="index.php" title="Home">Home</a></li>
<li> <a href="faq.php" title="FAQ">FAQ</a></li>
<li> <a href="links.php" title="Links">Links</a></li>
</ul>
</div>
<div id="nav">
<h2>CATEGORIES</h2>
<ul>
<li><a href="overview.php?cid=15" title="photos">photos</a></li>
<li><a href="overview.php?cid=13" title="more">more</a></li>
</ul>
</div>
<div id="content">
<p id="breadcrumb"><a href="index.php" title="Home">Home</a> > photos</p>
<h1>CATEGORIES</h1><div class="display"><h2>photos</h2>
<div class="thumbs">
<div><a href="item.php?cid=13&pid=56" title="photos"><img src="products/preview/56-1.jpg" width="160" height="103" alt="photos" /></a><h4><a href="item.php?cid=13&pid=56" title="photos">photos</a></h4></div>
</div>
<div class="thumbs">
<div><a href="item.php?cid=13&pid=57" title="photos 2"><img src="products/preview/57-1.jpg" width="160" height="96" alt="photos 2" /></a><h4><a href="item.php?cid=13&pid=57" title="photos 2">photos 2</a></h4></div>
</div>
<div class="thumbs">
<div><a href="item.php?cid=13&pid=58" title="photos 3"><img src="products/preview/58-1.jpg" width="160" height="112" alt="photos 3" /></a><h4><a href="item.php?cid=13&pid=58" title="photos 3">photos 3</a></h4></div>
</div><br clear="left" />
<div class="thumbs">
<div><a href="item.php?cid=13&pid=59" title="photos 4"><img src="products/preview/59-1.jpg" width="160" height="97" alt="photos 4" /></a><h4><a href="item.php?cid=13&pid=59" title="photos 4">photos 4</a></h4></div>
</div>
<div class="thumbs">
<div><a href="item.php?cid=13&pid=60" title="photos 5"><img src="products/preview/60-1.jpg" width="160" height="106" alt="photos 5" /></a><h4><a href="item.php?cid=13&pid=60" title="photos 5">photos 5</a></h4></div>
</div>
<div class="thumbs">
<div><a href="item.php?cid=13&pid=61" title="photos 6"><img src="products/preview/61-1.jpg" width="160" height="74" alt="photos 6" /></a><h4><a href="item.php?cid=13&pid=61" title="photos 6">photos 6</a></h4></div>
</div>
<div class="thumbs">
<div><a href="item.php?cid=13&pid=62" title="photos 7"><img src="products/preview/62-1.jpg" width="160" height="146" alt="photos 7" /></a><h4><a href="item.php?cid=13&pid=62" title="photos 7">photos 7</a></h4></div>
</div>
<div class="thumbs">
<div><a href="item.php?cid=13&pid=63" title="photos 8"><img src="products/preview/63-1.jpg" width="160" height="126" alt="photos 8" /></a><h4><a href="item.php?cid=13&pid=63" title="photos 8">photos 8</a></h4></div>
</div>
<br clear="left" />
</div>
</div><br clear="left" />
<div id="footer">
<footer info
</div>
</div>
<p id="copy">Copyright</p>
</body>
</html>
Son
Answers