Welcome to WebmasterWorld Guest from 54.205.96.97

Forum Moderators: not2easy

CSS hover image link not working in IE

   
3:51 pm on Oct 1, 2011 (gmt 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)

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



<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)



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]

 

Featured Threads

My Threads

Hot Threads This Week

Hot Threads This Month