CSS buttons working in Firefox, not IE though?

[tradmusic.com]

Hi.

Trying to create a roll-over button effect using CSS and it's working great
in Firefox:
http://www.nathonjones.com/sitc/salmon.shtml

However, it looks totally different in IE. The first button is a different
size to the others, and all of the others seem to have a margin at the top,
so the colour fill, on hover, doesn't fill the correct area! Can anyone see
anything obvious that I'm missing as I've tried combinations of things
without success so far.

Here's my CSS for the buttons:

#leftnav {
float: left;
font-size: 0.9em;
width: 140px;
background-color: #FFFFFF;
border-width: 0 1px 0 0;
border-style: dashed;
border-color: #AABBDC;
}

#leftnav a {
height: auto;
display: block;
text-decoration: none;
border-width: 0 0 1px 0;
border-style: dashed;
border-color: #AABBDC;
font-weight: bold;
padding-left: 8px;
padding-top: 8px;
padding-bottom: 6px;
color: #7F9D7F;
}

#leftnav a:hover {
background-color: #7F9D7F;
color: #FFFFFF;
}

My navigation links are in a Server Side Include (nav.txt) and I wondered if
that might be causing problems?
The nav.txt file is simply:

<div id="leftnav">
<a href="index.shtml" style="margin-bottom:0;">Home Page</a></br>
<a href="salmon.shtml" style="margin-bottom:0;">Salmon</a></br>
....etc
</div>

Hope someone can help. Thanks.
nath.

[bissatch]

I had a problem with IE showing these margins too. Try also setting the
width of - #leftnav a - I would recommend setting the width in pixels
though and not percentage because you get funny results in Firefox when
you do, for example, 100%. So, in your case I will be width: 132px;
(140 - 8px for left padding). You will need to remove the <br /> from
the end of each link.

I would futher recommend placing your links in a <ul> list and setting
padding, margin and list-style to 0px and none respectively. You can
then use CSS to set the padding, borders, backgrounds etc as Im sure
your aware. This way, more basic browsers that cannot layout page
elements in the same way that desktop browsers can will still be able
to display your links in a structured manner

Hope this helps.

Burnsy

[dsmasters]

IE only recognizes hovers over <a> tages only. See the below link to
get a light weight Javascript to fix the IE bug.

http://www.htmldog.com/articles/suckerfish/dropdowns/

Dan