I have taken out float and this still shows the same problem and also tried taking out relative. This issue stops when I take out the hover : #nav li a:hover { background-image: url(images/m0.gif); color: #FFFFFF; } But I need this line in there.

Edit if I take away list-style-type:none; as well the problem goes but leaves bullet points then :(

Edit: I have added a temporary fix which puts the image appearing when hovered on just below by adding:

padding: 0px 0px 0px;enter code here

But this probably is not a good way to do it and I have only tested it in Firefox and IE8.