Jump to content

Div+css---doesn't Work Properly In Explorer, But Perfect In Dreamweaver?


sunicani
 Share

Recommended Posts

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

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.

Edited by dsonesuk
Link to comment
Share on other sites

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>

Edited by Ingolme
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...