Question

So on my website I have css role over buttons, and everything displays as it should in Chrom but in IE and Firefox the height is larger so you can see too much of the image.
Here’s the website its happening on http://www.dillonbrannick.com/ I’m just focusing on one of the buttons, but it is happening with all 4 of them.

Here’s the code that effects the home button.

Inside the body and nav tags

<nav class="body">

<div class="links nav" id="home-nav">
<a href="#"
onclick=" toggle_visibility_1('illustrations'); toggle_visibility_1('illustration-sub'); toggle_visibility_1('painting-sub'); toggle_visibility_1('paintings'); toggle_visibility_1('animation'); toggle_visibility_1('contact'); toggle_visibility_1('box'); toggle_visibility_2('homeimage'); toggle_visibility_2('homebio'); toggle_visibility_2('facebook'); toggle_visibility_2('google');">
</a>
</div>

</nav>

I’d imagine the Javascript doesn’t effect it as all it does is diplay on/off elements so it has nothing to do with dimensions.

here’s the css:

.body{
    position:absolute;
    left:50%;
    top:50%;
}
nav{
    margin: -125px 0 0 -44.5px;
}
.nav{
    position:absolute;
    width: 89px;
}
.nav a{
    height: 107.5px;
}
.links a{
   display: block;
   margin: auto auto auto auto;
   cursor: pointer;
   outline: transparent solid 0px;
}
#home-nav {
    margin: -60px 0px 0px -140px;
}
#home-nav a{          
   background: url('http://dl.dropbox.com/u/70582811/home.link.png') no-repeat left top;
}
#home-nav a:hover{
    background-position: left -107.5px;
}

I know the body class probably doesn’t make any difference to the problem, but I just wanted to show everything that effects the button.

As you can see in these two images(left:Chrome, right: IE and Firefox). There is blue appearing just underneath the grey bar that shouldn’t be there, that is part of the other half of the image that is then shifted up onrollover. As you can see on my website.

Thanks in advance,
Dillon Brannick.

Answer 1

I think your problem is the use of .5

.nav a{
    height: 107.5px;
}

Browsers probably handle that differently. I don’t think there exists something like half a pixel.

Edit : just try 107px, and then 108px. I think one of them should give u the desired result. 107px probably. Firefox takes 107.5px as 108px.