Upper menu layout break in different browsers

Question

Upper menu layout break in different browsers

Navigation

#1 by (2 votes)

1

Well, I'm having problems on my top menu, how big is the size of the black bar that is marking the menu area and the area size of each <li> of my menu. In Google Chrome it's all good, then when I go to test in other browsers everything goes down ... I'll put some photos and the code, so you can get them out.

Chrome is quiet ...

InFirefoxitnolongerscrolls...borderispassingfromtheblackareaofthemenu,andthishappenswiththeedgeandIE.

HTMLcode

<!DOCTYPEhtml><html><head><title>Introdução</title><metacharset="utf-8">
    <link rel="stylesheet" type="text/css" href="../css/menu.css">
</head>
<body>
<header>
  <nav id="menu-principal">
      <figure id="logo">
          <h1><a href="index.html"><img src="../image/logo.png" alt="Logomarca Front-End Development"></a></h1>
      </figure>
          <ul id="lista-menu">
               <li><a href="introducao.html">INTRODUÇÃO</a></li>
               <li><a href="html&css.html">HTML & CSS</a></li>
               <li><a href="js&jquery.html">JAVASCRIPT & JQUERY</a></li>
               <li><a href="tutoriais.html">TUTORIAIS</a></li>
          </ul>
        </nav>
    </header>
    <div class="content">
        <p style="text-align:center;">INTRODUÇÃO</p>
    </div>
</body>
</html>

<style>    
 *{ margin: 0; padding: 0; font-family: arial, sans-serif; }
 a, li{ list-style: none; text-decoration: none; font-size: 15px;} /* tom de roxo: #744852; tom de rosa: #d75c6b; */

 header {
    background-color: rgba(0,0,0, 0.8);
    height: 50px;
 }

 #logo img {
    width: 150px;
    position: absolute;
    left: 50px;
    margin-top: -10px;
 }

 #lista-menu{
    margin-top: 16px;
    float: right;
    margin-right: 50px;
 }

 #lista-menu li{
    display: inline-block;
 }

 #lista-menu li a{
    color: #fff;
    padding: 18px 15px 13px;
 }

 #lista-menu li a:hover{
    color: #d75c6b;
    background-color: #fff;
    border-bottom: 4px solid #d75c6b;
 }
 </style>

html5 css3 css-hover front-end

asked by anonymous 15.11.2016 / 04:12

1 answer

Conditional error in C Insert text in the header of a worksheet from the text contained in a cell

score 2 · Accepted Answer

I've changed your code to:

<!DOCTYPE html>
<html>
<head>
    <title>Introdução</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="../css/menu.css">
</head>
<body>
<header>
  <nav id="menu-principal">
      <figure id="logo">
          <h1><a href="index.html"><img src="../image/logo.png" alt="Logomarca Front-End Development"></a></h1>
      </figure>
          <ul id="lista-menu">
               <li><a href="introducao.html">INTRODUÇÃO</a></li>
               <li><a href="html&css.html">HTML & CSS</a></li>
               <li><a href="js&jquery.html">JAVASCRIPT & JQUERY</a></li>
               <li><a href="tutoriais.html">TUTORIAIS</a></li>
          </ul>
        </nav>
    </header>
    <div class="content">
        <p style="text-align:center;">INTRODUÇÃO</p>
    </div>
</body>
</html>

<style>    
*{ margin: 0; padding: 0; border:0;font-family: arial, sans-serif; }
a, li{ list-style: none; text-decoration: none; font-size: 15px;} /* tom de roxo: #744852; tom de rosa: #d75c6b; */
header{
    background-color: rgba(0,0,0, 0.8);
    height: 50px;
}
#logo img {
    width: 150px;
    position: absolute;
    left: 50px;
    margin-top: -10px;
}
#lista-menu{
    float: right;
    margin-right: 50px;
}
li{
    display: inline;
}
a{
 	line-height:50px;
	float:left;
 	padding: 0 15px 0 15px;
    color: #fff;
    height:46px;
    display: block;   
 }
 #lista-menu li a:hover{
 	height:46px;
    color: #d75c6b;
    background-color: #fff;
    border-bottom: 4px solid #d75c6b;
 }
 </style>