13 replies [Last post]
Tursas
Offline
Regular
Last seen: 16 years 27 weeks ago
Joined: 2004-02-09
Posts: 32
Points: 0

Hello people!

I have annoying flickering in my css menu. Could someone please check my project:

http://www.hotmark.biz/sites/index.html

Thank you!!!

Tursas

thenotch
thenotch's picture
Offline
Regular
Ozarks of Missouri
Last seen: 14 years 36 weeks ago
Ozarks of Missouri
Timezone: GMT-6
Joined: 2005-12-02
Posts: 17
Points: 0

CSS menu flicker badly in IE URGENT

I just looked at it in IE and Avant and didn't see any flicker at all in your menu.... :? :?

DisinfectedBarfbag
DisinfectedBarfbag's picture
Offline
Enthusiast
Kent, UK
Last seen: 16 weeks 5 days ago
Kent, UK
Timezone: GMT+1
Joined: 2005-08-06
Posts: 411
Points: 1

CSS menu flicker badly in IE URGENT

Firefox 1.5.0.1 and Opera 8.51 it works nicely, but in IE6 it flickers and is slower and also displays a rectangular box over the top part of the main image. I'll see if I can work out the problem, not sure atm.

This is all on XP Pro SP2+

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 47 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

CSS menu flicker badly in IE URGENT

IE has a problem with small background images (iirc, below 50 x 50) where it retrieves them from the server each time you change them in CSS. There are methods to overcome the problem - beside the obvious make your images bigger, more...

thenotch
thenotch's picture
Offline
Regular
Ozarks of Missouri
Last seen: 14 years 36 weeks ago
Ozarks of Missouri
Timezone: GMT-6
Joined: 2005-12-02
Posts: 17
Points: 0

CSS menu flicker badly in IE URGENT

Yep... I see it now.. the blocks under it when you hover

Tursas
Offline
Regular
Last seen: 16 years 27 weeks ago
Joined: 2004-02-09
Posts: 32
Points: 0

CSS menu flicker badly in IE URGENT

Hello Guys!

I will change the code so that I will have the hover state image as a large background image in the mainnavigation div and put the regular background on a tags. Then I will use the following:

div#navigationlist a:hover {
background-image: none;
}

I hope this does the trick.

Thanks!

Tursas

drhowarddrfine
Offline
Leader
Last seen: 10 years 36 weeks ago
Timezone: GMT-6
Joined: 2005-05-21
Posts: 764
Points: 0

CSS menu flicker badly in IE URGENT

If not, google for something called 'fouc'. I don't recall if it applies to IE6 or only earlier versions.

IE7 is 10 years behind the standards or wrong.
But it works in IE!
IE is a cancer on the web -- Paul Thurott

Tursas
Offline
Regular
Last seen: 16 years 27 weeks ago
Joined: 2004-02-09
Posts: 32
Points: 0

CSS menu flicker badly in IE URGENT

OK. Now I made some changes to the site.

But I am getting really frustrated cause I cannot get the hover or thhe active styles to work on the main menu.

These two are my problem:

ul#mainmenulist li a:hover {
background-image:none;
}
.active a {
background-image: none;
}

Could someone help me. PLEASE!

The site

Tursas[/url]

Tursas
Offline
Regular
Last seen: 16 years 27 weeks ago
Joined: 2004-02-09
Posts: 32
Points: 0

CSS menu flicker badly in IE URGENT

BTW what do you think about the site???

All critic si welcome...........

Tursas

DaveTheRave
Offline
Regular
Norwich
Last seen: 14 years 29 weeks ago
Norwich
Joined: 2006-01-22
Posts: 26
Points: 0

CSS menu flicker badly in IE URGENT

Tursas,

Something to bear in mind, the order of the CSS code is significant!

I discovered this myself, if you want to change to the hover state when you hove over a visited link, the hover definition needs to come after the visited definition. This applys to all definitions (I not sure what the correct terminology is for these css tag definitions).

eg

a:visited
{
...
}

Regards
Dave

a:hover
{
..
}

If you put them the other way around you will find that hover works until you visit the link.

Maybe this is your problem (I have not looked to see if it is).

Regards
Dave

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 21 weeks 1 day ago
Joined: 2004-06-30
Posts: 9668
Points: 801

CSS menu flicker badly in IE URGENT

LVFHA

Lord Vader's Former Handle Anakin

Link
Visited
Focus
Hover
Active

Laughing out loud

Verschwindende wrote:
  • CSS doesn't make pies

DaveTheRave
Offline
Regular
Norwich
Last seen: 14 years 29 weeks ago
Norwich
Joined: 2006-01-22
Posts: 26
Points: 0

CSS menu flicker badly in IE URGENT

Piney,

Quote:
Link
Visited
Focus
Hover
Active
If thats how you want them to work that is.
You may for example want to hover to no longer work after you have visited a link, in which case you might change the order to:
Link
Focus
Hover
Visited
Active

Regards
Dave

Tursas
Offline
Regular
Last seen: 16 years 27 weeks ago
Joined: 2004-02-09
Posts: 32
Points: 0

CSS menu flicker badly in IE URGENT

Thank you for your answers!

I understand your point and I have tried your suggestions but I still have not found a proper solution.

Here is the code of the main menu:

<div id="mainmenu">
<ul id="mainmenulist">
<li id="yritys_but"><a href="yritys.html">Yritys</a></li>
<li id="yhteystiedot_but"><a href="yhteystiedot.html">Yhteystiedot</a></li>
<li id="jalleenmyyjat_but"><a href="#">Jälleenmyyjät</a></li>
<li id="materiaalipankki_but"><a href="#">Materiaalipankki</a></li>
<li id="tuotteet_but"><a href="tuotteet.html">Tuotteet</a></li>
<li id="etusivu_but" class="active"><a href="index.html">Etusivu</a></li>
</ul>
</div>

And here is the css:
div#topmenu {
	height: 122px;
}
div#mainmenu {
	width: 624px;
	height: 122px;
	float: left;
}
body#etusivu div#mainmenu {
	background-image:url(../images/etusivu/menu_on.jpg);
}
body#tuotteet div#mainmenu {
	background-image:url(../images/tuotteet/menu_on.jpg);
}
body#materiaalipankki div#mainmenu {
	background-image:url(../images/materiaalipankki/menu_on.jpg);
}
body#jalleenmyyjat div#mainmenu {
	background-image:url(../images/jalleenmyyjat/menu_on.jpg);
}
body#yhteystiedot div#mainmenu {
	background-image:url(../images/yhteystiedot/menu_on.jpg);
}
body#yritys div#mainmenu {
	background-image:url(../images/yritys/menu_on.jpg);
}
ul#mainmenulist {
	margin: 0px 0px 0px 42px;
	padding: 0px;
}
ul#mainmenulist li {
	list-style-type: none;
	display: inline;
	margin: 0px;
	float: left;
	padding: 0px;
}
ul#mainmenulist li a {
	display: block;
	height: 122px;
	text-indent: -9999px;
	text-decoration: none;
	overflow: hidden;
}
li#yritys_but a{
	width: 70px;
	background-repeat: no-repeat;
	background-position: -42px;
}
li#yhteystiedot_but a{
	width: 105px;
	background-repeat: no-repeat;
	background-position: -112px;
}
li#jalleenmyyjat_but a{
	width: 110px;
	background-repeat: no-repeat;
	background-position: -217px;
}
li#materiaalipankki_but a{
	width: 133px;
	background-repeat: no-repeat;
	background-position: -327px;
}
li#tuotteet_but a{
	width: 79px;
	background-repeat: no-repeat;
	background-position: -460px;
}
li#etusivu_but a{
	width: 85px;
	background-repeat: no-repeat;
	background-position: -539px;
}
body#etusivu ul#mainmenulist li a {
	background-image:url(../images/etusivu/menu_off.jpg);
}
body#tuotteet ul#mainmenulist li a {
	background-image:url(../images/tuotteet/menu_off.jpg);
}
body#materiaalipankki ul#mainmenulist li a {
	background-image:url(../images/materiaalipankki/menu_off.jpg)
}
body#jalleenmyyjat ul#mainmenulist li a {
	background-image:url(../images/jalleenmyyjat/menu_off.jpg)
}
body#yhteystiedot ul#mainmenulist li a {
	background-image:url(../images/yhteystiedot/menu_off.jpg)
}
body#yritys ul#mainmenulist li a {
	background-image:url(../images/yritys/menu_off.jpg)
}
ul#mainmenulist li a:hover {
	background-image:none;
}
.active a {
	background-image: none;
}

Does anyone of you find a problem???

Tursas[/code]

Tursas
Offline
Regular
Last seen: 16 years 27 weeks ago
Joined: 2004-02-09
Posts: 32
Points: 0

CSS menu flicker badly in IE URGENT

Hello again Guys!

I was able to make the page work perfectly on FF and also in IE (it does not flicker anymore!), but now I have a problem with right side menu in IE. I cannot get the links to stay in sidemenu div.

Please help me!!!

http://www.hotmark.biz/sites/index2.asp

Thank you!!

Tursas