Question

I am unsure why my CSS is not working here.

What am I missing?

EDIT Here is the CSS for the main image and the smaller images:

    #luz{z-index:1;}
    #cadel{position:absolute; left:0px; top:490px; z-index:2;}
    #cadel:hover {background: url("../messages/files/tourdefrance/cadel-large.jpg") no-repeat 0px 286px; position:absolute; z-index:3;}
    #two{position:absolute; left: 645px; top:374px; z-index:2;}
    #two:hover {background: url("../messages/files/tourdefrance/2-large.jpg") no-repeat 405px 34px; position:absolute; z-index:3;}

Here is the HTML:

<div id="luz"> 
    <img src="/messages/Files/tourdefrance/LuzArdiden.jpg" width="920" height="690" alt="Luz Ardiden" /> <img id="cadel" src="/messages/Files/tourdefrance/cadel.png" width="229" height="200" alt="Cadel Evans" /> 
    <img id="two" src="/messages/Files/tourdefrance/2.jpg" width="110" height="78" alt="Alberto Contador looking at Lance Armstrong" />
</div>

The little images should be over the main image. They are not and I am unsure as to why.

Also when the little images are hovered they should show larger views.

Advice?

EDIT 2 Part of the issue turned out to be dreamweaver sticking the code in the wrong place thus FF would not show it. However my hover is not working? Ideas?

Answer 1

Are you trying to set a background-image for an image-tag?

That wont work. But thats only part two of your question…

try adding position:relative; to #luz

edit: I can’t see any of your mentioned css applying to your page