FF/IE Display problems - Lists

[KDLA]

Could someone please fix my coding so that the background color for the list items extends the width of the list in both FF and IE? Right now, only IE is displaying this correctly.

Thanks - KDLA


CSS -

td.navigation ul {
list-style-type: none;
margin-left: 0;
padding-left: 4px;
margin-top: 15px;
margin-bottom: 15px;
width: 120px;}

td.navigation ul li {
margin-bottom: 1em;
font-family: arial, sans-serif;
background-color: transparent;
font-weight: bold;
width: 120px;}

td.navigation ul li a {
background-color: #ff4500;
text-decoration: none;
color: black;
padding: 4px;
width: 120px;}

td.navigation ul li a:hover {
background-color: white;
color: #black;
width: 120px;}


HTML -
<td class="navigation"> <ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
<li><a href="#">Link 6</a></li>
<li><a href="#">Link 7</a></li>
</ul></td>

[LiLcRaZyFuZzY]

add this in the CSS (for the <a> tag)

display: block;

[KDLA]

It's amazing how one little setting can effect the whole layout.

Thanks so much, LCF!
KDLA

[LiLcRaZyFuZzY]

you are welcome

[drhowarddrfine]

only IE is displaying this correctly.

But remember, IE displayed it how you wanted it but did not display it correctly while Firefox displayed it correctly per your code and the standards.

[KDLA]

Yup. That's why I hate using IE. I always check in FF to make sure it's actually correct. I should have phrased it "IE is displaying this as I want it to be." Ahh, semantics.

IE is evil, with its suppositions. Really messes up web design.

My rant for today -
KDLA