son Posted October 12, 2009 Share Posted October 12, 2009 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 Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.