Padding on hover works in FF but not IE

[roadjan]

Hi there

I have set the hover of the menu to create padding to give the effect of growth and emphasis to each link. It works great in ff but will not expand in ie - please help this is driving me crazy!!

The link - http://www.roundcloud.co.uk/index.html

Here is my html:


<div id="menu">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="index.html">Competition</a></li>
<li><a href="index.html">Services</a></li>
<li><a href="index.html">Customers</a></li>
<li><a href="index.html">Partners</a></li>
<li><a href="index.html">Contact</a></li>
</ul>
</div>

and the css:


* {
margin: 0px;
padding: 0px;
}

html {
height: 100%;
margin-bottom: 1px;
}

body {
width: 800px;
margin: 0px auto 0px auto;
font-family: georgia;
font-size: 9pt;
background-color: #000;
color: #fff;
text-align: justify;
padding: 10px 0px 0px 0px;
background-image: url("freshair.jpg");
background-repeat: no-repeat;
background-position: center;
}

/* MENU
-------------------------------*/

div#menu {
}

div#menu ul {
width: 800px;
font-size: 13pt;
font-weight: bold;
}

div#menu li {
padding: 5px 0px 5px 0px;
border-top: 1px solid;
border-bottom: 1px solid;
display: inline;
float: left;
width: 133px;
text-align: center;
}

div#menu li a {
text-decoration: none;
color: #fff;
}

div#menu ul li a:hover {
text-decoration: none;
color: #0041c9;
background-color: #fff;
padding: 10px;
font-weight: bold;
border: 1px solid #0041c9;
margin: 0px;
}

[Snookerman]

Add this to your CSS code:

div#menu ul li a:hover {
text-decoration: none;
color: #0041c9;
background-color: #fff;
padding: 10px;
font-weight: bold;
border: 1px solid #0041c9;
margin: 0px;
position: relative;
}

Good luck!

[roadjan]

Snookerman - awesome, thank you. I will be posting on here from now on, I wasted hours, my talents are clearly limited.....

[Snookerman]

You're welcome, glad to help!
You can go to your first post in this thread, click http://www.dynamicdrive.com/forums/images/buttons/edit.gif then click Go Advanced and add the Resolved prefix to the thread title.
This will let other users know the problem has been solved.

Good luck with your site!