Ah yes, I just realized I hadn't done that (brain fade - too early in the morning).
Thanks for the feedback. Now one more issue, does anybody know how to wrap the text without setting an explicit width? - A -----Original Message----- From: [email protected] [mailto:[EMAIL PROTECTED] On Behalf Of Eric Orton Sent: Monday, 10 April 2006 12:08 p.m. To: [email protected] Subject: RE: [WSG] Help with a DIV overlaying an IMG 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 ****************************************************** ****************************************************** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help ******************************************************
