[Image Map, IE] Need help fixing odd error

Hello all,

I have an image map you can see at http://www.mzproperty.com/mztest/
It displays properly across all late browsers, except for IE 7 which doesn't produce the mouse over effect for only two regions; Northern Portugal and Azores. I simply can't figure out what is wrong in my code.

Please help me figure this one out.

The CSS:

#map {
  position:relative;
  margin:0;
  padding:0;
  width:150px;
  height:152px;
  background:url(img/ptmap.png) no-repeat left top;
  font-size:8pt  /* todo: em */
}

#map li {
  margin:0;
  padding:0;
  list-style:none
}

#map li a {
  position:absolute;
  display:block;
  text-decoration:none
}

#map li a span { display:none }

#map li a:hover span { /* todo: relative dimensions */
  position:relative;
  display:block;
  width:125px;
  left:20px;
  top:20px;
  padding:5px;
  border:1px solid #4D4DC9;
  background:#93DB54;
  text-decoration:none;
  line-height:110%;
  color:#000000
}

#map a.north   {left:81px; top:  5px; width:65px; height:55px}
#map a.center  {left:70px; top: 70px; width:77px; height:40px}
#map a.south   {left:80px; top:114px; width:61px; height:36px}
#map a.azores  {left: 6px; top: 12px; width:53px; height:47px}
#map a.madeira {left: 7px; top: 91px; width:55px; height:40px} 

Code (markup):

The HTML:

    <ul id="map">
      <li><a class="north" href="#" title="North">
      <span><b>Northern Portugal</b></span></a></li>
      <li><a class="center" href="#" title="Center">
      <span><b>Center Portugal</b></span></a></li>
      <li><a class="south" href="#" title="South">
      <span><b>Southern Portugal</b></span></a></li>
      <li><a class="madeira" href="#" title="Madeira">
      <span><b>Madeira Archipelago</b></span></a></li>
      <li><a class="azores" href="#" title="Azores">
      <span><b>Azores Archipelago</b></span></a></li>
    </ul>

Code (markup):

 

Hmm, IE6 does the same thing, except it's also not showing the spans (and it should, I know cause I did this same trick a few times... )

I was actually doing the same thing recently and I think think think that it's a Haslayout thing... Unfortunately, while we might be able to fix for IE6, IE7 is apprently extra buggy (maybe not for this case, I hope, but I'm having a hell of a time with the Suckerfish menus and IE7 doing HasHavock all over the place).

The only difference I've done is instead of display: none and display: block on hover, I've moved it a gazillion px to the left. Not that that is anything.

I'm guessing you're either triggering Haslayout somewhere in your list, or your NOT. I ran across this thread and it'll be an interesting read: http://www.webmasterworld.com/css/3146637.htm

I'd say try various things such as position: relative and using/removing Haslayout triggers on the li's. I see in IE6 that the titles show, not the span, but again no titles for Azores or Oporto. This is why I think it's Haslayout. Your positioning of the a's on the top is somehow being affected by the li's not having layout. The a's should already have layout as they are positioned absolutely. IE7 has some additional triggers such as setting overflow and the such-- but you want something that will work in both IEs. I'll be damned why the spans aren't showing in IE6. They should... the only thing I can think of with IE6 is that going from display: none to display: block isn't enough of a trigger for IE6 and maybe you need to add something like
li a:hover {
visibility: visible;
}

Even though you're not hiding it. Other triggers are things like changing the background colour or font colour upon :hover, but usually we don't want to change anything, so setting visibility to visible magically does it. I'll bet you'll get your spans showing in IE6 (only for the three bottom ones) when you do that.

 

Thanks very much for all the information, Stomme. You gave me something to hold on. I'll investigate further.

 

Well, it didn't take me long to find a possible cause for IE once you pointed me on that direction. Adding position:absolute to #map li did the trick, thus forcing layout on the li's.

Meanwhile, also added visibility:visible to #map li a:hover span and #map li a:hover { visibility: visible; }. If possible, I would appreciate a quick check on IE6 to make sure the spans show now.

 

Just checked in IE6. Looks beautiful, and isn't touchy-- I can slide the mouse along the title and keep it onscreen too. Tab focusses through them as well, though doesn't show the spans (you might as well add them).

#map li a:focus span, #map li a:hover span, #map li a:active span { /* todo: relative dimensions */
  position:relative;
  display:block;
  width: 125px;
  etc...
}

Code (markup):

The :active is there for IE6 again, as it has no :focus but thinks :active counts : )

Looks great otherwise. Listen, you might want to download these:

http://tredosoft.com/Multiple_IE

There's still issues with Vista but if you've got an XP machine, it's invaluable. You really need to be able to check in IE6 since apparently Microsoft's "automatically updating" everyone with XP to IE7 didn't go through. You just can't test a site properly with browsershots.org

 

Invaluable information once again, Stomme. Thank you very much.

 

Just an update...

adding the definitions didn't help solving the span problem. However it made me realize the spans where there, naturally. I fixed by instead just adding cursorointer to #map li a:hover span.

I think I can wrap this one up. I wouldn't have done it without your help. Thank you once again.