...

View Full Version : Nav list spacing issue- HELP!



tuba74
11-04-2009, 02:37 PM
Im having spacing issues with my main navigation. I cant get rid of the spaces between the li. There are these white spaces between the dark gray main navigation. Ive tried putting negative px in my li and my paddings/margins for li are 0. I am fairly new to css and this is my first list navigation. Any help is appreciated.


THANKS

CSS
http://www.ochies.com/cps/110409/cps.css

HTML
http://www.ochies.com/cps/110409/sub.html

> ------------ BELOW IS THE CSS

#pipe {
font-size:13px;
}
#pipe ul {
float: left;
margin-top: 74px;
margin-left: 143px;
padding: 0;
display: inline;
}

#pipe ul li {

margin-top: 0px;
margin: 0px;
padding: 0px 0px;
/*border-left: 1px solid #000;*/
list-style: none;
display: inline;
width: 100%;
}


#pipe ul li.first {
background-image: none;
margin-left: 0;
margin-right: 0;
border-left: none;
list-style: none;
display: inline;
}



#pipe li a:link {
/*background-image:url(images/navline.gif);*/
background-color:#999;
color:#333333;
padding: 19px;
margin-right: 0px;
text-decoration: none;

}

#pipe li a:visited {
/*background-image:url(images/navline.gif);*/
background-color:#999;
color:#333333;
padding: 19px;
margin: 0px;
text-decoration: none;
}

#pipe li a:active {
/*background-image:url(images/navline.gif);*/
background-color:#999;
color:#333333;
padding: 19px;
margin: 0px;
text-decoration: none;
}

#pipe li a:hover {
color:#ffffff;
background-image:url(images/navline_on.gif);
padding: 19px;
margin: 0px;
text-decoration: none;
}




> ------------ BELOW IS THE CODE

<div id="pipe">
<ul>
<li><a href="(a href="")">HOME</a></li>
<li><a href="(a href="")">WHAT WE DO</a></li>
<li><a href="(a href="")">SEMINAR</a></li>
</ul>
</div>

abduraooft
11-04-2009, 02:49 PM
Try

#pipe ul li {/*sub.html (line 95)*/
/*display:inline;*/
float:left;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0;
padding:0;
/*width:100%;*/
}

tuba74
11-04-2009, 03:51 PM
Thanks abduraooft!!!

that worked. does displaying "inline" automatically add spaces? for future reference, dont put "display:inline" on li? Sorry, i have so many questions. I just get frustrated with css since its not as clear cut as tables.

THANKS AGAIN!

abduraooft
11-04-2009, 04:04 PM
No, nothing like that. It's that single space shown when you display inline text or some tags, like

Lorem ipsum dolor sit amet, consectetur <span>adipisicing elit </span>To avoid this, you'd need to remove all spaces between the list items, like

<ul>
<li><a href="http://www.google.com">HOME</a></li><li><a href="http://www.google.com">WHAT WE DO</a></li><li><a href="http://www.google.com">SEMINAR INFORMATION</a></li><li><a href="http://www.google.com">HOW TO CONTACT US</a></li>
</ul>

Now, display:inline; would be enough!

PS: Your markup has some errors in it, see http://validator.w3.org/check?uri=http%3A%2F%2Fwww.ochies.com%2Fcps%2F110409%2Fsub.html&charset=%28detect+automatically%29&doctype=Inline&group=0
I'd recommend to fix them first, before moving ahead.

linehand
11-04-2009, 04:37 PM
Yeah the white space in the html between list items adds spaces to the rendered page (i think only in IE), which is really lame since removing all the white space makes the list a far more unwieldy chunk of html to look at and work with. What I do to get around this is to comment out the white space/line breaks, like so:


<ul id="navbar" class="navbar_cs"><!--
--><li><a href="#">One</a></li><!--
--><li><a href="#">Two</a></li><!--
--><li><a href="#">Three</a></li><!--
--><li><a href="#">Four</a></li><!--
--><li><a href="#">Five</a></li><!--
--></ul><!--navbar-->

I guess the excessive comments are really unnecessary bloat but I find that a hundred times easier to deal with than having the whole list on one line with no breaks.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum