homepage Welcome to WebmasterWorld Guest from 23.20.220.79
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
CSS hover image link not working in IE
dreamee




msg:4369548
 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]

 

penders




msg:4369597
 9:17 pm on Oct 1, 2011 (gmt 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]

dreamee




msg:4369650
 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]

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved