Layout break with top menu in different browsers

Asked

Viewed 346 times

1

Guys, I’m having problems in my top menu, as for the size of the black bar that is marking the menu area and the size of each area <li> from my menu. In Google Chrome is all good, then when I step to test in other browsers everything goes to hell... I will put some photos and the code, for you to download.

Chrome is quiet...

inserir a descrição da imagem aqui

In Firefox no longer scrolls... the border is passing the black area of the menu, and this way happens with the edge and IE.

inserir a descrição da imagem aqui

HTML code

<!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; 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 front-end css-hover css-transitions

1 answer

2


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

  • Valew! It really solved my problem.

Browser other questions tagged html5 css3 front-end css-hover css-transitions

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