• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1153
  • Last Modified:

CSS hover blinking in FF

Hi,

I am trying to show an image when hovering an another one - images are not one on top of the other. It does work in IE7 but it is blinking horribly in FF.

Any help or reason why it is doing so will be appreciated.

Thank you
Here is the CSS
<style type='text/css'>
*{
	margin:0;
	padding:0;}
body{
	position: absolute;
	font-family:  'Trebuchet MS', Helvetica, serif;
	font-size: .8em;
	background-image: url(accueil_2.gif);
	background-repeat: no-repeat;
	background-attachment:fixed;
	background-position: left top;
	width: 950px;
	height: 500px;
	}
.cie {
	font-variant: small-caps;
	}
.pensee{
	font-style: italic; 
	text-align: center;
	border: none;}
#infocle {
	position: relative;
	/*(top: 100px;*/
	width: 150px;
	padding-right: 15px;
	margin-left: 15px;
	z-index: 200;}
#livres{
	position: absolute;
	top: 240px;
	left: 200px;
	width: 304px;
	height: 180px;
	margin: 0;
	padding: 0;
	z-index: 1500;	}
/*paramétrer la liste*/
#livres li {
	display: block;
	list-style: none;}
/*paramétrer les a*/
#livres a {
	display: block;
	/*text-indent: -9999px;*/
	text-decoration: none;
	outline: none;
	cursor: default;}
/*position qui réagit au hover*/
.pn {left: 0px; top: 0px; width: 304px; height:45px; z-index: 1500;}
.fg {left: -5px; top: 45px; width: 304px; height:45px; z-index: 1500;}
.et {left: -5px; top: 90px; width: 304px; height:45px; z-index: 1500;}
.fl  {left: -5px; top: 135px; width: 304px; height:45px; z-index: 1500;}
 
/*hauteur du rectangle du Anchor*/
.pn a {height: 45px;}
.fg a {height: 45px;}
.et a {height: 45px;}
.fl a {height: 45px;}
 
div.pn a:hover {
	display: block;
	position: absolute;
	top: 0px;
	left: 600px;
	width: 86px;
	height: 115px;
	background: url(livre_pn.gif);
	background-repeat: no-repeat;
	}
div.pn a{
	display: none;
	}
div.fg a:hover {
	position: absolute;
	top: 0px;
	left: 600px;
	width: 86px;
	height: 115px;
	background: url(livre_avenir.gif);
	background-repeat: no-repeat;
	}
</style>
 
and the html
<body>
 
<div id='livres'>
<ul>
		<li>
			<div class='pn'><a href=http://www.info-cle.ca/personnel/bib_pers.nsf> <span>pn</span></a></div>
			<div class="fg"><a href='#'><span>fg</span></a></div>	
			<div class="et"><a href=http://www.info-cle.ca/et/bibliotheque.nsf><span>et</span></a></div>	
			<div class="fl"><a href=http://www.info-cle.ca/et/fichelectures.nsf'><span>fl</span></a></div>
		</li>
</ul>
</div>
 
</body>

Open in new window

0
LearningLover
Asked:
LearningLover
  • 2
  • 2
1 Solution
 
David S.Commented:
It's doing that because the link moves out from under the cursor and then moves back under the cursor and it repeats over and over again, which makes the blinking affect.
0
 
LearningLoverAuthor Commented:
Thank you for your answer.

However, it doesn't explain that IE7 is not blinking.

Is there any other way to do this ?

TIA
0
 
David S.Commented:
Different browsers handle things differently. There doesn't seem to be a better explanation or this one.

Sure, there's another way. Add another <span> around all of the contents of each <a> and move it instead of the <a>.
0
 
LearningLoverAuthor Commented:
Thank you for your clue. Actually it did not work with an added span. However you put me on a trail to do something else. I put the image with an ID, float the image and now I have no problemos !

Thanks again.
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now