mastercheef85 mastercheef85 -5 years ago 197
HTML Question

Different css position top between the browsers

I have some trouble with the positioning of my mobile menu.

It seems that chrome has a small shift from 1px then in the other browser and Ι don't know why. Αs well Firefox looks in a specific width range good, but not overall. Ι use bootstrap and bootstrap use noramlize.css to reset the elements.

Ι prepared it on jsfiddle and tried to figure out what the problem is but was not able to.

Ηere you can better see what Ι mean: enter image description here

Ι use the normal

from bootsrap:


<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#top-nav" aria-expanded="true">
<span class="sr-only">Toggle navigation</span>
<span class="hamburger-icon"></span>
<div style="" aria-expanded="true" class="navbar-collapse collapse in" id="top-nav">
<ul class="nav navbar-nav nav-top">
<a class="dropdown-btn small" type="button" href="reseller.php">
<span class="icon reseller-icon"></span><span class="text">Reseller</span>
<a class="dropdown-btn small" type="button" href="first_step.php">
<span class="icon wizard-icon"></span><span class="text">Data capturing</span>
<a class="dropdown-btn small" type="button" href="settings.php">
<span class="icon settings-icon"></span><span class="text">Settings</span>
<a class="dropdown-btn small" type="button" href="archive.php">
<span class="icon archive-icon"></span><span class="text">Archive</span>
<a class="modalbox dropdown-btn small" href="#modalbox-language-country">
<span class="icon search-icon"></span><span class="text">Language / Country</span>
<li class="visible-xs">
<a class="dropdown-btn small" href="#">
<span class="icon"></span><span class="text">Logout</span>

Due the css is not that small, it may be better to see it directly on jsfiddle.

Here is my code:

Thanks for any help

Answer Source

The issue occurs because Firefox renders the .navbar-header element with a height of 31px where as in Chrome the element is rendered with a height of 30px.

Such issues usually are handled by tweaking the line-height property of the elements. With two changes in the CSS it can be aligned in all browsers.

One is:

  @media screen and (max-width: 991px) {
    body {
      font-size: 13.5px;
      line-height: 20px; } } /* Line 17: previous value was 19px */

The second is:

  header .nav-top-wrapper .navbar-header .navbar-toggle {
    margin: 0;
    padding: 4px 0 4px 10px;  /* Line 279: previous value was 5px 0 4px 10px */
    font-size: 19px; }

Here is a working demo.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download