Home/ Questions/Q 4102302
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-20T20:48:30+00:00

Since updating to FF4 there seems to be some wrong interpreting of css in

  • 0

Since updating to FF4 there seems to be some wrong interpreting of css in FF4 on one of my websites. Or more exactly: If you overlay the screenshots of FF and Chrome the text in FF is 2-3px below the text in Chrome. So it is not correctly vertial aligned. If I reduce the padding-top in .nav a in order to adjust this in FF, it’s not in the middle in Chrome.

In FF 3.6 everything just looked fine. It’s ok in IE too. Any ideas?

Moreover the text seems to be broader in FF than in Chrome. You can see it on this img:
http://i54.tinypic.com/2nsz6nn.jpg

The first “Start” is in FF, the Second one in Chrome (how it should be).
The next text is an overlay between FF und Chrome – FF is broader.

Is a navigation bar on my website, html:

<div id="nav_wrapper"> 
<div align="center" class="nav"><a href="/1" title="1">Link one</a></div>
<div class="nav_sep"></div>
<div align="center" class="nav"><a href="/2" title="2">Link two</a></div>
<div class="nav_sep"></div>
<div class="nav nav_last" style="width:249px;">
    <div class="right">
     <div class="left">
      <form action="/suche/" method="get" name="nav_searchForm">
       <input type="text" name="s" class="nav_searchInput" />
      </form>
     </div>
     <div class="btn nav_searchBtn"><div class="lf">&nbsp;</div><div class="ct">search</div><div class="rt">&nbsp;</div></div>
    </div>
</div>
<div style="clear:both"></div>

CSS:

/* navigation */
#nav_wrapper{width:100%;}
.nav{background-image:url(/img/nav.png);background-position:-10px 0px;background-repeat:no-repeat;color:#FFF;height:46px;float:left;font-size:16px;}
.nav a{display:block;color:#FFF;text-decoration:none;padding:15px 18px 10px 18px;}
.nav:hover{background-position:-10px -46px;}
.nav_sep{background-image:url(/img/nav.png);background-position:-444px top;height:46px;float:left;width:2px;}
.nav_last{height:34px;padding:12px 18px 0 18px;}
.nav_searchInput{background-image:url(/img/magnifier.png);background-repeat:no-repeat;background-position:left top;border:1px solid #D5D5D5;font-size:13px;margin:0 4px 0 0;padding:3px 2px 3px 26px;width:146px;}

Any ideas how to fix it? I don’t want to make the field Javascript-Clickable (which would be one solution: abandon the display:block and applying a javascript onclick event, aligning with margin instead of padding).

Thank you.

info: it is not dependant on any other layout. Tested it on a clean page too.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    There are a few issues. The simplest solution would be to set the line-height of your .nav a rule, like so:

    .nav a { line-height: 16px; }

    Every browser has a different default serif and sans-serif font. Every browser even has different font-rendering algorithms. If you are relying on text for the box-model of an element you want to control the height of, always set the line-height and height of the element explicitly.

    • 0