IE z-index issues 1

[shavenlunatic]

Hello CSS Peoples

We are creating an interactive map that allows the user to travel using a grid reference system
The map consists of a number of layers:
1. The main wrapper that holds the map
2. The map itself
3. The grid overlay made from a number of css squares
4. A number of icons placed inside the aforementioned grid

This works great in FireFox, Safari and Opera, but as always it is not so easy when it comes to IE - the map image simply does not display.
I am aware of the need to set a position when using z-index in IE, but nothing seems to fix this issue
Can anyone help?

/*The main wrapper that contains everything*/
#map_wrapper
{
height: auto;
width: 890px;
display: inline;
float:left;
margin-left:40px;
border: 1px solid #000;
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
-webkit-border-radius: 10px; 
-border-radius: 10px;
padding-top: 10px;
padding-left: 15px;
padding-right: 15px;
background-image: url(../Images/Generic/BlackOverlay.png);
background-repeat: repeat;
} 
 
/*The Map Image*/
 
#map_main
{
width: 400px;
height: 400px;
border: 1px solid #000;
overflow:hidden;
z-index: 1;
float:left;
margin-top: 10px;
margin-bottom: 15px; 
} 
 
/*The Map Grid Squares */
#map_grid
{
width: 79px;
height: 79px;
border-right: 1px dashed #333;
border-top: 1px dashed #333;
float:left;
z-index: 10;
position: relative; 
} 
#map_fog
{
width: 79px;
height: 79px;
border-right: 1px dashed #333;
border-top: 1px dashed #333;
float:left;
z-index: 10;
position: relative;
background-image: url(/Images/Generic/BlackOverlay.png); 
background-repeat: repeat;
} 
 
/* The Map Icons */
#map_icon
{
width: 50px;
height: 50px;
margin-top: 15px;
margin-left: 15px;
z-index: 25;
position: absolute;
} 
#map_star
{
width: 50px;
height: 50px;
margin-top: 15px;
margin-left: 15px;
z-index: 15;
position: absolute; 
} 
#map_travelnorth
{
width: 20px;
height: 20px;
margin-top: 59px;
margin-left: 29px;
text-align: center;
z-index: 15;
float: left;
} 
#map_travelsouth
{
width: 20px;
height: 20px;
margin-left: 29px;
text-align: center;
z-index: 15;
float: left;
} 
 
#map_traveleast
{
width: 20px;
height: 20px;
margin-top: 29px;
text-align: center;
z-index: 15;
float: left;
} 
 
#map_travelwest
{
width: 20px;
height: 20px;
margin-top: 29px;
margin-left: 59px;
text-align: center;
z-index: 15;
float: left;
}

________
clueless

 

[Vragabond]

Hard to say without seeing the corresponding HTML. Here's a few thoughts.

1. IE6 does not support alpha transparency in PNG. If you're using that, you won't get lucky with IE6.
2. You seem to reference BlackOverlay.png twice, but you use different path each time. While this would affect all browsers if it were a problem, I felt like mentioning it for future reference.
3. Which of the elements is the actual map?

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[shavenlunatic]

1. yeah, we realise this, but for sake of better technologies we are not attempting to make the site fully compatible with IE6 otherwise we would end up in a padded cell (no pun intended)

2. didn't notice that, thank you

3. #map_main holds the map image

________
clueless

 

[Vragabond]

Would it be possible for you to show us the HTML as well, or even better, provide us with a link to a page in question (or a mock up of the page)?

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[shavenlunatic]

hmm, I don't know what the etiquette here is for posting URLs but if a mod deems it as advertising I will issue my apology

http://www.demonwar.net

It will require a log in for you to see the page - I've created a temporary account so you can get in to check (or you can sign up yourself if you preferred)

Just click the alpha login link

UserName: tektips
Password: p2j40psz

Cheers

________
clueless

 

[Vragabond]

You include height and width attributes on your image tag, but do not provide values in them. IE interprets no value as 1 and renders your image as 1x1 pixel. Unfortunately, that is only the beginning of your troubles.

If you fix this error, IE will hover (at least it does it for me) the image above all other elements on the page, presumably because of the positioning. You will need to re-think the entire page if you want to make this work. I would suggest using the image as a background in the container div. It is much easier to position backgrounds and the technique works the same in all the browsers.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[shavenlunatic]

Sorry I took so long to respond. You suggestion did solve a large chunk of our problem and we managed to work through the rest and it's now ok.

Thanks Vragabond

________
clueless