Background Color which spoils the design

[Bleuarff]

hi

I've got a little problem with my menu : I assigned a background-color property with my a:hover. The link is inside a list. With Firefox it's just perfect, but it's not that good with IE : when the cursor is over the link, the menulist moves a few centimeters to the left ! Without the background-color property, it just stays quiet at its own place. Can you explain/solve this, cause I don't understand ?

the site : http://swingfiler.bleuarff-corp.info/test/index.php (it's in french, but you don't have to understand the text to see the problem :p )
the stylesheet : http://swingfiler.bleuarff-corp.info/test/styles/design.css
And the concerned part:
#leftmenu{
position : absolute;
left : 0%;
top : 0%;
width : 17%;
max-width : 17%;
padding : 0.5% 0% 1% 3%;
margin : 0em;
border : 1px solid red;
}

#leftmenu, .menuliste{
font-size : medium;
font-weight : bold;
}

.menuliste{
width : 90%;
margin : 0em;
padding : 0em;
list-style-image : none;
list-style-type : none;
/* padding-left : 0%;*/
border : 1px solid green;
}

.menuliste li{
display: inline;
}

.menuliste a{
color : black;
display: block;
text-decoration: none;
margin : 0em;
padding : 0em;
}

.menuliste a:visited{
color : black;
}
.menuliste a:hover{
background-color: orange;
text-decoration: none;
color : black;
margin : 0em;
padding : 0em;
}

[toicontien]

In IE-Win, when things move around on mouse over, it's usually because some element needs the HasLayout DOM property triggered. In your case, I'd first trying positioning the <a> tags in your left menu relatively. If that doesn't work, try setting the height of the <a> tags to 1px:

.menuliste a{
color : black;
display: block;
text-decoration: none;
margin : 0em;
padding : 0em;
position: relative;
}

/* ...OR... */
.menuliste a{
color : black;
display: block;
text-decoration: none;
margin : 0em;
padding : 0em;
/*\*/height: 1px;/* For IE-Win */
}

/* For standards browsers */
html>body .menuliste a{
height: auto;
}


If that doesn't cure the problem, the <li> tags or <ul> tag could be the problem. In fact, you can remove the display: inline; for the left menu's LI tags and adjust your markup: http://www.webdeveloper.com/forum/showthread.php?p=466092#post466092

[Bleuarff]

Well, I tried all that you said and what is said on the linked thread, but that doesn't make it better. I applied a height, width or position to every element of the menu in order to create a layout in IE, but that doesn't change the result a single bit, it still moves when the cursor is over.
I've been fighting this bug for the last 4 or 5 days, i'm feeling a bit discouraged :( ... Any idea, anyone ?