IE hyperlink image bug?

I'm creating a 'fluid' menu. The menu is cms-driven so in the end i dont know which images are being placed in the menu and also i dont know the width of each menu item (cause it depends on the img width).

OK, everything fixed sofar, but IE5.x does something strange...it makes the images in the hyperlink NON-clickable, while the other space (height hyperlink minus img height) IS clickable.
Firefox does the job correctly.

I can fix it by setting the visibility of the image to hidden, and add a class to the hyperlink, so that a gets a background-image, but i find that 'fix' : IEK :)

So the question: how come IE5.x doesnt work here properly?

the code:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>my test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><style type="text/css">
body { behavior:url("csshover.htc"); }
* {font-family:arial,tahoma,verdana,helvetica; font-size:12px;}
ul#menu {
padding: 0;
margin: 0;
height: 30px;
list-style: none;
background: pink;
border-top: 1px solid blue;
border-bottom: 1px solid blue;
width:750px;
}
li {
float: left;
position: relative;
} * html li { width: 1px; } /* anders worden items niet achter elkaar gezet */
li ul {
position:absolute;
left:0px;
top:30px;
background:orange;
margin:0;
padding:0;
list-style: none;
width: 100px;
}
a {
display:block;
text-decoration:none;
color:gray;
font-weight:bold;
height: 30px;
}
li ul a {
color: green;
width: 100px;
}
/* regular hovers */
a:hover {
background-color: fuchsia;
color: #000;
}
ul ul, li:hover ul ul {
display:none;
}
li:hover ul, li:hover li:hover ul {
display:block;
}
.image1 {background: transparent url(menu_01_en.gif) top left no-repeat; }
.image2 {background: transparent url(menu_02_en.gif) top left no-repeat; }
.image3 {background: transparent url(menu_03_en.gif) top left no-repeat; }
.image4 {background: transparent url(menu_04_en.gif) top left no-repeat; }
.image5 {background: transparent url(menu_05_en.gif) top left no-repeat; }
img { 
padding: 0;
margin: 0;
border: 0;
}
/*ul#menu li img { visibility: hidden; }*/
</style>
</head>
<body>
<ul id="menu">
<li><a href="#" class="image1"><img src="menu_01_en.gif" alt=""></a>
<ul>
<li><a href="#">submenu</a></li>
</ul>
</li>
<li><img src="blokje.gif" alt=""></li>
<li><a href="#" class="image2"><img src="menu_02_en.gif" alt=""></a>
</li>
<li><img src="blokje.gif" alt=""></li>
<li><a href="#" class="image3"><img src="menu_03_en.gif" alt=""></a>
<ul>
<li><a href="#">submenu</a></li>
<li><a href="#">submenu</a></li>
</ul>
</li>
<li><img src="blokje.gif" alt=""></li>
<li><a href="#" class="image4"><img src="menu_04_en.gif" alt=""></a>
<ul>
<li><a href="#">submenu</a></li>
</ul>
</li>
<li><img src="blokje.gif" alt=""></li>
<li><a href="#" class="image5"><img src="menu_05_en.gif" alt=""></a>
<ul>
<li><a href="#">submenu</a></li>
</ul>
</li>
</ul></body>
</html>

IE hyperlink image bug?

FF works correct...

vinzzz

vinzzz

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week