CSS: Firefox and Chrome problem using padding

Asked

Viewed 2,329 times

9

When I define the padding of some div gives a difference of 1px, I’m building a menu, defines the padding in #menu ul li a and the difference from one browser to the other is more 4 px, there’s some hack for that? 

<body> 
 <section>
  <header>
  <nav id="menu">
   <ul>
    <li><a href="home.php">Home</a></li> 
    <li><a href="produtos.php">Produtos</a></li> 
    <li><a href="contato.php">Contato</a></li> 
    <li><a href="quemsomos.php">Sobre nos</a></li> 
   </ul> 
  </nav>
  </header> 
 <section> 
</body> 
</html>

   body {
     background-color:#87CEEB;
     width:100%;
     height:10%;
     }
   header {
     width:1100px;
     height:200px;
     background-color:white;
     margin-left:120px;
     }
   nav#menu ul {
         padding-top:209px;
     padding-left:2px;
    }
   nav#menu li{
    margin: -2px; /*TIRA O ESPAÇAMENTO DO MENU/ JUNTA OS*/
     }
   nav#menu ul li { 
    display: inline; /*DEIXA O MENU NA HORIZONTAL*/
    }
   nav#menu ul li a {
    background-color:#FFF68F;
    text-decoration: none; /*TIRA O ANDERLINE DO MENU*/
        padding-right:110px; /* DEFINE O TAMANHO DO MENU*/
        padding-left:110px;   /* DEFINE O TAMANHO DO MENU*/
    padding-bottom:10px;/* DEFINE O TAMANHO DO MENU*/
    padding-top:10px;/* DEFINE O TAMANHO DO MENU*/
    margin-top:6px;
}
css
  • 1

    I don’t like to use hacks for anything, maybe there’s something in your code that can be improved or reorganized. You could use the [~tag:css] and the [tag:html] so we can see

  • The problem is probably not in the padding, but in something else, such as invisible characters or line height difference and/or fonts (even if only in a blank space). Please edit the question and post the code you are using.

  • If your html is exactly like this, I think you have to close the Nav: </nav>

  • I closed the Nav, n is that the problem, I finally managed to post css, it is the first time q am using this forum.

  • The point is that the font is rendered differently in each browser. Thus each font has a different width. The ideal would be to add a fixed width and height if you want this level of accuracy, but this is usually accepted by people who understand how web development works.

3 answers

3

Add the font settings, and see if it’s at least the same on all browsers:

#menu ul, #menu ul li {font-size: 15px; line-height: 20px}

  • Some time ago I had the same problem, but I didn’t even know what to research, you know when the teacher asks what his question is? and you don’t even know what to ask, hehehe with me happened this, but the first answer, in case, the Stock solved my problem, Vleu Bacco God help you brother.

3

The spacing problem has to do with the size of the words combined with the padding. the way your code looks just doesn’t fit. will always give some problem from how the source is rendered to the browser box-model.

One option is to do as in this example you use flexbox and let the browser calculate the spacing for you.

Or review your code (so it worked, but I don’t know if it fits you):

in css:

  -- css reset omitido --
  *{box-sizing:border-box;-moz-box-sizing:border-box;}
  html{background-color:#87CEEB;}
  body{margin: 10px;}
  section{width:1100px;margin-left: auto;margin-right: auto;}
  header{height:200px;background-color:white;}
  nav li{
    float:left;
    width:275px;
    height:30px;
    text-align: center;
  }
  nav p {
    background-color:#FFF68F;
    height:50px;
    padding-top: 10px;
  }

in html:

<section>
    <header></header>
    <nav>
        <ul>
            <li><a href="#"><p>Home</p></a></li> 
            <li><a href="#"><p>Produção</p></a></li> 
            <li><a href="#"><p>Contato</p></a></li> 
            <li><a href="#"><p>Sobre nos</p></a></li> 
        </ul> 
    </nav>
</section>

0

There is a common technique in CSS that is the use of a file that "resets" the default values that browsers usually put by default in the elements, this way it is easier to track and prevent any different behavior occurs between browsers:

Usually a reset.css comes with these values: Using RESET CSS

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}

:focus {
outline: 0;
}

ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

  • Friend, I have tried everything any kind of reset, and this did not solve the problem. Thank you for your attention.

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.