flashing tabbed menu in IE

I'm not new to css, but this is something I have never seen...

[xfinx]

Hi all,

When I hover the menuitems (from which the html is written down) The part of the <a> tag flashes.
The site is built in Standards compliance mode...
Does someone knows why and what to do about it?
Thnx..

Here is the CSS:
#header #menu {
position: absolute;
right: 0px;
top: 95px;
line-height: 30px;
z-index: 300;
}
#menu span {
float: left;
display: block;
padding-left: 15px;
line-height: 30px;
background: url(../img/m_bgl.gif) no-repeat left top;
}
#menu span a {
color: #000;
line-height: 30px;
position: relative;
float: left;
display: block;
padding-right: 15px;
background: url(../img/m_bgr.gif) no-repeat right top;
}
And here is the HTML:
<div id="menu">
<span><<a href="" title="">computer</a></span>
<span><a href="" title="">telecom</a></span>
<span><a href="" title="">elektronica</a></span>
<span><a href="" title="">entertainment</a></span>
<span><a href="" title="">financieel</a></span>
<span><a href="" title="">huis &amp; lifstyle</a></span>
<span><a href="" title="">reizen</a></span>
<span><a href="" title="">vraag &amp; aanbod</a></span>
</div>

[benihana]

<edit> totally missed what you were getting at.

Are you viewing in IE6 and seeing the background ikmage flicker briefly when you mouseover?.

If so its quite a common problem causd by the way ie caches images, and the fix involves some server configuration changes (apparently)</edit>

[edited by: benihana at 3:29 pm (utc) on Dec. 19, 2005]

[Receptional Andy]

Works fine for me, albeit with no background images (might be the problem?)

Which version of IE are you testing with?

[xfinx]

I am testing with IE 6 & <
it is really annoying.. is there something I can do?
mm maybe I should add another span tag... because you don't hover on that tag, only the A tag..

!ie-- stupid browser

[xfinx]

I have it working, A nice tabbed menu using css :-)
without flickering in IE ;-)
unfortunally you need to add an extra tag :-(

it works on FF, Opera8 (Opera 7.2 eats it, but who cares, who want a bannered browser as there is a free one aswell.. ;-) ), IE 5.0+

html:
<div id="menu">
<span><span><a href="" title="">computer</a></span></span>
<span><span><a href="" title="">telecom</a></span></span>
<span><span><a href="" title="">elektronica</a></span></span>
<span><span><a href="" title="">entertainment</a></span></span>
<span><span><a href="" title="">financieel</a></span></span>
<span><span><a href="" title="">huis &amp; lifstyle</a></span></span>
<span><span><a href="" title="">reizen</a></span></span>
<span><span><a href="" title="">vraag &amp; aanbod</a></span></span>
</div>

css:
#header #menu {
position: absolute;
right: 0px;
top: 95px;
line-height: 30px;
z-index: 300;
}
#menu span {
float: left;
display: block;
line-height: 30px;
background: url(../img/m_bgl.gif) no-repeat left top;
padding-left: 10px;
}
#menu span span {
line-height: 30px;
padding: 0;
padding-right: 10px;
background: url(../img/m_bgr.gif) no-repeat right top;
}
#menu span a {
color: #000;
line-height: 30px;
position: relative;
}

[pageoneresults]

Couldn't you just preload the images using JavaScript and avoid all the hacks?

[xfinx]

Actually I don't like that idea!
This idea is much cleaner that JS.
Actually, this is much less code than JS, right?