Need some help with a menu

Hi All

I have designed a menu using css, see here: [url]http://www.johnbrewerphotography.com/[/url] and while it looks good in FireFox, in Internet Explorer when the mouse hovers over the text, the text in the menu moves left.

Here is the basic code I am using:

[code=html]<div id=”menu”>
<div id=”title”><img alt=”Logo” src=”images/logo.gif” /></div>

<div id=”links”>
<a href=”http://www.johnbrewerphotography.com/index.html”>Home</a>
<a href=”http://www.johnbrewerphotography.com/portfolio/”>Portfolio</a>
<a href=”http://www.johnbrewerphotography.com/purchasing.html”>Purchasing</a>
<a href=”http://www.johnbrewerphotography.com/technical_notes.html”>Technical Notes</a>
<a href=”http://www.johnbrewerphotography.com/about.html”>About</a>
<a href=”http://www.johnbrewerphotography.com/contact.html”>Contact</a>
<a href=”http://www.johnbrewerphotography.com/links.html”>Links</a>
</div>
</div>

#links {
margin: 10px;
}

#menu
{
height: 490px;
font-size: 13pt;
}

#menu img {
margin-right: 10px;
}

#menu #links a
{
display: block;
margin-top: 5px;
padding: 2px;
padding-left: 6px;
border: 1px solid #FFF;
border-left: 4px;
color: black;
text-decoration: none;
}

#menu #links a:hover
{
padding-left: 2px;
color: rgb(50%,0%,0%);
color: black;
border-bottom: 1px solid #666;
border-left: 4px solid #666;
}
[/code]

Any help would be much appriciated.

Joe

Also in #CSS _↴