Help - How to link a whole <li>?

How do I like a whole <li> link, like not just the text i mean the whole like box. Example: http://share2.us/index2.php - Click on the links

 

display: block;

 

thats not working for me, and btw congrats on 200 posts

 

pzn is correct. But you must make the <a> display block. Also, for IE, you must trigger hasLayout. The simplest method here would be too make <a> width 100%. IE does not grok :hover on the <li> element; you must use a:hover.

Validate your markup. <div> may not have an <li> child. Wrap the list items in <ul>.

cheers,

gary

 

#navigation li a{
	height:25px;
	background-color:#33CCCC;
	text-align:center;
	width:55px;
	list-style:none;
	float:left;
	padding-left:5px;
	padding-right:5px;
	display:block;
}
#navigation li a:hover{
	background-color:#FFFFFF;
}

Code (markup):

<div id="navigation">
<ul>
<li><a href="?ice=main">Home</a></li>
<li><a href="?ice=about">About</a></li>
<li><a href="?ice=contact">Contact</a></li>
<li><a href="?ice=portfolio">Portfolio</a></li>
<li><a href="?ice=order">Order</a></li>
</ul>
</div>

Code (markup):

 

alright thanks pzn but now its not appearing right... its kinda self explanatory what i want to do and you can see whats happening... what do i have to do. I want it right under the banner and the "main" div right under that... please help

http://share2.us/index2.php

 

You're close, but do it like this:

#navigation ul {
  overflow: hidden; /*to enclose float children*/
  padding: 0;
  list-style:none;
  margin:0;
  }

#navigation li {
  float: left;
  }

#navigation li a {
  border-top: 1px solid #3cc;
  line-height:1.5;
  background-color:#33CCCC;
  padding-left:5px;
  padding-right:5px;
  display: inline-block; /*sets hasLayout in IE*/
  margin:0;
  }

#navigation li a {
  display: block; /*resets display without unsetting hasLayout*/
  }

#navigation li a:hover{
  background-color:#FFFFFF;
  color: black;
  border-top:1px solid black;
	
}

Code (markup):

cheers,

gary

 

thanks so much