CSS: Problem in Firefox and Chrome using padding

Question

CSS: Problem in Firefox and Chrome using padding

Navigation

#1 by (2 votes)
#2 by (0 votes)
#3 by (0 votes)

6

When I set padding to some div it gives a difference of 1px , I'm building a menu, set padding to #menu ul li a and difference from one browser to another is 4 px , is there any hack for this?

<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

asked by anonymous 07.04.2014 / 17:19

3 answers

How to use prepared statements with external variables in MySQLi Software to obfuscate APK

score 2 · Answer 1

2

Add the font settings, and see if it's the same for all browsers:

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

07.04.2014 / 18:59

score 0 · Answer 2

There is a common technique in CSS that is to use a file that "resets" the default values that browsers usually place in elements by default, so it's easier to keep track of and prevent any different behavior from occurring between browsers:

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

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;
}

score 0 · Answer 3

The spacing problem has to do with the size of the words combined with padding . the way your code is just does not fit. will always give you some trouble since how the font is rendered to the browser's box-model.

One option is to in this example that uses flexbox and let the browser calculate the spacing for you.

Or review your code (it worked fine, but I do not know if it caters to 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;
  }

no 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>