Gap between DIVs with UL element [Archive]

Josh404

10-01-2009, 06:18 AM

I have an issue that I cannot sort out.

I am trying to match up two DIVs, one of which has a list element in it. However, this seems to force a gap between the two DIVs.

I am sure it is something to do with the way my CSS is handling the List (or not handling it as the case my be).

Here is the problem in action (Firefox 3.5.3):

http://uoregon.edu/~josh/help/test.html

<html>
<head>

<style type="text/css">

body {
margin: 0px;
padding: 20px;
}

.box1 {

border-top: 1px solid #000000;
border-bottom: 0px;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
}

.box2{

border-bottom: 1px solid #000000;
border-top: 0px;
border-left: 1px solid #000000;
border-right: 1px solid #000000;

}

</style>
</head>

<body>

<div class = "holder">
<div class = "box1">
WHAT IS GOING ON
</div>
<div class = "box2">
<UL>
<LI>WITH THE GAP</LI>
<LI>THAT</LI>
<LI>EXISTS in THE BORDER</LI>
<LI>BETWEEN THESE TWO</LI>
<LI>DIVs</LI>
</UL>
</div>
</div>
</body>

</html>

forum_amnesiac

10-01-2009, 07:13 AM

Try adding this to box1 & box2 styles:

border-collapse: collapse;
border-collapse:collapse;
border-spacing:0;

woreds for me to eliminate these kinds of spaces when I was using tables