Border(bottom) dissapears in IE?

[jam]

Hey i have the following CSS on a basic page:


UL{
list-style: none;
}
LI{
float: left;
margin-left:2px;
}
A{
text-decoration: none;
font-family: arial;
font-weight: bold;
font-size: 10px;
border: 1px solid #000;
color: #000;
padding:2px;
}
A:hover{
background-color: #EEE;
}


and then this as the HTML:

<ul>
<li><a href="#">Test Plan</a></li>
<li><a href="#">Story Board</a></li>
<li><a href="#">E-Book</a></li>
<li><a href="#">Evaluation</a></li>
</ul>


It works fine in FF but in IE the bottom of the border is missing (but the left border, the right border and the top border are all there)

Can anyone help?

Cheers,
Jamey

[matth]

LI{
float: left;
margin-left:2px;
padding-bottom: 2px;}

The LI element has set default attributes. Adding padding to the bottom of it willl stop it from cutting off the bottom border line.

[IL14N4]

It's important to specify explicit dimensions:width and height to elements when working with floats
otherwise it gets messy. Remember this an this will save you lots of headaches. In this case though
instead of specifying a fixed width for your floated element use auto heres the code.

ul{
list-style: none;
}

li{
float: left;
margin-left:2px;
width:auto; /* a value of auto in this case because you
don't want all the li items to be sized the
same way being the text has different length.
If you did want them to be size a different
lengths you'd have to create a separate rules
for that and for simplicity auto help us here.
This will ajust the li widths just right. */
height:150px;
}


a{
text-decoration: none;
font-family: arial;
font-weight: bold;
font-size: 10px;
border: 1px solid #000;
color: #000;
padding:2px;
}


a:hover{
background-color: #EEE;
}

[jam]

oh, i get it, thanks loads i think i need to spend some time with my head buried in some books/tutorials.

Thanks for the help,
Jamey