CSS Forum

**jamest** · 09:51 PM

Why dont the dashes show up between the links.

Code:

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style>
div.bottomNavBar{
background:#25587E;
margin:9px 9px 0 9px;
}
ul.bottomNavBarul{
padding:0;
margin:0;
margin-left: 40px;
list-style-type:none;
text-transform:uppercase;
width:100%;
}
li.bottomNavBarli{
display:inline;
}
a.bottomNavBara{
float:left;
margin-right:5px;
padding:1px;
color:white;
text-decoration: none;
font-size:95%;
}
</style>
</head>
<body>
<div class="bottomNavBar">
<!-- Bottom Horizontal Navigation Bar Links Go Here -->
<ul class="bottomNavBarul">
<li class="bottomNavBarli"><a class="bottomNavBara" href="#">Link one</a></li> 
<li class="bottomNavBarli">-</li>
<li class="bottomNavBarli"><a class="bottomNavBara" href="#">Link two</a></li> 
<li class="bottomNavBarli">-</li>
<li class="bottomNavBarli"><a class="bottomNavBara" href="#">Link three</a></li> 
<li class="bottomNavBarli">-</li>
<li class="bottomNavBarli"><a class="bottomNavBara" href="#">Link four</a></li>
</ul>
</div>
</body>
</html>

**LadynRed** · 08-29-2007, 11:26 PM

Why not just use a bottom border on the <li> items ???

**jamest** · 08-29-2007, 11:48 PM

I want it to look like this

Link 1 - Link 2 - Link 3 - Link 4

**angele803** · 03:22 PM

Instead of the actual "-", try using the escape character. It looks like this: "& #150;" except for there is no space after the &.

**jamest** · 08-30-2007, 07:42 PM

It shows up axactly the same. Like this

Link 1 - - -
Link 2 Link 3 Link 4

**LadynRed** · 08-30-2007, 10:23 PM

Float the <li> not the <a>s :

li.bottomNavBarli{
display:inline;
float:left;
}
a.bottomNavBara{

margin-right:5px;
padding:1px;
color:white;
text-decoration: none;
font-size:95%;
}

**jamest** · 08-30-2007, 10:44 PM

Thanks that fixed it.