Gap between DIVs with UL element

**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

Code:

<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:

HTML Code:

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

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

Thread: Gap between DIVs with UL element

Thread Tools

Search Thread

Gap between DIVs with UL element

Bookmarks

Bookmarks

Posting Permissions