By UNarmed on

This is realy strange ... i have an a:hover state on a div with a background image. No matter where i place this image in my site, when i move my mouse over the div the darn image just has to load again and it isnt cached.

I have tried preloading the image a number of ways and it get the exact same result. Below is a example of the html and css i used.

<a href="http://smilesgroup.co.uk/cms/Treatments" class="BoxTreatmments1b"></a>
<a href="http://smilesgroup.co.uk/cms/Treatments" class="BoxTreatmments1"></a>

.BoxTreatmments1b{
display:block;
width:159px;
height:141px;
margin:0 auto;
margin-top:10px;
background:url(../images/BoxTreatmentsOver.gif)
}

.BoxTreatmments1{
display:block;
width:159px;
height:141px;
margin:0 auto;
margin-top:10px;
background:url(../images/BoxTreatments.gif)
}

.BoxTreatmments1:hover{
background:url(../images/BoxTreatmentsOver.gif);
}

This is the final thing i need to get sorted for a project so if someone could give me a hint or point me in the right direction i would greatly appreciated it!

Regards

Comments

UNarmed’s picture

UNarmed commented

When i place the above code in a standard html document it works perfectly so i am thinking its drupals doing =/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
.BoxTreatmments1b{
display:block;
width:159px;
height:141px;
margin:0 auto;
margin-top:10px;
background:url(file:///C:/wamp/www/sites/all/themes/smiles/images/BoxTreatmentsOver.gif)
}

.BoxTreatmments1{
display:block;
width:159px;
height:141px;
margin:0 auto;
margin-top:10px;
background:url(file:///C:/wamp/www/sites/all/themes/smiles/images/BoxTreatments.gif)
}

.BoxTreatmments1:hover{
background:url(file:///C:/wamp/www/sites/all/themes/smiles/images/BoxTreatmentsOver.gif);
}
}

-->
</style>


</head>
<body>
<a href="http://smilesgroup.co.uk/cms/Treatments" class="BoxTreatmments1b"></a>
<a href="http://smilesgroup.co.uk/cms/Treatments" class="BoxTreatmments1"></a>
</body>
</html>
UNarmed’s picture

UNarmed commented

My theme is based of the clean theme. I mainly changed the stylesheets, block.tpl.php and page.tpl.php if that makes a difference.

I have delelted all the stylesheets and styles inside my theme and the problem stil persists ... ehhhh im totally stomped 0_-