I have the following website:
http://tinyurl.com/6l5nn6q

And am having a few annoying issues in IE7 only. The main one being the height of the <a> elements in the navigation. It seems no matter what height I set them to they always appear as they do in the attached screenshot.

However they should really be all the same height as the pink link. I've tried messing around with height and padding only to no avail.

I am styling the links like so:

#nav {
    float: left;
    clear: both;
    height: 100px;
    margin-top: 10px;
    letter-spacing: -1px;
    font-weight: bold;
}

#nav li {
    display: inline;
}

#nav li a {
    float: left;
    width: 109px;
    height: 90px;
    background: #333;
    margin-right: 1px;
    padding: 10px 0 0 10px;
    color: #fff;
    text-decoration: none;
}

#nav li a:hover, #nav li a:active {
    background: url('../image/nav-li-hover.jpg') no-repeat;
}

Has anyone else had an issue like this before?

<A>nchor elements are inline elements so do not take a height parameter.

Ohh I see! So I would have to rely on padding?

That's about it, or line height on the parent element.

Ahh right! Thanks for the tip

wouldn't setting the the links to blocks work?

#nav li a {
display: block;
}