html - Firefox an IE displaying css code differently to Chrome -
so on website have css role on buttons, , displays should in chrom in ie , firefox height larger can see of image. here's website happening on http://www.dillonbrannick.com/ i'm focusing on 1 of buttons, happening 4 of them.
here's code effects home button.
inside body , 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 javascript doesn't effect diplay on/off elements has nothing dimensions.
here's 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 body class doesn't make difference problem, wanted show effects button.
as can see in these 2 images(left:chrome, right: ie , firefox). there blue appearing underneath grey bar shouldn't there, part of other half of image shifted onrollover. can see on website.
in advance, dillon brannick.
i think problem use of .5
.nav a{ height: 107.5px; } browsers handle differently. don't think there exists half pixel.
edit : try 107px, , 108px. think 1 of them should give u desired result. 107px probably. firefox takes 107.5px 108px.
Comments
Post a Comment