Welcome to WebmasterWorld Guest from 54.197.90.95

Forum Moderators: not2easy

Message Too Old, No Replies

CSS hover image link not working in IE

     
3:51 pm on Oct 1, 2011 (gmt 0)

New User

5+ Year Member

joined:Oct 1, 2011
posts: 2
votes: 0


Please mouse over to "Pebbles Wash" and click the image. It working fine in Chrome and Firefox, but the link not working in IE. Here's my code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Konzept Garden</title>
<style type="text/css">
* {margin: 0; padding: 0;}
#main {
width: 520px;
height: 228px;
background-image: url(stone.jpg);
background-repeat: no-repeat;
position: relative;
margin: 0 auto;}

#main ul li {
list-style: none;
display: inline;}

#main ul li:hover {
visibility: visible;}

#main ul li a {
position: absolute;
z-index: 1;}

#main ul li a:hover {
z-index: 100;}

#main ul li img {
position: absolute;
top: 300px;
right: 999em;}

#submain1 .butt1 a {
left: 8px;
top: 80px;
width: 90px;
height: 32px;}

#main ul .butt1:hover img {
left: 8px;
top: 80px;}
</style>
</head>
<body style="margin: 0px; width: 520px;">
<div id="main">
<ul id="submain1">
<li class="butt1"><a href="http://example.com/p_pebbles.html" target="_blank"></a><img src="p1.png"></li>
</ul>
</body>
</html>


Anyone any idea? Please help, thanks in advanced.

[edited by: alt131 at 5:25 am (utc) on Oct 3, 2011]
[edit reason] Thread Tidy - Examplifying [/edit]

9:17 pm on Oct 1, 2011 (gmt 0)

Senior Member

WebmasterWorld Senior Member penders is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:July 3, 2006
posts: 3123
votes: 0


<li class="butt1"><a href="http://example.com/p_pebbles.html" target="_blank"></a><img src="p1.png"></li>


I think your fundamental problem is that your link does not have any content. Your image <img src="p1.png"> should probably be inside your link.

You should also think about using the :hover pseudo-class on the anchor rather than the li where possible. The anchor is the clickable region in this instance so it makes sense that only this should trigger the hover effect. (And IE6 only support :hover on the anchor element - if that is a concern.)

And welcome to WebmasterWorld :)

[edited by: alt131 at 5:26 am (utc) on Oct 3, 2011]
[edit reason] Thread Tidy - Examplifying [/edit]

2:17 am on Oct 2, 2011 (gmt 0)

New User

5+ Year Member

joined:Oct 1, 2011
posts: 2
votes: 0


Hi penders, thanks for your prompt reply.
I managed to solve it!

I changed my code of lower part becomes:

#submain1 .butt1 a:link {
left: 8px;
top: 80px;
width: 90px;
height: 32px;}
#main ul .butt1 a:hover img{
left: 0px;
top: 0px;}
</style>
</head>
<body style="margin: 0px; width: 520px;">
<div id="main">
<ul id="submain1">
<li class="butt1"><a href="http://example.com/p_pebbles.html" target="_blank"><img border="0" src="p1.png"></a></li>
</ul>
</body>
</html>

[edited by: alt131 at 5:26 am (utc) on Oct 3, 2011]
[edit reason] Thread Tidy - Examplifying [/edit]

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members