[WSG] Help with a DIV overlaying an IMG

Sun, 09 Apr 2006 14:52:40 -0700

The other night I had an idea for sprucing up my image captions by overlaying a caption Div (with a background image) over an image.

 

This is the code I’m currently using (forgive semantics at this investigation stage):

See the online demo at: http://labs.flog.co.nz/css-help/captions/demo.html

 

<div class="image">
        <img src="katie.jpg" alt="Katie" />
        <div class="caption">
               <p>Katie Holmes &ndash; The Patron Saint of Web Developers</p>
        </div>
</div>


 



Combined with the following CSS:







div.image {
        width: auto;
        float: right;
        margin: 20px;
}
div.image img {
        display: block;
        z-index: 1;
}
div.image div.caption {
        background: url(bg.gif) no-repeat top right;
        margin: -15px 0 0 0; /* negative margin to place transparent BG image over main image */
        padding: 25px 10px 10px 10px;
        z-index: 100; /* force above main imag */
}
div.image div.caption p {
        margin: 0;
        font-family: Tahoma, "Trebuchet MS", "Tw Cen MT", Arial;
        font-size: small;
        text-align: right;
}



 



This works as I expect in IE, but not in Firefox. Can
anybody please provide an explanation of this behaviour different?



 



http://labs.flog.co.nz/css-help/captions/demo.html



 



Thanks,



Adam

Reply via email to