div list issue

**Atlantis** · 03-17-2009, 03:49 AM

Hi again all.

I have a side nav set up with a top and bottom div for adding custom images for design purposes.

The main content of the side nav is placed between the two.

I have the layout working fine. However when I place a ul in the content div, it adds what looks to be padding or margins to it and ends up vertically centering it.

I've tried to zero them out with no luck. What I am trying to do is eliminate the space between my list and the top and bottom of the div, so that the list is snug up tight to the div horz line boundaries.

Here is my html, although you wont see the custom graphics, the issue is still apparent. The css follows.

Any help would be great!! Thanks again.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<link href="CSS/sidecol.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="sidecol">
  <div id="sidecoltop"></div>
  <div id="sidecolbody">
    <ul>
      <li>Link 1</li>
      <li>Link 2</li>
      <li>Link 3</li>
      <li>Link 4</li>
    </ul>
  </div>
  <div id="sidecolbottom"></div>
</div>
</body>
</html>

Code:

@charset "UTF-8";
#sidecol {
	float: left;
	width: 225px;
}
#sidecol  ul  li {
	font-family: Geneva, Arial, Helvetica, sans-serif;
	list-style-type: none;
	letter-spacing: 1px;
}
#sidecoltop {
	font-family: Geneva, Arial, Helvetica, sans-serif;
	width: 225px;
	background-image: url(../images/col_top.png);
	background-position: center;
	height: 28px;
	margin-bottom: 0px;
	background-repeat: no-repeat;
	border: none;
}
#sidecolbody {
	width: 223px;
	background-image: url(../images/col_body.png);
	background-repeat: repeat-y;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 14px;
	position: relative;
	line-height: 18px;
	background-position: center;
	padding: 1px;
	margin: 0px;
}
#sidecolbottom {
	width: 225px;
	height: 29px;
	background-image: url(../images/col_bottom.png);
	background-repeat: no-repeat;
	background-position: center;
	border: none;
}

**bluewalrus** · 03-17-2009, 03:53 AM

This?

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
* {
margin:0;
padding:0;
}
#sidecol {
	float: left;
	width: 225px;
}
#sidecol  ul  li {
	font-family: Geneva, Arial, Helvetica, sans-serif;
	list-style-type: none;
	letter-spacing: 1px;
}
#sidecoltop {
	font-family: Geneva, Arial, Helvetica, sans-serif;
	width: 225px;
	background-image: url(../images/col_top.png);
	background-position: center;
	height: 28px;
	margin-bottom: 0px;
	background-repeat: no-repeat;
	border: none;
}
#sidecolbody {
	width: 223px;
	background-image: url(../images/col_body.png);
	background-repeat: repeat-y;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 14px;
	position: relative;
	line-height: 18px;
	background-position: center;
	padding: 1px;
	margin: 0px;
}
#sidecolbottom {
	width: 225px;
	height: 29px;
	background-image: url(../images/col_bottom.png);
	background-repeat: no-repeat;
	background-position: center;
	border: none;
}
</style>
</head>

<body>
<div id="sidecol">
  <div id="sidecoltop"></div>
  <div id="sidecolbody">
    <ul>
      <li>Link 1</li>
      <li>Link 2</li>
      <li>Link 3</li>
      <li>Link 4</li>
    </ul>
  </div>
  <div id="sidecolbottom"></div>
</div>
</body>
</html>

**Atlantis** · 03-17-2009, 04:02 AM

Yes that works, but i am trying to place it in an external css instead of in the page head. I tried it on my full page code, but it doesn't do anything. Only when I place my side col on its own page does it work.

So I guess my question is how to get it to eliminate that gap in the css code... ??

**bluewalrus** · 03-17-2009, 04:09 AM

wait which gap? that should be the same just add in the

Code:

* {
margin:0;
padding:0; 
}

After the utf-8

edit

so here..

@charset "UTF-8";
-----> Put that here
#sidecol {

**Atlantis** · 03-17-2009, 05:56 AM

That doesn't seem to do it...

This is the gap I want to close. It doesn't seem to make a gap when its plain text, but if I do a ul or new p it adds the gap... ??