SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    perfect = good enough peach's Avatar
    Join Date
    Jun 2004
    Location
    -Netherlands-
    Posts
    1,383
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    AlphaImageLoader and hover problems

    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?
    Last edited by peach; Apr 16, 2006 at 06:54.

  2. #2
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>

  3. #3
    perfect = good enough peach's Avatar
    Join Date
    Jun 2004
    Location
    -Netherlands-
    Posts
    1,383
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey Mate, sorry I updated the thread just now, when I found out the problems were being caused by a PNG image below it.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,299
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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.

  5. #5
    perfect = good enough peach's Avatar
    Join Date
    Jun 2004
    Location
    -Netherlands-
    Posts
    1,383
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,299
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    maybe we should sticky it or sumthin.
    I'll add it to the faq


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •