quick css question: padding

[SooTyLaD]

hi peeps

could anyone answer a quick quesiton for me?

i'm making a horizontal nav list:

here is the css:

  #header ul.nav { position: absolute; bottom: -4px; left: 200px; }
  #header ul.nav li { display: inline; list-style-type: none; }
  #header ul.nav li a { padding: 8px 14px; text-transform: uppercase; }
  #header ul.nav li a:link, #header ul.nav li a:active { background-color: #555; color: #fff; }
  #header ul.nav li a.current { background-color: #fff; color: #555; }
  #header ul.nav li a.current:hover { background-color: #fff; color: #555; }
  #header ul.nav li a:hover { background-color: #777; color: #fff; }

and the html:

	<ul class="nav">
		<li><a href="#" class="current">Products</a></li>
		<li><a href="#">View Order</a></li>
		<li><a href="#">Checkout</a></li>
		<li><a href="#">Search</a></li>
		<li><a href="#">Terms</a></li>
	</ul>

does anyone have any idea why it doesnt display the top and bottom padding around the anchor ("#header ul.nav li a { padding: 8px 14px; text-transform: uppercase; }") in IE, fine in firefox as always but just can't get IE to bite...

whats the fundamental IE flaw i'm not working around?

 

[SooTyLaD]

can i just add... "display: block" shows the right padding in IE but obviously the list gets stacked vertically which is not what i want...

 

[SooTyLaD]

right, sorry to do a whole thread myself but i thought of a solution and that is to use display: block and float: left...

maybe this'll help someone else out who know

 

[psyr33n]

That's considered a standard method of getting horizontal lists, because older browsers may not like display: inline;.