How to fix buggy font alignment inside in mozilla?

D

DiscoTeka2015-07-27 19:43:52

css

DiscoTeka, 2015-07-27 19:43:52

How to fix buggy font alignment inside in mozilla?

Mozilla 39.0 constantly shifts any font 1-2 pixels down:

The same text in chrome:

Even with a naked eye you can see that the text is at different heights.
Why is this offset and how to get around it, or how can you completely get rid of it so that the font in different browsers does not float, but is at the same height?
Full CSS code:

@font-face {
  font-family: 'Roboto Condensed';
  src: url('../fonts/FileName.eot');
  src: url('../fonts/FileName.eot?#iefix') format('embedded-opentype'),
     url('../fonts/FileName.woff') format('woff'),
     url('../fonts/Roboto Condensed regular.ttf') format('truetype'),
     url('../fonts/FileName.svg#Roboto Condensed') format('svg');
  font-style: normal;
  font-weight: normal;
}

@font-face {
  font-family: 'Open Sans Condensed';
  src: url('FileName.eot');
  src: url('FileName.eot?#iefix') format('embedded-opentype'),
     url('FileName.woff') format('woff'),
     url('../fonts/Open Sans Condensed 300.ttf') format('truetype'),
     url('FileName.svg#FontName') format('svg');
  font-style: normal;
  font-weight: normal;
}
/*CSS RESET=============================================================================*/
html, body, div, span, applet, object, iframe, table, caption, tbody, tfoot, thead, tr, th, td, 
del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, 
h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, 
dl, dt, dd, ol, ul, li, fieldset, form, label, legend {
  vertical-align: baseline;
  font-family: normal;
  font-weight: normal;
  font-style: normal;
  font-size: 1em;
  outline: 0;
  padding: 0;
  margin: 0;
  border: 0;
  }
/* remember to define focus styles! */
:focus {
  outline: 0;
  }
body {
  background: white;
  line-height: 1;
  color: black;
  }
ol, ul {
  list-style: none;
  }
/* tables still need cellspacing="0" in the markup */
table {
  border-collapse: separate;
  border-spacing: 0;
  }
caption, th, td {
  font-weight: normal;
  text-align: left;
  }
/* remove possible quote marks (") from <q> & <blockquote> */
blockquote:before, blockquote:after, q:before, q:after {
  content: "";
  }
blockquote, q {
  quotes: "" "";
  }
a {
  text-decoration: none;
  color: #000;
}
/*CSS RESET=============================================================================*/
html {
  height: auto;
}

body {
  background-color: #eee;
  text-align: center;
}

.maindiv {
  width: 1384px;
  height: auto;
  display: inline-block;
}

.header {
  width: 100%;
  height: 170px;
  background: url(../images/headerimage2.jpg) no-repeat #ccc;
}
    .topmenu {
      width: 550px;
      padding: 5px 0;
      display: inline-block;
      background-color: #000;
      margin-top: 141px;
    }
      .topmenu ul li {
        float: left;
        border-right: 1px solid #fff;
        padding: 0 15px;
      }
        .topmenu a {
          color: #eee;
          font-family: 'Roboto Condensed', true type;
          font-size: 14pt;
        }

.sidebarleft {
  width: 397px;
  background-color: #383838;
}
  .userfield {
    background: url(../images/userunderline.png) bottom right no-repeat;
    text-align: right;
    color: #eee;
    padding: 5px 10px;
    font-family: 'Open Sans Condensed', truetype;
    font-size: 12pt;
    line-height: 12px;
  }

.content {
}

and here is the full HTML code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="css/style.css">
  <title>Galaxy Legend Community</title>
</head>
<body>
  <div class="maindiv">
    <!-- HEADER -->
    <div class="header">
      <div class="topmenu">
        <ul>
          <li><a href="#">FB NEWS</a></li>
          <li><a href="#">NEWS</a></li>
          <li><a href="#">VIDEO</a></li>
          <li><a href="#">PICTURES</a></li>
          <li><a href="#">FORUM</a></li>
        </ul>
      </div>
    </div>
    <!-- END HEADER -->
    <!-- LEFT SIDEBAR -->
    <div class="sidebarleft">
      <div class="userfield">Hello, DiscoTeka!!!</div>
      <div class="logo"></div>
      <div class="spacetrack"></div>
      <div class="searchfield"><input type="text" /></div>
      <div class="sandbox"></div>
    </div>
    <!-- END LEFT SIDEBAR -->
    <!-- CONTENT -->
    <div class="content"></div>
    <!-- END CONTENT -->
    <!-- RIGHT SIDEBAR -->
    <div class="sidebarright"></div>
    <!-- END RIGHT SIDEBAR -->
    <!-- FOOTER -->
    <div class="footer"></div>
    <!-- END FOOTER -->
  </div>
</body>
</html>

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

P

Pretor DH, 2015-07-27
@PretorDH

normalize.css Have you tried it?