Menu problem with IE7

#topmenu {
float:left;
width:400px;
height:60px;
}

* html #topmenu{
margin:0;
padding:0;
}

#topmenu .menu {
padding-top:32px;
height:30px;
float: left;
text-align: center;
font:10px Verdana;
font-weight: bold;
background:url(bilder/menu2.jpg) no-repeat top left;
}

* html #topmenu .menu {
margin:0;
}

#topmenu .menu a{
color:#8fc823;
height:100%;
padding:16px;
}

#topmenu .menu a:hover{
background:url(bilder/pil.gif) no-repeat bottom center;
color:#000000;
}

Code (markup):

This is the code that I got for the menu, it's working as it should in IE6, FF + others that I've tried. But in IE7 the hover doesn't work, the links turn black, but the image doesn't display.
I tried to remove the "bottom center" and then it works but it's wrong positioned (of course).
Anybody knows how to solve this?

/ Thanks

 

What does the HTML code for the menu look like?

(By the way, I also suggest removing the margins and padding from every HTML element so you can apply the amounts you need to those that need it via the universal selector.)

 

Sry forgot to post that, here's how it looks like:

<div id="topmenu">
<div class="menu"><a href="#">Start</a></div>
<div class="menu"><a href="#">Kategorier</a></div>
<div class="menu"><a href="#">Support</a></div>
<div class="menu"><a href="#">Lägg till recension</a></div>
</div>

Code (markup):

 

Ah. I'd use a list instead.

<ul id="menu">
    <li><a href="#">Start</a></li>
    <li><a href="#">Kategorier</a></li>
    <li><a href="#">Support</a></li>
    <li><a href="#">Lägg till recension</a></li>
</ul>

Code (markup):

Part of the problem is that you are trying to achieve a pixel-perfect level of precision with your code, which is literally impossible to do, since the user can change the font size (in fact, pixels won't even resize when applied to text in Internet Explorer). What does the rest of your page look like? (I'm asking so I don't provide a solution that ends up breaking the rest of your design.)

Just as an aside, I suggest you use character entity references instead of literal character values for some of your text so that the text appears properly across different devices (and make sure you use the proper syntax for the character encoding you are using, and that it matches what is being sent by the server via the HTTP headers), specifically the lower case Latin letter A with the diaeresis (ä in this case).

 

Thanks =)
But the problem is, I tried to make it as a list when I started on this layout, but I couldn't get it to work well with the background images. So then I made divs instead, and it worked so I kept it.
It's actually been a while since I started to make this, this is an old prject, which I decided to finish.
Anyway, if you got any solutions that works, feel free to share them =)
(Btw, I didn't quite understand that character encoding bit)

Oh and here is a link to the testsite:
http://recensionen.mooseman.se/

 

Ok, I got it. I do have a full plate at the moment, so it may be a couple days before I get back to you (God willing and an XP re-installation not being necessary).

 

It's okay, I can wait, take your time

 

Still need help by someone with this.. haven't been able to fix it.. :/

 

And I lost all my tabs in Opera this morning too.

I'm thinking you're going to be facing a total re-write to get this to work. You ok with that?

 

I got it to work now, seem like the arrows must have been behind something in IE7, cause when I added a padding-bottom it started to work