CSS background-image IE Display problems

background-image in div does not display after event-handler

[oona]

Hi,
I have 3 divisions with a visibility:hidden; property
which are made visible with a JS eventhandler onclick.

3 Links for these divs have a class with a background-image which changes on hover.
Each content div includes these 3 Links with the relevant active link given a different "active" class. These links are made visible/invisible along with the rest of the content in each div.

My problem with IE:
The bgimage shows up right when the page is first loaded, does not show after a link is clicked, only to return again with hover.
CSS:
a.example:link{
display: block;
width: 300px;
height: 16px;
line-height : 16px;
background-image: url(../images/basics/image.gif);
background-repeat: no-repeat;
border: 0;
font-family: Tahoma, Arial, sans-serif;
font-size: 11px;
font-weight: normal;
color: #333333;
text-decoration: none;
margin-left: 2px;
}
(I won't include all states here, but they follow in the order - visited, hover, active, focus)

JS:
is a simple visibility function, i won't post the code here
HTML:
<div id="text1">
<p>
<a href="javascript:;" onclick="MM_showHideLayers('text1','','show','text2,'','hide','text3,'hide')" class="examplehighlight">text1</a>
<a href="javascript:;" onclick="MM_showHideLayers('text1','','hide','text2,'','show','text3,'hide')" class="example">text1</a>
<a href="javascript:;" onclick="MM_showHideLayers('text1','','hide','text2,'','hide','text3,'show')" class="example">text1</a> </p>
<p>
The text for text1 is here...
</p>
</div>
The next 2 divs are in the same vain...

Has anybody any idea why IE 6 has a problem showing the css bg-image after an event-handler has been called?
All other properties in the class show up fine.
Oona

[SuzyUK]

Oona did you get this solved yet?

otherwise shameless *bump* as I don't know ;) ~ has anyone else seen this before?

Suzy

[oona]

Hallo Suzy,

changing IE's "temporary" (search for a new version) option to "automatic" gets rid of the problem.
It's not a solution, as this does not seem to be the default setting.

I've tried preloading the images, but as the initial loading is not the problem, this hasn't helped.

I may solve my problem with a JS rollover and take the images out of the stylesheet altogether, which of course is a pity, as adding the images to the css is a neat way of including them in a simple text rollover.

Una

[jetboy_70]

IE tends to have problems whenever a background image is used on a link. Even if you weren't swapping the backgrounds, you'd still get the hourglass showing briefly when you move your mouse pointer over the edge of the link.

However, putting the background onto another block level element wrapped around the link cures the flicker:

<div style="height: 16px; width: 300px; background-image: url(/image.gif);">
<a style="height: 16px; width: 300px;" href="javascript:;">text1</a>
</div>

Maybe you can adapt your Javascript to see if this approach makes a difference in your situation.

[jetboy_70]

Oops. Need to add 'display: block;' to A styles.

[oona]

Hi Jetboy_70,
thanks for the tip.
The bg-image has a hover status for which it needs a "hover" style, so putting it in a "static" wrap-around div, I'd still have to add a JS for the rollover effect.So I may as well take the image out of the styles as add another div. I think?

The problem really only arose because mac wouldn't show a small arrow (&#1464;) before the link, and no amount of character defining in the metatags could induce it to do so, so we turned it into a gif and included it in the link as a bgimage.

So, if anybody has any suggestions on mac character encoding, that'd help too!

Una