IE reloads the image?

damn it..its so irritatin

[ayushchd]

Hi...i have this code which is executed perfectly in mozilla but fails to function that perfectly in IE...What happens is that after i take my mouse over to the button...IE starts reloading the image....Please help its urgent

The CSS:

.rollover {
border-top: 2px solid White;
list-style-type:none;
background-image: url(back.jpg);
margin:0;
padding:0;
overflow: hidden;
}
.rollover li {
display: table-row;
background: url(back.jpg);
padding:0;
height:30px;
float: left;
}
.rollover li a {
display: block;
width: 140px;
height: 30px;
text-align: center;
font: bold 13px sans-serif;;
color:White;
background-image: url("nav.jpg");
background-repeat: no-repeat;
text-decoration: none;
font-size: 90%;
padding-top: 4px;
}
.rollover li a:hover {
display: block;
width: 140px;
height: 30px;
text-align: center;
font: bold 13px sans-serif;;
background-repeat: no-repeat;
background-position: 0 -30px;
font-size: 90%;
text-decoration: underline;
color: #DCDCDC;
padding-top: 4px;
}

The HTML :

<div class="rollover">

<li>
<a href = 'main.php'>My Portfolio</a>
</li>
<li>

<a href = 'shares.php'>My Shares</a>
</li>
<li>

<a href = 'logout.php'>Logout</a>
</li>

</div>

Ah! am stuck..plz help

[Demaestro]

try pre-loading the images using javascript

Some thing like this:

<SCRIPT language="JavaScript">
<!--
if (document.images)
{
pic1= new Image(100,25);
pic1.src="http://example.com/image1.gif";

pic2= new Image(240,55);
pic2.src="http://example.com/image2.gif";

pic3= new Image(88,31);
pic3.src="http://example.com/image3.gif";
}
//-->

function lightup(imgName)
{
if (document.images)
{
imgOn=eval(imgName + "on.src");
document[imgName].src= imgOn;
}
}

function turnoff(imgName)
{
if (document.images)
{
imgOff=eval(imgName + "off.src");
document[imgName].src= imgOff;
}
}

</SCRIPT>

The turnoff and lightup functions are the rollover functions. This should stop IE from loading them each time. If this doesn't work post back and we can try something else.

[cmarshall]

.rollover li a {
display: block;
width: 140px;
height: 30px;
text-align: center;
font: bold 13px sans-serif;;
color:White;
background-image: url("nav.jpg");
background-repeat: no-repeat;
text-decoration: none;
font-size: 90%;
padding-top: 4px;
}
.rollover li a:hover {
display: block;
width: 140px;
height: 30px;
text-align: center;
font: bold 13px sans-serif;;
background-repeat: no-repeat;
background-position: 0 -30px;
font-size: 90%;
text-decoration: underline;
color: #DCDCDC;
padding-top: 4px;
}

Quick niggle. No need to redefine the whole style here. Just do this:

.rollover li a {
display: block;
width: 140px;
height: 30px;
text-align: center;
font: bold 13px sans-serif;
color:White;
background-image: url("nav.jpg");
background-repeat: no-repeat;
text-decoration: none;
font-size: 90%;
padding-top: 4px;
}
.rollover li a:hover {
background-position: 0 -30px;
text-decoration: underline;
color: #DCDCDC;
}

Also, you had two semicolons after san-serif. Probably made no difference.

You may want to specify a background-position in the "normal" a.

[cmarshall]

Also, one other thing: I have found that background images seem impervious to forced preloading. This may be deliberate, as they are considered relatively unimportant in the scheme of things. I have done the trick with the JavaScript preloads. I also do non-JS preloads, where I declare a hidden or 1px version of the pic in the page.

[Xapti]

Yeah I heard IE never caches background images... even moving hidden background position content to viewable it has to load it, I heard.

And just to be sure, does hidden actually preload in all browsers, or might it not load until it's set (if ever) to visibility:visible?
AFAIK I think it should work.

[edited by: Xapti at 8:01 pm (utc) on May 6, 2007]

[cmarshall]

Well, it works for foreground rollovers.