Problems with Left Border

[nootkan]

Hi everyone, I'm using 4.01 transitional doctype. My problem is this: I have a frame wrapped around a rounded corner header image, content area, right side bar and rounded corner footer image. I am trying to get the borders to only show between the header and footer. I have tried using a border-left and border-right in the frame but it shows above the header image, other wise it is exactly what I want. Is it possible to hide the border overflow above the content and rightsidebar divs? overflow:hidden doesn't work. I have also tried using padding inside of the content and rightsidebar but it never shows properly in all browsers. The borders are always short when the content doesn't extend to the footer. Didn't include all the css. The css below is what I tried with padding even though the padding isn't there.

#frame {
 width:850px;
 margin-right:auto;
 margin-left:auto;
 margin-top:03px;
 padding:0px;
 text-align:left;
 }
 
 #contentcenter {
 width:678px;
 padding:0px;
 float:left;
 background-color:#fff;
 border-left: 1px solid #dfe5e6;
 }
 
 #contentright {
 width:169px;
 padding:0px;
 float:left;
 text-align: center;
 background-color:#fff;
 border-right: 1px solid #dfe5e6;
 border-left:1px solid #dfe5e6;
 }
 
 #contentheader {
 position: relative;
 width:850px;
 height:123px;
 margin: 0 auto;
 background-image: url(../images/header.png);
 }
 
 #contentfooter {
 position: relative;
 width:850px;
 height:123px;
 margin: 0 auto;
 text-align:center;
 background-image: url(../images/footer.png);
 }

<div id="frame">
<div id="contentheader"></div>
<div id="contentcenter">content</div>
<div id="contentright">sidebar content</div>
<br clear="all">
</div>
<div id="contentfooter">footer content</div>

[rainborick]

Consider using the border-radius (and -moz-border-radius for Firefox) style setting on your elements. Your borders and backgrounds will then be rounded to match.

[nootkan]

Yeah I thought of that also but it won't work with IE 6. Hence the reason for the image.

[nootkan]

Okay I got this work by creating another div around the centercontent and contentright divs then adding a border around that. It still isn't perfect but seems to look acceptable. Hopefully it isn't considered too soupy.

[rainborick]

IE6's market share is well under 10% now and unless you have a compelling need to serve a niche market that depends on it, I think it's time to stop worrying about it. And since this is an issue of appearance, not functionality, why not design for the broadest audience?