Page 1 of 1

CSS border display issue

Posted: Mon Mar 01, 2004 5:16 pm
by Unipus
I'm having this problem where borders aren't properly showing up on my divs unless they have an explicit height declared in the css. The borders seem to collapse to a single pixel, while the rest of the div displays normally. To this I say, "what the hell?"

Obviously a message can vary significantly in length, so setting an explicit height isn't an option.

Looky:
example

Note: this problem doesn't seem to appear on IE. I'm using Firebird/fox and seeing it, though.

Posted: Mon Mar 01, 2004 7:09 pm
by no_memories
The sollution is to make wrapper(s) divs and if you need padding a 3rd div. The 2nd and 3rd divs can be placed relative or absolute to the parent container. This takes care of many cross browser issues.

Style:

Code: Select all

#bodywrapper {
position: absolute;
top: 20px;
left: 20px;
width: 400px;
height: auto;
margin: 0px;
padding: 0px;
color: #000;
background: #666;
z-index: 1;
}

#bodypadding {
position: relative;
width: 100%;
height: 100%;
margin: 0px 0px 0px 0px; /* use margins to adjust how far away you want the child container to be from the parent */
padding: 10px;
color: #000;
background: #999;
border: 5px solid #f00;
z-index: 2;
}

#body {
position: relative;
width: 100%;
height: 100%;
margin: 20px 20px 20px 20px; /* use margins to adjust how far away you want the child container to be from the parent */
padding: 10px;
color: #000;
background: #fff;
border: none;
z-index: 3;
}
Place your divs like so:

Code: Select all

<div id="bodywrapper">
<div id="bodypadding">
<div id="body"><h3>Welcome</h3></div>
</div>
</div>