I want to overlap a css div border with an image, can it be done?

I want to overlap a css div border with an image, can it be done?

Its to create a speach bubble, it has to be xhtml strict. Border 1px and then at the bottom a graphical V for the bubble point.

Can you just build it into the image?

If not:
Place the image inside a DIV that is slightly smaller then the image by setting it’s height and width. Set it’s overflow to visible, and place a border. Then lower the image’s z-index to like 0 or -1 so then the DIV is on top.

To overlap one element on top of another wrap them in a position:relative container and then define each of them as position:absolute within the container.

your getting close to being built into my interflora-SEND_FLOWERS_TO array , just one thing whats the parent propert actually doing on the containing div, is it actually enabling the absolute positioning of the elements within it or just keeping it in nomal flow for positioning

With felgall and mine, the outer DIV is where the border comes into play. With felgall’s, the RP is to contain the AP, as you suggested.

Any position:absolute elements inside a position:relative are outside the document flow but positioned relative to that position:relative element.

Without the position:relative any position:absolute is relative to the window and will not move if the document reflows.

ok, now ie6 doesnt position them in the right place, it sits on the bottom of the main rounded box and doesnt overlap. Heres the related css, with the other stuff contained inside the rounded box.
the url is http://www.rbcreations.co.uk/ewto/news%20box.html

its fine in firefox but ie6 isnt cool, dunno about ie7 etc as dont know how to install multiple versions of ie, YEH I KNOW , but I figue if its ok in ie6 its ok in newer, wrong assumption probably. How far do you go back or is it mainly client dependant?

.news_box{
background:url(images/gradient_bg_sprite.gif) repeat-x 0px -42px;
position:relative;
background-color:#eeeeee;
width:340px;
height:900px;
}

h2.news_box_heading{
width:auto;
height:auto;
margin-top:14px;
margin-left:10px;
}

h2.news_box_title{
width:auto;
height:auto;
margin-top:7px;
margin-left:3px;
}

.rounded_box{
position:absolute;
left:10px;
top:60px;
-moz-border-radius:8px 8px 8px 8px;
background-color:#FFFFFF;
border:1px solid #C9C2C1;
width:310px;
height:auto;
}

span.knife_image{
background:url(images/WS_small_jpg_sprite.jpg) no-repeat -50px 1px;
height:100px;
width:68px;
display:block;
border:1px solid #C9C2C1;
padding:1px;
margin-left:3px;
margin-bottom:13px;
}

.news_text{
position:relative;
font:normal x-small Arial;
color:#990000;
width:280px;
height:auto;
margin:auto;

}

div.author_speaktip{
position:absolute;
top:282px;
left:10px;
background: url(images/speach_bubble.gif) no-repeat 50px -1px;
height:100px;
width:310px;
}

but I figue if its ok in ie6 its ok in newer, wrong assumption probably.

Absolutely wrong assumption!

The question is, do you need the site to work in IE6? Or are you not planning on a lot of visitors from IE6? If not, then upgrade to IE8, and get it working in IE7 and IE8. (IE7 comes with IE8, just use developer tools to change it.)

FYI, to get it to work in all three, you’re going to have to have a lot of hacks and browser specific code for IE6. That’s the reason I don’t work with IE6, never bothered to learn all those hacks and things due to that it’ll soon be an unsupported browser.