----- Original Message ----- From: Mary Ellen Curtin To: [email protected] Sent: Monday, April 28, 2008 3:27 PM Subject: Re: [css-d] Link "hand" disappears in IE
Ha! I found the page I was looking for, and answered my own question. As suggest by Steve Clay http://mrclay.org/wd/tests/ir/ "cursor: hand" is the solution! I hate to disagree, but there are other problems with your code that I guess you're not aware of. In Opera, your link2 doesn't work at all when hovered or clicked. In IE there is a very nasty delay whilst the links display refreshes. link1 is only active for part of the image. I'm not sure why you want to have text underneath the list images, that can't ever be seen. I've re-written the code without the text and some <div> definitions that were superfluous and it works as I think you want, in IE6, IE7, Firefox, Opera and Safari. The code validates and you have no need for a "cursor:hand" fix, as it doesn't get removed in the first place. :-) The positioning in Opera is not quite the same as in the other browsers, but I'm sure you can remedy that for yourself, if you think it's important. <new code> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> <html xmlns="http://www.w3.org/1999/xhtml";> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Image Replacement code</title> <style type="text/css"> body {background:#CCFFFF;} #navbar { width:450px; height:120px; position:absolute; top:0; left:0; padding:0; margin: 1em; } #navbar ul { width:385px; height:auto; list-style-type:none; margin: 0; padding: 0; } #navbar li a { width:128px; height:53px; margin:0; padding:0; border:none; } #link1 a { position:absolute; top: 50px; left: 0px; width: 128px; height: 53px; } #link2 a { position:absolute; top: 50px; left: 250px; width: 128px; height: 53px; } #link1 a { background:url(pix/Google_40blk.jpg) no-repeat; } #link1 a:visited { background:url(pix/Google_40wht.jpg) no-repeat; } #link1 a:hover { background:url(pix/Google_40gry.jpg) no-repeat; } #link2 a { background:url(pix/Google_40wht.jpg) no-repeat;} #link2 a:visited { background:url(pix/Google_40blk.jpg) no-repeat; } #link2 a:hover { background:url(pix/Google_40gry.jpg) no-repeat; } </style> </head> <body> <div id="navbar"> <p>navigation with image links:</p> <ul> <li><div id="link1"><a href="http://google.com";></a></div></li> <li><div id="link2"><a href="http://google.com";></a></div></li> </ul> </div> </body> </html> </new code> You could do some tidying up to optimise the code and you might consider gluing the images together and using background image displacement, if you want the display to run at optimum speed. BTW please don't take this the wrong way, but it's more usual to keep your "pix" in a folder called "images", which is where most people looking at code expect to find them. It's not essential and it's no judgement on you. Just a helpful tip. :-) Regards, Alan. www.theatreorgans.co.uk www.virtualtheatreorgans.com Admin: ConnArtistes, UKShopsmiths, 2nd Touch & A-P groups Shopsmith 520 + bits Flatulus Antiquitus ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
