Off the top of my head, I think z-index only has an effect on positioned
elements. Add postion: relative to the div.caption statement (and you
also won't need the z-index on 'div.image img'). This does the trick in
Firefox, haven't checked this in IE for you though.
body {
background: #FFF;
}
div.image {
width: auto;
float: right;
margin: 20px;
}
div.image div.caption {
background: url(bg.gif) no-repeat top right;
margin: -15px 0 0 0;
padding: 25px 10px 10px 10px;
z-index: 100;
position: relative;
}
div.image div.caption p {
margin: 0;
font-family: Tahoma, "Trebuchet MS", "Tw Cen MT", Arial;
font-size: small;
text-align: right;
}
________________
Eric Orton
Development Consultant
Areeba Solutions Pty Ltd
Level 9/607 Bourke Street
Melbourne VIC 3000 Australia
ph: +61 3 9629 3111
fax: +61 3 9629 3122
[EMAIL PROTECTED]
http://www.areeba.com.au/
________________________________
From: [email protected]
[mailto:[EMAIL PROTECTED] On Behalf Of Adam Burmister (DSL
AK)
Sent: Monday, 10 April 2006 7:49 AM
To: [email protected]
Subject: [WSG] Help with a DIV overlaying an IMG
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 – 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
------------------------------------------------------
"This email is intended only for the use of the individual or entity named
above and contains information that is confidential. No confidentiality is
waived or lost by any mis-transmission. If you received this correspondence in
error, please notify the sender and immediately delete it from your system. You
must not disclose, copy or rely on any part of this correspondence if you are
not the intended recipient. Any communication directed to clients via this
message is subject to our Agreement and relevant Project Schedule. Any
information that is transmitted via email which may offend may have been sent
without knowledge or the consent of Areeba."
------------------------------------------------------
******************************************************
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
******************************************************
