[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 288
  • Last Modified:

li - display inline with half pipes - padding issue

http://midvalleydermatology.com/index_test.php

if you look in the top horizontal nav, you'll see that there's more padding to the right of the half pipes than to the left - but the style is this:

.halfPipe{padding:0 2px;}

and the html looks like this:

<li <?php if ($crumb=="home") echo "id=\"currentPage\"";?>><a href="http://midvalleydermatology.com/index.php">Home</a></li><li><span class="halfPipe">|</span></li>
            <li <?php if ($crumb=="staff") echo "id=\"currentPage\"";?>><a href="http://midvalleydermatology.com/staff.php">Our Staff</a></li><li><span class="halfPipe">|</span></li>
            <li <?php if ($crumb=="location") echo "id=\"currentPage\"";?>><a href="http://midvalleydermatology.com/office.php">Location</a></li><li><span class="halfPipe">|</span></li>

i need there to be the same pad on the left and the right - thanks!
#topNav{
width:737px;
float:left;
margin:20px 0 7px 0;
background:#561000;
padding:2px 0 5px 0;
}
	#topNav ul{
	padding-top:5px;
	padding-bottom:5px;
	text-align:center;
	display:inline;
		}
	#topNav li {
	list-style:none;
	color:#FFFFFF;
	font:11px Verdana, Arial, Helvetica, sans-serif;
	display:inline;
	}
	.halfPipe{padding:0 2px;}
	#topNav li a {
	color:white;
	text-decoration:none;
	font-weight:bold;
	}
	#topNav li a:hover {
	color:#fff;
	text-decoration:underline;
	font-weight:bold;
	}
	#topNav #currentPage a{
	text-decoration:underline;
	font-weight:bold;
	}
	#topNav #currentPage a:hover{
	text-decoration:underline;
	font-weight:bold;
	}

Open in new window

0
phillystyle123
Asked:
phillystyle123
  • 2
1 Solution
 
remorinaCommented:
it's because the default space rendered between lines & <li> elements

try removing the padding entirely and using below example for the halfPipe instead and check how it works for you
<li><span class="halfPipe">&nbsp;|</span>

Open in new window

0
 
remorinaCommented:
Otherwise if you want to eliminate this space, you'll have to use float:left instead of display:inline for the <li> elements and set a suitable height to their container or <UL>
0
 
phillystyle123Author Commented:
worked perfectly - thanks
0

Featured Post

Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now