question about lists and css

**MrMJS** · 01-15-2007 10:03 AM

Hello,
I've been messing with lists and css and I was wondering why there is a space between my two divs.

see example below...........

http://www.mrmjs.com/images/cssQ1.jpg

I made a container div, a banner div and then a nav div. I put the lists in the nav div and it adds a space between banner div and nav div. my question is how do I remove this space?

here is the code i have so far

<body>
<div class="container">
<div class="banner">Banner to be placed here </div>
<div class="nav"><ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5 </li>
</ul></div></div>
</body>

**WebJoel** · 01-15-2007 11:12 AM

-just playin' around with your code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title></title>
<style type="text/css">
.banner {width:100%; height:100px; border:1px solid red;}
.container {width:100%; border:3px double blue;}
.nav {float:left; margin-top:10px;}
.nav ul {list-style-type:none;}
.nav ul li {margin:3px 0 3px 0;}
.nav ul li a {background-color:none; color:black; text-decoration:none;}
.nav ul li a:hover {background-color:yellow; color:red; text-decoration:underline; padding:0 6px 0 6px; letter-spacing:0.04em; font-weight:bold;}
#content {width:auto; border-left:6px double silver; margin-left:130px; padding:25px; 20px 30px 20px;}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div class="container">
<div class="banner">Banner to be placed here </div>
<div class="nav">
<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
<li><a href="#">Item 5</a></li>
</ul>
</div>

<div id="content">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Suspendisse egestas ultricies pede. Phasellus suscipit blandit risus.
Praesent nonummy. In erat. Duis nibh pede, accumsan eu, pulvinar et,
volutpat vel, elit. Curabitur nec dui sed nunc congue tempus. Nulla ac
dui ac libero fringilla nonummy. Maecenas ullamcorper sodales risus.
Vivamus pretium dolor. Proin eu turpis. Phasellus ut mauris non nulla
mattis luctus. Nunc porttitor dapibus sapien. In malesuada fermentum
metus. Nulla egestas, tellus a vestibulum pharetra, nunc purus auctor
lacus, ut semper purus ipsum eu velit. Praesent dui. Nulla accumsan
turpis at erat.</p>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Morbi lacus felis, euismod at, pulvinar sit amet, dapibus eu, eros.
Etiam tellus. Nam vestibulum porttitor urna. Phasellus aliquet pretium
quam. Proin pharetra, wisi nec tristique accumsan, magna sapien pulvinar
purus, vel hendrerit ipsum tellus at ante.</p>

</div>

</div>
</body>
</html>

but to answer your question. I assume that you are using IE? IE gives padding to just about everything. The first line of my CSS:
* {padding:0; margin:0; border:0;}
removes all of that to zero.

**MrMJS** · 01-15-2007 11:58 AM

Im using Firefox but Im building with Dreamweaver 8. I see the space in both Dreamweaver and Firefox.

here is the code and pic for a new before...

With out ordered list

http://www.mrmjs.com/images/cssQ2.jpg

<!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=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">

</style>
</head>

<body>
<div class="container">Content for class "container" Goes Here
<div class="banner">Content for class "banner" Goes Here
<div class="navigation">Content for class "navigation" Goes Here</div>
</div>
</div>
</body>
</html>

With ordered list

http://www.mrmjs.com/images/cssQ3.jpg

<!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=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">

</style>
</head>

<body>
<div class="container">Content for class "container" Goes Here
<div class="banner">Content for class "banner" Goes Here
<div class="navigation">
<ol>
<li>Content for class "navigation" Goes Here</li>
</ol>
</div>
</div>
</div>
</body>
</html>

as you can see it adds space in the banner div or between the banner and navigation divs but I dont see anything in the code??? im I missing it?

**MrMJS** · 01-15-2007 12:56 PM

I got it.. I had to set the lists padding and margins to 0 and it went away

**WebJoel** · 01-15-2007 06:09 PM

Originally Posted by MrMJS

I got it.. I had to set the lists padding and margins to 0 and it went away

from my post higher up:

but to answer your question. I assume that you are using IE? IE gives padding to just about everything. The first line of my CSS:
* {padding:0; margin:0; border:0;}
removes all of that to zero.

would remove all padding, margin and borders from all elements (including lists). -Glad you figured it out.

**MrMJS** · 01-15-2007 06:48 PM

thxs for your help

Thread: question about lists and css

Thread Tools

Display

question about lists and css

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions