Strange flickering with IE

Whenever you use a link on my site in IE you are getting a strange flickering. I’l stooped. It works fine in FF and chrome. Can’t explain the strange behaviour in IE. Anyone?

http://www.rockarena.be

Note; only events and wie link works.

I found out that the problem occurs because of the background image on the site and the overlay png on the content part. Still weird! :slight_smile:

Can you give a code example? I’m not sure I understand you. Sorry!

here you are

Wat you could do is to make from the normal and hover state one button instead of two and set another background position on hover. For example your wie button is 84 px wide. So to make 1 button containing normal and hover state your button would be 168px wide:


#navigation a.wie {
    width: 84px; background: url(../images/navigatie/wielink2.png) 0 0 no-repeat;
} 

#navigation a.wie:hover {
    background-position: -84px 0;
} 

I hope this make sense

Would the use of css sprites help reduce the load time?

It’s the delay waiting for your background images to download (and it happens in FF too, the first time someone visits the page).

It’s normal when you use separate images for link backgrounds.

Yeah that’s what I thought! Thanks.

Just saw the site in IE8, FF and Opera. I see that the links aren’t working as yet, but the hover image is only centered on events I.M.O. It is possible that it is optic but it look strange to me. On the wie:hover the image is under the w, on the menu:hover the image is a little left of the e and so on

Could you maybe give me a screenshot? I’m not seeing it here.

Really? Don’t see it.

If you don’t want to use sprites, you can set the background to the <li> to that used for hover of the <a> and set the hover for <a> to transparent, no image, so that on hover the <li>'s background can be seen. This means that both images are present when the page is first viewed, so no flicker effect.

PS it’s nothing to do with the css being valid or not. It’s the way the web works. Until the user hovers on a link, the hover effect image will not have been loaded at all. That’s why the method above works with no flicker, as does the use of sprites, as the hover state image IS loaded when the page is first viewed.

Crap! And is there no way to solve this? I mean, my code is valid so why doesn’t this work?

Didi I do something really wrong in making this css? Should I have used a table for my navigation? That would be crazy ! :slight_smile:

Good for you. One last thing though. The hover image is not centered. It is about 10 px to the left.

Try something like this.

#navigation ul li {
display: block;
float: left;
background: url(…/images/navigatie/wielink.png) no-repeat; /* normally hidden due to the next style, only revealed on hover */

	}

#navigation a.wie {
width: 84px;

background: url(../images/navigatie/wielink2.png) no-repeat; /* seen when page viewed normally */

}

#navigation a.wie:active {
width: 84px;

background: url() ; /* no image, so with no background color either, it's transparent */

}

#navigation a.wie:hover {
width: 84px;

background: url(); /* as above */

}

This is my code. Could you apply what you mean? Could I apply your idea to my content div?

#navigationcontainer{
	list-style: none;
	padding: 0px 0px 0px 0px;;
	margin: 0;
	overflow:hidden; 
	height:1%;
}

#navigation{
	width: 525px;
	float: left;
	padding-top: 7px;
	
}
	#navigation ul {
	
	}
		#navigation ul li {
			display: block;
			float: left;
		}
	
#navigation a {
	display: block;
	text-indent: -900%;
	position: absolute;
	outline: none;
	height: 69px;
}


	





#navigation a.wie {
	width: 84px;
	
	background: url(../images/navigatie/wielink2.png) no-repeat;
	
}

#navigation a.wieactive {
	width: 84px;
	
	background: url(../images/navigatie/wielink.png) no-repeat;
	
}


#navigation a.wie:hover {
	width: 84px;
	
	background: url(../images/navigatie/wielink.png) no-repeat;
	
	
}