Link to home
Start Free TrialLog in
Avatar of koochy
koochyFlag for United States of America

asked on

Div container appearing above drop down menu

I am working on a site that I did not develop myself but I'm currently making revisions to. The client would like to now show model numbers on all the photos. I decide to use CSS instead of going into photoshop and changing each and every photo. As I feel it would take less time to create and make changes to. The model numbers appear above the photos inside div tags.

I have successfully created the look that I want but in Internet Explorer (I tested it in 7 and 6) the drop down menu is appearing below the div containers with the model numbers in them. But firefox, netscape and opera all display correctly.

The div box with the model numbers in them are set to a relative position and the drop down menu is set to absolute. I don't know if this might be causing the problem some how or not. As the div containers appear below the drop down menu when the position value is not set, which makes sense.

The menu is created with an ul list and another ul for the drop down items. The z-index is set to 10000 on the ul drop down.

I am not sure why internet explorer is displaying it in this way. I can't leave it like these as too many people will be using IE. Maybe I am over looking something or missing something in the code.  

If you need any further information let me know.
Here is link to one of the pages with the model numbers: http://www.bcgreenhousebuilders.com/cc/pacific_series.php 
// CSS for the drop down menu
#p7PMnav ul {
	margin: 0;
	padding: 0;
	position: absolute;
	left: -9000px;
	z-index: 10000;
}
 
// Pages doc type - as I know this can cause issues.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
// Div container with image and model numbers
  <div id="leftcol"><img src="/media/product_collages/pacific_series_home.jpg" alt="Curved glass polycarbonate hobby greenhouse" width="383" height="450" /> 
    <div class="model top_left"> 
    <p style="width: 56px;">PC816SG</p>
    </div> 
    <div class="model top_right"> 
    <p style="width: 64px;">FPC812TW</p>
    </div> 
    <div class="model bottom_right"> 
    <p style="width: 63px;">PC1216SG</p>
    </div> 
</div>
 
// CSS for that section of the page
#leftcol {
	width: 383px;
}
.model {
	position: relative;
}
.top_left {
	top:-278px; 
	left: 130px;
	float:left;
}
.top_right {
	top:-278px; 
	float: right;
}
.bottom_right {
	top:-51px; 
	left: 313px; 
	clear: both;
}
.model p {
	padding: 3px;
	background-color: white;
	margin: 0px;
}

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of Mark Steggles
Mark Steggles
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of koochy

ASKER

Thanks so much it seems to be displaying perfect in IE.  Total lifesaver as I didn't want to have to re-create every image!