Forum Moderators: not2easy

Message Too Old, No Replies

Problems with Left Border

         

nootkan

1:06 am on Mar 31, 2011 (gmt 0)

10+ Year Member



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

1:27 am on Mar 31, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



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

2:17 am on Mar 31, 2011 (gmt 0)

10+ Year Member



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

nootkan

5:08 pm on Apr 2, 2011 (gmt 0)

10+ Year Member



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

3:35 am on Apr 3, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



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?