[SOLVED] css inline list question

zhangy · February 23, 2009

Hello,

I am trying to make a page navigation using an inline list.

My question is, how can I make the unordered list elements have no spaces between them?

right now it looks like this:

list1 list2 list3 list4

but I would like them to be like:

list1list2list3list4

#nav_bar_container ul{
list-style-type:none; 
margin: 0;
padding: 0;
}


#nav_bar_container ul li{display: inline;}


#nav_bar_container ul li a { 
text-decoration: none;
padding-top:4px;
border-top-style:solid;
border-width:thin;
border-color:grey;
background-color:#1B1B1B;
margin:0px
}


#nav_bar_container ul li a:hover{
color: #fff;
background-color: #369;
}

haku · February 23, 2009

There is either a margin or a padding on either the <li>s or the <a>s. Try setting the margins then paddings to zero on those one at a time 'til you find which it is.

zhangy · February 23, 2009

haku I did as you advised but still know luck. I dont get it ???

Can you see what I am missing? I've been going over this for hours rewriting it and still cant figure it out.

body{
background-color:black;
font-family:"Times New Roman", Times, serif;
margin:0px;
padding:0px;
}


#background_container{
background-color:white;
min-width:900px;
max-width:900px;
margin:0px;
padding:0px;
}


head_container{
margin:0px;
padding:0px; 
}


#head_block{
background-image: url(/pix/head_gradient.png);
background-repeat: repeat-x;
border-bottom:solid grey thin;
height:66px;
width:900px;
margin:0px;
padding:0px;
}


#nav_bar_container{
background-color:#1B1B1B;
margin:0px;
padding:0px;
}


#nav_bar_container ul{
list-style-type:none;
height:25px;
margin:0;
padding:0;
}


#nav_bar_container ul li{
display: inline; 
margin:0px; 
padding:0px;
}


#nav_bar_container ul li a {
	color:white;
	background-color:#1B1B1B;
text-decoration: none;
border-right:solid grey thin;
border-left:solid black thin;
margin:0px;
padding-left:25px;
padding-right:25px;
padding-bottom:5px;
}


#nav_bar_container ul li a:hover{
color:black;
background-color:white;
       margin:0px;
       padding:0px;
}


#nav_bar{;}


#content_container{;}


#content_block{;}


#discription_block{;}


h1{;}


h2{;}


h3{;}


#home_page_nav{;}


#subcontent_block{;}


#new_table{;}


#footer_container{;}


#footer_block{;}

<body>
  <div id="background_container">
   <div id="head_container">
    <div id="head_block">
     <a href="/" title="home">
      <img src="pix/logo.png" border="0" alt="home" />
     </a>
    </div>
    <div id="nav_bar_container">
     <ul id="nav_bar">
      <li><a href="" title="door">door</a></li>
      <li><a href="" title="resources">resources</a></li>
      <li><a href="" title="blog">blog</a></li>
      <li><a href="" title="forum">forum</a></li>
      <li><a href="" title="about">about</a></li>
      <li><a href="/" title="home">home</a></li>
     </ul>
    </div>
   </div>
   <div id="content_container">
    <div id="content_block">
     <div id="discription_block">
      <h1></h1>
      <h2></h2>
      <p></p>
     </div>
     <div id="home_page_nav">

     </div>
    </div>
    <div id="subcontent_block">
     <table id="new_table">
      <thead>
       <th><span class=""></span></th>
   <th><span class=""></span></th>
       <th><span class=""></span></th>
   <th><span class=""></span></th>
      </thead>
      <tbody>
       <?php include 'php/new_table.php'; ?>
      </tbody>
      <tfoot>
      </tfoot>
     </table>
    </div>
   </div>
   <div id="footer_container">
    <div id="footer_block">
    </div>
   </div>
  </div>
</body>
</html>

haku · February 23, 2009

If you mean that last little bit that sits between each li item, it's not particularly easy. You will have to give each li item a negative left margin. This will pull them left, but make sure you check it on each of the major browsers, as they may render them a little differently.

TheFilmGod · February 23, 2009

#nav_bar_container ul li a {
	color:white;
	background-color:#1B1B1B;
text-decoration: none;
border-right:solid grey thin;
border-left:solid black thin;
margin:0px;
[b]padding-left:25px;[/b]
[b]padding-right:25px;[/b]
padding-bottom:5px;
}

Take out all padding declarations and call:

padding: 0 0 5px 0;

If you mean that last little bit that sits between each li item, it's not particularly easy. You will have to give each li item a negative left margin. This will pull them left, but make sure you check it on each of the major browsers, as they may render them a little differently.

Do not use negative margins. There is absolutely some margin/padding that is causing the extra whitespace. Declaring padding: 0 0 5px 0; as I have stated above, will zero out the padding and remove any extra space.

Negative margins should never be used. Absolute positioning can achieve the same look if the case warrants a special scenario; however, your code doesn't warrant such an exception. Zero out the paddings.

haku · February 24, 2009

A: There is nothing wrong with negative margins.

B: why do you think adding bottom padding is going to fix the problem? (hint: it doesnt)

TheFilmGod · February 24, 2009

A: There is nothing wrong with negative margins.

B: why do you think adding bottom padding is going to fix the problem? (hint: it doesnt)

If you took a look at his code, you would have seen that he already declared a bottom padding of 5px. Please look at the underlying code posted by the OP before blurting out your comments.

Clearly a declaration of padding: 0; is more ideal. Nonetheless, my solution fixes the error while integrating seemingly into the code.

haku · February 24, 2009

Except that it doesn't fix the problem, as the gap that he is speaking of exists even when the margin and padding are set to zero.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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">
li
{
	padding:0;
	margin:0;
	display:inline;
}
li a
{
	padding:0;
	margin:0;
}

</style>
</head>

<body>
     <ul id="nav_bar">
      <li><a href="" title="door">door</a></li>
      <li><a href="" title="resources">resources</a></li>
      <li><a href="" title="blog">blog</a></li>
      <li><a href="" title="forum">forum</a></li>
      <li><a href="" title="about">about</a></li>
      <li><a href="/" title="home">home</a></li>
     </ul>
</body>
</html>

Please fix the problem before blurting out your "solutions".

pic 1: margins and padding set to zero

pic 2: left margin of li set to -5px

[attachment deleted by admin]

zhangy · February 24, 2009

sweet thanks the negative margin worked.

haku · February 24, 2009

You don't say

TheFilmGod · February 24, 2009

The reason the white space between the li's was created is because the actual html markup creates the whitespace when the list is displayed as inline.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Page Title</title>
<style type="text/css">
ul#nav_bar {
	overflow: auto; /* clear floats */
	list-style: none; /* Removing bullets */
}
ul#nav_bar li {
	padding:0 0 0 0px; /* Change the 0px to add breath room btw li */
	margin:0;
	float: left;
}
ul#nav_bar li a {
	padding:0;
	margin:0;
}

</style>
</head>

<body>
     <ul id="nav_bar">
      <li><a href="#" title="door">Door</a></li>
      <li><a href="#" title="resources">Resources</a></li>
      <li><a href="#" title="blog">Blog</a></li>
      <li><a href="#" title="forum">Forum</a></li>
      <li><a href="#" title="about">About</a></li>
      <li><a href="#" title="home">Home</a></li>
     </ul>
</body>
</html>

This is an example of how you could achieve the same effect without using negative margins.

haku · February 24, 2009

But, I thought your

padding: 0 0 5px;

was supposed to fix the problem? What happend? ???

TheFilmGod · February 24, 2009

And it does. The current standard set by the W3C is flawed. A list displayed inline should not receive space simply because there is space between tag elements in the html. CSS can easily add spacing.

haku · February 24, 2009

And it does.

Dude, you're classic. Even though IE7 isn't standards compliant, it is. Even though that didn't work, it does.

Gotta love living in the clouds.

Sign In

[SOLVED] css inline list question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information