ie not hovering properly

**peach** · Apr 16, 2006 04:52

I have one absolutely positioned element with a PNG background. For internet explorer I have an AlphaImageLoader set to load the PNG properly.

This has caused :hover functionality to mess up on all the elements positioned "abov" (on the z-axis) the PNG image.

Does anyone know a fix for this?

**all4nerds** · Apr 16, 2006 05:25

Hello

no-repeat center 2px
no-repeat 50% 2px

works for me

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>12345 12345 12345 12345 12345</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<style type="text/css">
	#boxwrap a {
	display:block;
	position:absolute;
	/*height:30px;
	width:30px;*/
	text-indent:-999999999px;
	background:black;
	cursor:pointer
	}

	#boxwrap a.north{width:100px;height:15px;left:37px;top:5px;}
	#boxwrap a.north:hover, #boxwrap a.north.over {background: url(x.jpg) no-repeat 50% 2px}
	</style>
	<script type="text/javascript">

	</script>
</head>
<body>
<div id="boxwrap"><a href="##" class="north">12345</a></div>


</body>
</html>

**peach** · Apr 16, 2006 05:27

Hey Mate, sorry I updated the thread just now, when I found out the problems were being caused by a PNG image below it.

**Paul O'B** · Apr 16, 2006 07:22

Hi,

Do you have a link to the page in question?

Some sizes of pngs will cause the links to be unclickable.

http://www.daltonlp.com/daltonlp.cgi...=1&item_id=217

However I have usually (not always) been able to fix this without changing the image size. The problem ssems to occur when the element that is holding the png has a position:relative defined and the the links in that area become unclickable.

The method I have used is to remove the position:relative form the same element that has the png applied and wrap an outer around it instead and apply position:relative to that instead. Assuming that the position:relative is needed of course.

Then also give the anchors a high z-index just to be sure. This usually works for me but I'd need to see your page to be sure.

**peach** · Apr 16, 2006 11:40

I got it done Paul, ended up doing what you said but with absolute positioning.
This stiff is not documented anywhere as far as I can google, maybe we should sticky it or sumthin.

**Paul O'B** · Apr 16, 2006 11:47

maybe we should sticky it or sumthin.

I'll add it to the faq

User Tag List

Thread: ie not hovering properly

Thread Tools

Display

AlphaImageLoader and hover problems

Bookmarks

Bookmarks

Posting Permissions