sunicani Posted July 27, 2009 Share Posted July 27, 2009 I had tried to display some products with two sections like 'new products' and 'hot deals' via Div+CSS.However, it worked good in dreamweaver, but failed in explorer!!!I don't know why? some experts help me? Thanks a lot@html 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" xml:lang="en" lang="en"><head><link type="text/css" rel="stylesheet" href="home.css" /></head><body><div id="pagebody"><div id="product_series"><div id="new_products">New Products</div><div id="product_box"><div id="product_name">Nokia E71</div><div><a href=""><img alt="" src="http://naamtobatao.files.wordpress.com/200...-e71-piseth.jpg" width="90" height="65" /></a></div><div id="product_spec"></div><div id="product_price">$87</div></div><div id="product_box"><div id="product_name">Nokia E71</div><div><a href=""><img alt="" src="http://naamtobatao.files.wordpress.com/200...-e71-piseth.jpg" width="90" height="65" /></a></div><div id="product_spec"></div><div id="product_price">$87</div></div><div id="product_box"><div id="product_name">Nokia E71</div><div><a href=""><img alt="" src="http://naamtobatao.files.wordpress.com/200...-e71-piseth.jpg" width="90" height="65" /></a></div><div id="product_spec"></div><div id="product_price">$87</div></div><div id="product_box"><div id="product_name">Nokia E71</div><div><a href=""><img alt="" src="http://naamtobatao.files.wordpress.com/200...-e71-piseth.jpg" width="90" height="65" /></a></div><div id="product_spec"></div><div id="product_price">$87</div></div><div id="product_box"><div id="product_name">Nokia E71</div><div><a href=""><img alt="" src="http://naamtobatao.files.wordpress.com/200...-e71-piseth.jpg" width="90" height="65" /></a></div><div id="product_spec"></div><div id="product_price">$87</div></div><div id="product_box"><div id="product_name">Nokia E71</div><div><a href=""><img alt="" src="http://naamtobatao.files.wordpress.com/200...-e71-piseth.jpg" width="90" height="65" /></a></div><div id="product_spec"></div><div id="product_price">$87</div></div><div id="product_box"><div id="product_name">Nokia E71</div><div><a href=""><img alt="" src="http://naamtobatao.files.wordpress.com/200...-e71-piseth.jpg" width="90" height="65" /></a></div><div id="product_spec"></div><div id="product_price">$87</div></div><div id="product_box"><div id="product_name">Nokia E71</div><div><a href=""><img alt="" src="http://naamtobatao.files.wordpress.com/200...-e71-piseth.jpg" width="90" height="65" /></a></div><div id="product_spec"></div><div id="product_price">$87</div></div><div id="product_box"><div id="product_name">Nokia E71</div><div><a href=""><img alt="" src="http://naamtobatao.files.wordpress.com/200...-e71-piseth.jpg" width="90" height="65" /></a></div><div id="product_spec"></div><div id="product_price">$87</div></div></div><div id="product_series"><div id="hotdeals">Hot Deals</div><div id="product_box"><div id="product_name">Nokia E71</div><div><a href=""><img alt="" src="http://naamtobatao.files.wordpress.com/200...-e71-piseth.jpg" width="90" height="65" /></a></div><div id="product_spec"></div><div id="product_price">$87</div></div><div id="product_box"><div id="product_name">Nokia E71</div><div><a href=""><img alt="" src="http://naamtobatao.files.wordpress.com/200...-e71-piseth.jpg" width="90" height="65" /></a></div><div id="product_spec"></div><div id="product_price">$87</div></div><div id="product_box"><div id="product_name">Nokia E71</div><div><a href=""><img alt="" src="http://naamtobatao.files.wordpress.com/200...-e71-piseth.jpg" width="90" height="65" /></a></div><div id="product_spec"></div><div id="product_price">$87</div></div><div id="product_box"><div id="product_name">Nokia E71</div><div><a href=""><img alt="" src="http://naamtobatao.files.wordpress.com/200...-e71-piseth.jpg" width="90" height="65" /></a></div><div id="product_spec"></div><div id="product_price">$87</div></div><div id="product_box"><div id="product_name">Nokia E71</div><div><a href=""><img alt="" src="http://naamtobatao.files.wordpress.com/200...-e71-piseth.jpg" width="90" height="65" /></a></div><div id="product_spec"></div><div id="product_price">$87</div></div><div id="product_box"><div id="product_name">Nokia E71</div><div><a href=""><img alt="" src="http://naamtobatao.files.wordpress.com/200...-e71-piseth.jpg" width="90" height="65" /></a></div><div id="product_spec"></div><div id="product_price">$87</div></div><div id="product_box"><div id="product_name">Nokia E71</div><div><a href=""><img alt="" src="http://naamtobatao.files.wordpress.com/200...-e71-piseth.jpg" width="90" height="65" /></a></div><div id="product_spec"></div><div id="product_price">$87</div></div><div id="product_box"><div id="product_name">Nokia E71</div><div><a href=""><img alt="" src="http://naamtobatao.files.wordpress.com/200...-e71-piseth.jpg" width="90" height="65" /></a></div><div id="product_spec"></div><div id="product_price">$87</div></div><div id="product_box"><div id="product_name">Nokia E71</div><div><a href=""><img alt="" src="http://naamtobatao.files.wordpress.com/200...-e71-piseth.jpg" width="90" height="65" /></a></div><div id="product_spec"></div><div id="product_price">$87</div></div></div><div id="product_series"></div><div id="footer"></div></body></html>CSS:/* body */body { font-family:Arial, Helvetica, sans-serif; font-size:16px; text-align:center; background-color:#FFFFFF; margin:0; padding:0; overflow:auto; }/*page*/ #page { position:relative; margin:0 auto; width:1000px; overflow:auto;} /* pagebody */#pagebody {background-image:url(http://images.apple.com/home/images/iphone-bg-20090608.jpg); background-repeat:no-repeat; color:#666666; /*font-size:12px;*/ margin:auto; padding:2.6; height:450px; width:1000px; position:relative; overflow:hidden; }#product_series {width:1000;height:142.8;margin:0;padding:3.8; float:relative;position:relative;}#product_box {width:108;height:120.5;margin:0 auto;padding:0.6;float:left;position:relative;}#new_products {width:999;height:22;margin:0 auto;padding:0;position:relative;text-align:center;}#hotdeals {width:999;height:22;margin:0 auto;padding:0;position:relative;text-align:center;}#bestsllers {width:999;height:22;margin:0 auto;padding:0;position:relative;text-align:center;}#product_name {width:95;height:25;margin:0;padding:0;font-size:85%;text-align:center;}/*img {width:90;height:65;margin:0;padding:0;}*/#product_spec {width:95;height:15;margin:0;padding:0;font-size:85%;}#product_price {width:95;height:15;margin:0;padding:0;font-size:85%;}/* footer */ #footer {background-image:url(); background-repeat: color:#CCCCCC; /*font-size:12px;*/ margin:auto; height:50px; width:1000px; position:relative; overflow:hidden; }the aim is to display two line series products: 9 products/per line in an independant Div&CSS box. Link to comment Share on other sites More sharing options...
dsonesuk Posted July 27, 2009 Share Posted July 27, 2009 1, a id ref name can only be used once within a page, classes (class="product_series") can be used multiple times (css ref .product_series {..).2, it would help to give a actual unit type on what you require, usually px, but can be em, pt, or ex. A non specific unit type is giving only to a 0 value, where it makes no difference.3, you require an extra closing div (</div>) at the bottomhave made these required changes, and it works fine. Link to comment Share on other sites More sharing options...
Ingolme Posted July 27, 2009 Share Posted July 27, 2009 You know, you can apply CSS to more than just <div> elements.Because you've used nothing but <div> elements on your page I have no idea how it's meant to be structured.The use of <h1>, <h2>, <h3>, <p>, <ul>, <ol>, <li>, <dl>, <dt>, <dd> and even <table>, as indicators of what kind of content to expect, makes pages much easier to read.A stucture something like this would work: <div id="product_series"> <h2 id="new_products">New Products</h2> <dl class="product_box"> <dt class="product_name">Nokia E71</dt> <dd> <a href=""><img alt="" src="http://naamtobatao.files.wordpress.com/200...-e71-piseth.jpg" /></a> <ul> <li id="product_spec"></li> <li> id="product_price">$87</li> </ul> </dd> </dl> <dl class="product_box"> <dt class="product_name">Nokia E71</dt> <dd> <a href=""><img alt="" src="http://naamtobatao.files.wordpress.com/200...-e71-piseth.jpg" /></a> <ul> <li id="product_spec"></li> <li> id="product_price">$87</li> </ul> </dd> </dl></div> Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.