This is my code. <div style="padding:6px; height:50px; width:300px; position:relative;"> <img src="/images/box.png" alt="" style="width:100%; height:100%; position:absolute; top:0px; left:0px; z-index:-1;"/> <img src="/images/t.png" alt="" style="width:100%; height:6px; position:absolute; top:0px; left:0px;"/> <img src="/images/b.png" alt="" style="width:100%; height:6px; position:absolute; bottom:0px; left:0px;"/> <img src="/images/l.png" alt="" style="width:6px; height:100%; position:absolute; top:0px; left:0px;"/> <img src="/images/r.png" alt="" style="width:6px; height:100%; position:absolute; top:0px; right:0px;"/> <img src="/images/tl.png" alt="" style="width:6px; height:6px; position:absolute; top:0px; left:0px;"/> <img src="/images/tr.png" alt="" style="width:6px; height:6px; position:absolute; top:0px; right:0px;"/> <img src="/images/bl.png" alt="" style="width:6px; height:6px; position:absolute; bottom:0px; left:0px;"/> <img src="/images/br.png" alt="" style="width:6px; height:6px; position:absolute; bottom:0px; right:0px;"/> <p>test text</p> </div> Code (markup): Basicly, the first img is the background and it needs to have a 6px margin on all sides (for the border which is 6px) this must also be true for the text. The next four imgs are the borders (top, bottom, right, and left). The last four imgs are the four rounded corners. I'm running into two problems. Problem 1: In IE, big shock , the padding is messing with the absolute position i.e. positioning it an extra 6px. Problem 2: I can't figure out how to make it so that the borders scale themselves to 100% - 12px (for the corners on either side) Could anyone help me with these problems? Thank you.
Try a different method, like using background images. Take your pick from these: DevWebPro - 25 Rounded Corner Techniques SmileyCat - Rounded Corners Roundup
Gotta go with Cash on this one - that's a REALLY bad technique for doing rounded corners... Why is it bad? 1) it uses 9 images to do the job of ONE. (all those extra handshakes could add up to ten seconds to the page load time) 2) it puts presentational images into the markup - those are borders, not content and as such have NO BUSINESS being in your HTML in the first place. 3) it's a LOT of markup. 4) none of the elements remain in flow. I'd suggest my Eight corners under one roof approach since it uses just one image and the markup isn't too big. The second demo: http://battletech.hopto.org/html_tutorials/eightcorners/corners2/template.html Being easier to follow in terms of how it works using just the one image for all those boxes. http://battletech.hopto.org/html_tutorials/eightcorners/corners2/eightCorners.png
It worked! Kind of... <html> <head> <style> .wideBox { width:640px; height:auto; } .borderTop, .borderBottom { height:16px; background:url(/images/borders.png) -16px 0; position:relative; font-size:1px; } .borderBottom { background-position:-16px -16px; } .borderTop b, .borderBottom b { position:absolute; top:0; right:0; width:16px; height:16px; background:url(/images/borders.png) -640px 0; } .borderBottom b { background-position:-640px -16px; } .borderLeft { padding-left:16px; background:url(/images/borders.png) top left repeat-y; } .borderRight { background:url(/images/borders.png) top right repeat-y; padding-right:16px; } .borderMiddle { background:#DDD; } </style> </head> <body> <div class="wideBox"> <div class="borderTop"><b></b></div> <div class="borderLeft"><div class="borderRight"><div class="borderMiddle"> [COLOR="red"]<br/>[/COLOR]<p>Some test content</p>[COLOR="red"]<br/>[/COLOR] </div></div></div> <div class="borderBottom"><b></b></div> </div> </body> </html> HTML: For some reason I have to add the <br/> tags around the content paragraph or else the top and bottom border divs float to high up or down. How can I fix this? Thanks.
I created an example page to show you what I mean. http://www.foreverplaying.com/test.php Could someone tell me how to make it work without the <br/> tags? Thanks.
It's just broken because of the default margins set by the browser. Just add the following css to reset the margins *{ margin: 0px; } PHP: