I am assuming that this is a css problem as I am not sure that there is any html code that could help.
I've tried to program a sales page, with 3 classes side by side. The problem that I have is in each class there is a rollover to display an example. When I mouse over to activate the rollover it makes the classes to the right go down the page. They return when the mouse is taken off the image.
Is there a way to stop this?
I have tried z-index and display: block but these haven't worked. The css code is;
#keyrings {Position: relative; /* the container */
top: 20px;
left: -360px;
max-width: 240px;
height: auto;
padding: 10px;
border: 1px solid black;
font-family: comic sans ms;
font-size: 0.80em;
color: black;
padding-left: 10px;
}
.coast-1b {Position:relative; /* main image */
top: 5px;
left: 10px;
}
.sunset { /* the rollover image */
display: none;
}
.keyring-1:hover + .sunset { /* shows the hidden image */
display: block;
position: relative;
top: 10px;
left: 5px;
box-shadow: 5px 5px 3px #888888;
}
The html used for the roll over is;
<div id="keyrings">
<div class="coast-1b">
<img class="keyring-1" src="http://what-do-christians-believe.co.uk/wdcb-images/coasters/coaster-scan/sunset.png" alt="Photo: sunset over the frozen sea" />
<img class="sunset" src="http://what-do-christians-believe.co.uk/wdcb-images/coasters/sunset.png" alt="sunset over the frozen sea">
</div>
</div>
you can see what happens here. Need to scroll about halfway down the url.
