Forum Moderators: not2easy
I use ul/li navigation where the “bullet point” is an image (an arrow), which moves towards the link's text on :hover. The image is positioned in the background, the text is indented.
It works fine in IE 6, NS6.2+, but not in IE 5. There when the page opens, both bullets and text are about 50px further to the right than intended. But when I move the cursor over either the bullet or link, everything jumps back to its correct position. And stays there.
I would much appreciate any advice on how to get rid of this 'special effect'.
Thanks
*******
.left {
width: 190px;
}
.left ul {
margin: 0;
padding: 0;
list-style: none;
}
.left ul li {
}
.left ul li a {
width: 100%;
display: block;
text-indent: 25px;
text-decoration: none;
background: #fff url(../images/navup.gif) no-repeat 10px;
}
.left ul li a:hover {
text-decoration: underline;
background: #ccc url(../images/navhover.gif) no-repeat 15px;
}
.left ul ul {
margin: 0;
padding: 0;
}
.left ul ul li {
}
.left ul ul li a {
width: 100%;
display: block;
text-indent: 40px;
text-decoration: none;
background: #fff url(../images/navup.gif) no-repeat 30px;
}
.left ul ul li a:hover {
text-decoration: underline;
background: #ccc url(../images/navhover.gif) no-repeat 35px;
A couple of things... list-style-type: none; should be applied to .left ul li, since the list items have bullets, not the list itself.
As for the "jumping", that's a common IE bug. Was trying to find some information about it, but I forgot what it's called. Anyone else who can fill in?
Tomas
