homepage Welcome to WebmasterWorld Guest from 54.242.200.172
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: DrDoc

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.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved