CODEWITHSUNDEEP
htmlcssinternet-explorerfirefox
dillonbrannick
dillonbrannick

Reputation: 322

Firefox an IE displaying css code differently to Chrome

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. Chrome IE and Firefox Thanks in advance, Dillon Brannick.

Upvotes: 2

Views: 646

Answers (1)

Anonymous
Anonymous

Reputation: 572

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.

Upvotes: 2

Related Questions