son Posted October 12, 2009 Report Share Posted October 12, 2009 (edited) Please ignore post, just solved it by adding the width to display...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: <!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> Son Edited October 12, 2009 by son Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now