Border height on inline list elements

Hi,

I’m currently trying to sort out the nav bar below the header at

http://www.lincoln-oxford.com/users/nicholas.day/newpidge/

but am having some trouble with the height of the borders. Obviously its supposed to extend to surround the links but i’m not sure what to use in the style sheet to do so.

The offending html code is:

<div id=“top2”>
<ul class=“nav”>
<li><a href=“”><img src=“images/design2_04.png” width=“32” height=“21px” alt=“Home” /></a></li>
<li><a href=“”><img src=“images/design2_06.png” width=“43” height=“21px” alt=“Register” /></a></li>
<li><a href=“”><img src=“images/design2_08.png” width=“31” height=“21px” alt=“FAQ” /></a></li>
<li><a href=“”><img src=“images/design2_10.png” width=“26” height=“21px” alt=“Help” /></a></li>
<li><a href=“”><img src=“images/design2_12.png” width=“120” height=“21px” alt=“Company Information” /></a></li>
<li><a href=“”><img src=“images/design2_14.png” width=“61” height=“21px” alt=“Contact Us” /></a></li>
</ul>
</div>

and finally the css…

ul.nav {
position: relative;
list-style: none;
}

ul.nav li {
	display: inline;
	padding: 0 0.8em;
	border-right: 1px solid #ccc;
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	}

any help would much appreciated!

Firstly, the height attribute on your images shouldn’t contain a unit, so they shouldn’t look like “21px”, but simply like “21”; the unit already is pixels by definition.

Indeed. I changed that to see what difference it would make and forgot to change it back. Incidentally, it doesn’t have any effect.

Hi,

When you set an element as inline you loose the ability to set width and heights to that element (in compliant browsers anywhere).

If you float your list instead the you can set the appropriate heights/widths etc.


ul.nav {
 position: relative;
 list-style: none;
 }
 ul.nav li {
 [b] float:left;
  height: 23px;
[/b]  padding: 0 0.8em;
  border-right: 1px solid #ccc;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  }


 <div id="top2">
  <ul class="nav">
   <li><a href=""><img src="[http://www.lincoln-oxford.com/users/nicholas.day/newpidge/images/design2_04.png](http://www.lincoln-oxford.com/users/nicholas.day/newpidge/images/design2_04.png)" width="32" height="21px" alt="Home" /></a></li>
   <li><a href=""><img src="[http://www.lincoln-oxford.com/users/nicholas.day/newpidge/images/design2_06.png](http://www.lincoln-oxford.com/users/nicholas.day/newpidge/images/design2_06.png)" width="43" height="21px" alt="Register" /></a></li>
   <li><a href=""><img src="[http://www.lincoln-oxford.com/users/nicholas.day/newpidge/images/design2_08.png](http://www.lincoln-oxford.com/users/nicholas.day/newpidge/images/design2_08.png)" width="31" height="21px" alt="FAQ" /></a></li>
   <li><a href=""><img src="[http://www.lincoln-oxford.com/users/nicholas.day/newpidge/images/design2_10.png](http://www.lincoln-oxford.com/users/nicholas.day/newpidge/images/design2_10.png)" width="26" height="21px" alt="Help" /></a></li>
   <li><a href=""><img src="[http://www.lincoln-oxford.com/users/nicholas.day/newpidge/images/design2_12.png](http://www.lincoln-oxford.com/users/nicholas.day/newpidge/images/design2_12.png)" width="120" height="21px" alt="Company Information" /></a></li>
   <li><a href=""><img src="[http://www.lincoln-oxford.com/users/nicholas.day/newpidge/images/design2_14.png](http://www.lincoln-oxford.com/users/nicholas.day/newpidge/images/design2_14.png)" width="61" height="21px" alt="Contact Us" /></a></li>
  </ul>
 [b]<br style="clear:both" />[/b]
 </div>


Hope that helps.

Paul

Chee-ars Paul!