The background picture flashes

[khunjack]

Dear All,
I have the following issue with the CSS solution (2).
Everytime I move the cursour over the pic it flashes


1.) If I display a picture/link like this .. it doesn't flash:

<a href="www.aaa.com"><img src="pic.gif" alt="" border="0" style="float: left; width: 250px; height: 163px; margin: 0 1.5% 0;" /></a>

works fine!

2.)Now doing it via CSS:

<a href="www.aaa.com" id="mainpic"><span>Test</span></a>

#mainpic {
float: left;
width: 250px;
height: 163px;
margin: 0 1.5% 0;
text-decoration:none;
background:url('pic.gif') no-repeat;
border:medium none;
display:block;
}
#mainpic span {
visibility:hidden;
}


Would be very nice if somebody could tell me what I'm doing wrong.
Thanks a lot in advance
Jack

[hemebond]

When does it flash? When you mouse-over it? When the page is loadeding? After the page has rendered? When you click? When? What browser are you using? Does it only happen in one browser?

[khunjack]

Hi hemebond,
thank you for your reply.

It flashes when I move the mouse over the picture.
The page is rendered.

And it happens only with the famous MS IE.
(Opera, Netscape, Firefox...no issue/flashing .. pictures stays at is).

Thanks - Kindest regards
Jack

[mindlessLemming]

This is IE FLICKER (http://www.google.com/search?q=IE+Flicker&sourceid=mozilla&start=0&start=0&ie=utf-8&oe=utf-8) - it is the bane of CSS rollovers everywhere :mad:

[khunjack]

exactly "a:hover{ text-decoration: underline;}
"
.. thank you very much.
I'm happy it stopped flashing at me :)


Kindest regards
Jack