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.
CSS border display issue
Moderator: General Moderators
- no_memories
- Forum Contributor
- Posts: 145
- Joined: Sun Feb 01, 2004 7:12 pm
- Location: New York City
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:
Place your divs like so:
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;
}Code: Select all
<div id="bodywrapper">
<div id="bodypadding">
<div id="body"><h3>Welcome</h3></div>
</div>
</div>