Image map in ul list

Status
This thread has been Locked and is not open to further replies. Please start a New Thread if you're having a similar issue. View our Welcome Guide to learn how to use this site.

musicray

Thread Starter
Joined
Jan 14, 2010
Messages
1
My image map works properly in the latest versions of Firefox, Opera, & Camino for Mac, but not in Safari and Google Chrome.

The <li> hover element disappears when I hover over where the coordinates are for the image map. The image map will work if I have it placed within the body tag alone but not if it is within the <ul> or <li> hover affect.

Any suggestions?

Here is may test code and css:

<body>

<div id="test">

<ul>
<li><img src="object-image-map-faces.png" border="0" usemap="#Map" width="191">
<map name="Map"><area shape="rect" coords="3,6,65,61" href="http://www.apple.com" target="_new" alt="Smile1">
<area shape="rect" coords="68,6,126,62" href="http://www.me.com" target="_new" alt="SMILE2">
</map>
</li>
</ul>

</div>


</body>

#test {
position: absolute;
top: 200px;
left: 200px;
z-index: 1
}

#test ul:hover li {
position: relative;
top: 10px;
left: 10px;
display: block;
width: 200px;
height: 100px;
background-color: #00CC66;
page-break-before: left;
visibility: visible;
overflow: visible;
}
 

Attachments

Joined
Apr 30, 2001
Messages
2,636
An element is a list item when its display property is set to list-item. The li element is set to list-item by default. But, on hover, you're changing the li's display to block. This could be causing Webkit to no longer display the li as a list item.

Avoiding that may solve part of the problem. But, Webkit seems a little quirky on hover compared to other browsers, so it may still have a bug.

You can file a bug at https://bugs.webkit.org/
 
Status
This thread has been Locked and is not open to further replies. Please start a New Thread if you're having a similar issue. View our Welcome Guide to learn how to use this site.

Users Who Are Viewing This Thread (Users: 0, Guests: 1)

As Seen On
As Seen On...

Welcome to Tech Support Guy!

Are you looking for the solution to your computer problem? Join our site today to ask your question. This site is completely free -- paid for by advertisers and donations.

If you're not already familiar with forums, watch our Welcome Guide to get started.

Join over 807,865 other people just like you!

Latest posts

Staff online

Top