On 14 May 2006, at 10:12 am, Ingo Chao wrote: >> http://www.tellura.co.uk/soundsteps/ >> Also, I have noticed that in IE the padding at the bottom of the >> graphic is about twice the 3px it should be. Is this another IE bug? > > display:block on this img should solve it.
It did - thanks. I have come across this before so I really should have remembered it. >> If anyone could point me at a general example of how to position >> graphics over other elements I'd be grateful. > > One option: Define a containing block via position:relative on any > box. > apply position:absolute to the img/imgwrapper and offset it with > top+left relatively to the origin of the c. b. > That is looking good, except that now the graphic is overlaying the footer too (http://www.tellura.co.uk/soundsteps). Here is the html: <div id="pic_container"> <div id="picture_overlay"> <img src="images/boy_with_manual.jpg" /> </div> </div> and here is the css: #pic_container { display: inline; /* to fix IE float margin bug */ position: relative; border: 1px #ff0000; } #picture_overlay { position: absolute; top: 160px; left: -180px; background-color: #ffffcc; border: 1px solid #000000; padding: 3px; } #picture_overlay img { display: block; } Is this what you meant? Also, I'm not clear where the containing block (pic_container) actually is! Where is its origin? Thanks for your help, Ian. -- Dr Ian M Piper [EMAIL PROTECTED] skype: ianmpiper -- Where is the wisdom we have lost in knowledge? Where is the knowledge we have lost in information? ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
