My site gets messed up on Microsoft Edge, Firefox and Safari. How to solve this problem? [closed]

Navigation
2

My site catches on Chrome and Opera, but when testo in those other browsers gets messy, more, on Edge.

Edge -

Safari-

Firefoxistheonethathastheleasterrors-

MyCode:

/*--------------------Confgurações primarias css--------------------*/
@import url(https://fonts.googleapis.com/css?family=Open+Sans);
@import url(https://fonts.googleapis.com/css?family=Open+Sans:700);
@import url(https://fonts.googleapis.com/css?family=Roboto:700); 

*{margin:0; padding:0; border:0; list-style:none; vertical-align:baseline;}
img{max-width:100%;}
*, *:before, *:after{-webkit-box-sizing: border-box; -moz-box-sizing:border-box; box-sizing: border-box;}
a{text-decoration:none; list-style:none;}

.clearfix:after, .clearfix:before{content:""; display:table;}
.clearfix:after{clear:both;}
/*--------------------Confgurações do topo--------------------*/

header{background-color:#222; width:100%; height:70px;}	
.topo{width:1110px; height:auto; margin:0 auto 0 auto;}
.logo{width:184px; margin:0 auto; float:left; margin-top:10px;}

/*--------------------Confgurações da caixa de busca--------------------*/

.container-buscar{width:1110px; margin:0 auto;}
.search-box{min-width:130px;float:right; margin-top:-41px;}/*71px;*/
.search-area{width:150px; height:36px; outline:none; border:none; position:relative; z-index:9999; background:#FFF; font-family:'Open Sans', sans-serif; font-size:1em; margin-right:-1px;}
.search-button{width:35px; height:36px; position:relative; z-index:9999; left:-4px; top:2px; outline:none; border:none; background:#FF7F00; cursor:pointer; z-index:9999;;}
button:hover{background:#000;}

/*--------------------Confgurações do menu--------------------*/

nav{width:100%; height:42px; background-color:#4682B4; font-family:'Open Sans', sans-serif; font-size:16px; color:#fff;}
.nav-menu{max-width:1110px; margin:0 auto; width:100%; text-align:left;}
nav ul {list-style-type:none; padding:0; margin:0; position:relative; min-width:200px;z-index:99;}
nav ul li{display:inline-block;}
nav ul li:hover{background-color:#000;}
nav ul li a, visited{color:#FFF; display:block; padding:10px; text-decoration:none;}
nav ul li:hover ul{display:block;}
nav ul ul{display:none; position:absolute; background-color:#222;}
nav ul ul li{display:block;}
nav ul ul li a:hover{color:#fff;}
.menu-fixo{top:0; position:fixed !important; z-index:999;}

/*--------------------Confgurações Destaques--------------------*/

.main{width:1150px; padding:20px; margin:0 auto; height:500px; overflow:hidden;}
.slideshow{width:100%; display:block; height:auto;}
.sld-left{width:65%; height:auto; float:left;}
.sld-right-top{width:35%; height:auto; float:right;}
.sld-right-bottom{width:35%; height:auto; float:right; margin-top:-4px;}
.slideshow a, visited{text-decoration:none; color:#FFF;}
.sld-left h2{float:left; font-size:40px; line-height:43px; font-family:'Roboto', sans-serif; position:relative; top:-150px; left:10px; right:-10px;}
.sld-right-top h2{float:left; font-size:25px; line-height:27px; font-family:'Roboto', sans-serif; position:relative; z-index:99; margin-top:-90px; margin-left:5px; margin-right:-5px;}
.sld-right-bottom h2{float:right; font-size:25px; line-height:27px; font-family:'Roboto', sans-serif; position:relative; top:-90px; left:5px; right:-5px; z-index:1;}
.slideshow h2:hover{text-decoration:underline;}

/*--------------------Configurações dos artigos--------------------*/

.container-conteudo-db-at{width:1110px; margin:0 auto; height:auto;}

.corpo-artigos{width:100%; height:auto; margin:80px 0 0 0; clear:both; float:left;}
.title{margin:0 auto;}
.title p{font-size:25px; font-family:'Open Sans', sans-serif; position:relative; top:-30px;}
.line{border-top: 1px solid #ccc; width:550px;}
.artigos{height:auto; margin:0 auto 90px;}
.artigos a{color:#000;}
.loop{width:600px;}
.artigos h1{font-size:20px; font-family:'Open Sans', sans-serif; font-weight:700; margin-left:200px; margin-top:-120px;} 
.artigos h1:hover{color:#4682B4; text-decoration:underline;}
.categoria p{font-size:14px; font-family:'Open Sans', sans-serif; color:#FFF; margin-left:5px; margin-right:-5px;}
.categoria{position:absolute; background:rgba(255,127,0,0.8); width:56px; height:21px; margin-top:101px; margin-left:-56px;}

/*--------------------Configurações da sidebar--------------------*/

aside{background:#ccc; width:332px; height:auto; float:right; margin:-1535px 0 0 0; }
.text-1-sdb{background:#4682B4; float:left; width:332px; height:33px;}
.text-1-sdb p{font-size:20px; font-family:'Open Sans', sans-serif; margin-left:115px; margin-top:1px;}
.social-ctn img{margin-left:5px; margin-top:10px;}
.social-ctn{margin-left:60px;}
.social li{display:inline-block;}
.text-2-sdb{background:#4682B4; float:left; width:332px; height:33px; margin-top:5px;}
.text-2-sdb p{font-size:20px; font-family:'Open Sans', sans-serif; margin-left:100px; margin-top:1px;}
.container-mais-lidas{height:auto;}
.mais-lidas{margin-left:5px;}
.mais-lidas img{width:100px; height:70px; margin-top:4px; position:relative;}
.txt-ctn{float:right; width:250px; margin-right:-28px; margin-top:3px}
.mais-lidas h2{font-size:16px; font-family:'Open Sans', sans-serif;}
.mais-lidas a{color:#000;}
.mais-lidas h2:hover{color:#4682B4; text-decoration:underline;}
.categoria-sdb p{font-size:14px; font-family:'Open Sans', sans-serif; color:#FFF; margin-left:5px; margin-right:-5px;}
.categoria-sdb{position:absolute; background:rgba(255,127,0,0.8); width:56px; height:21px; margin-top:53px; margin-left:-56px;}

/*--------------------Configurações do rodapé--------------------*/
.ir-ao-topo{float:right; cursor:pointer;}

/*--------------------Configurações ver-mais--------------------*/
.container-vmais{width:1110px; margin:0 auto;}
.ver-mais{font-size:22px; font-family:'Open Sans', sans-serif; font-weight:700; float:left; color:#000; margin-top:35px;}
.ver-mais:hover{color:#4682B4; text-decoration:underline;}
/*--------------------Configurações do rodapé--------------------*/

footer{background:#222; width:100%; height:72px; float:left;}
.copy-do-site p{width:460px; margin:0 auto; font-size:13px; font-family:'Open Sans', sans-serif; color:#FFF; margin-top:45px;}
.copy-do-site a{color:#FFF;}
.copy-do-site a:hover{text-decoration:underline;}
.nav-rdp{width:500px; margin:0 auto;}
.nav-rdp ul li{display:inline-block; float:left; font-size:16px; font-family:'Open Sans', sans-serif; padding:7px 0 0 25px;}
.nav-rdp a{color:#FFF;}
.nav-rdp :hover{text-decoration:underline;}
<!doctype html>
<html lang="PT-BR">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta charset="utf-8">
<meta content= "Se informe com notícias sobre tecnologia, games, internet, diversão, segurança, informática, programação." name="description">
<title>Dominção Tech</title>
<link rel="stylesheet" href="css/style.css" type="text/css" media="all">
<link rel="icon" href=""/>
<link rel="stylesheet" type="text/css" href="css/jquery.bxslider.css">
<body>

<header>
 <div class="topo">
   <span class="logo clearfix"><a href="index.php" title="dominacaotech.com"><img src="img/logotipo.png" alt="Dominação Tech"/></a></span>
 </div>
</header>
 
 <nav>
  <ul class="nav-menu clearfix">
    <li><a href="index.php">Home</a></li>
    <li><a href="#">Games</a>
     <ul>
      <li><a href="#">Notícias</a></li>
      <li><a href="#">Playstation</a></li>
      <li><a href="#">Xbox</a></li>
      <li><a href="#">Nintendo</a></li>
      <li><a href="#">Reviews</a></li>
     </ul>
    </li>
    
    <li><a href="#">Mobile</a>
     <ul>
      <li><a href="#">Notícias</a></li>
      <li><a href="#">Android</a></li>
      <li><a href="#">IOS</a></li>
      <li><a href="#">Windows phone</a></li>
      <li><a href="#">Dicas e ajudas</a></li>
     </ul>
    </li>
    
     <li><a href="#">Informática</a>
     <ul>
      <li><a href="#">Notícias</a></li>
      <li><a href="#">Windows</a></li>
      <li><a href="#">Mac</a></li>
      <li><a href="#">Linux</a></li>
      <li><a href="#">Computadores</a></li>
      <li><a href="#">Componentes</a></li>
      <li><a href="#">Dicas e ajudas</a></li>
     </ul>
    </li>
    
    <li><a href="#">Internet</a>
     <ul>
      <li><a href="#">Notícias</a></li>
      <li><a href="#">Segurança</a></li>
      <li><a href="#">Redes Sociais</a></li>
      <li><a href="#">Diversão</a></li>
     </ul>
    </li>
    
    <li><a href="#">TI</a>
     <ul>
      <li><a href="#">Programação</a></li>
      <li><a href="#">Novas tecnologias</a></li>
      <li><a href="#">Dicas e tutoriais</a></li>
      <li><a href="#">Mercado financeiro</a></li>
     </ul>
     </li>
  </ul>
  
 <div class="container-buscar"> 
  <form action="search.html" class="search-box clearfix" method="get">
   <input class="search-area" name="q" placeholder="Buscar..." required/>
   <button class="search-button" type="submit" value="Buscar"><img src="img/tb-lupa.png" alt="Buscar no site"/></button>
 </form>
 </div>
 
 </nav>



<div class="main clearfix">
 <section class="slideshow">
 
    <div class="sld-left">
      <a href="#" title="Lorem Ipsum é simplesmente uma simulação de texto da indústria"><img src="img/img-01.jpg" alt="Lorem Ipsum é simplesmente uma simulação de texto da indústria"></a>
      <a href="#"><h2>Lorem Ipsum é simplesmente uma simulação de texto da indústria</h2></a>
    </div>
    
    <div class="sld-right-top">
      <a href="#" title="Lorem Ipsum é simplesmente uma simulação de texto da indústria"><img src="img/img-02.jpg" alt="Lorem Ipsum é simplesmente uma simulação de texto da indústria"></a>
      <a href="#"><h2>Lorem Ipsum é simplesmente uma simulação</h2></a>
    </div>
    
    <div class="sld-right-bottom">
      <a href="#" title="Lorem Ipsum é simplesmente uma simulação de texto da indústria"><img src="img/img-03.jpg" alt="Lorem Ipsum é simplesmente uma simulação de texto da indústria"></a>
      <a href="#"><h2>Lorem Ipsum é simplesmente uma simulação</h2></a>
    </div>
    
    <div class="sld-left-2">
      <a href="#" title="Lorem Ipsum é simplesmente uma simulação de texto da indústria"><img src="img/img-01.jpg" alt="Lorem Ipsum é simplesmente uma simulação de texto da indústria"></a>
      <a href="#"><h2>Lorem Ipsum é simplesmente uma simulação de texto da indústria</h2></a>
    </div>
    
    <div class="sld-right-top-2">
      <a href="#" title="Lorem Ipsum é simplesmente uma simulação de texto da indústria"><img src="img/img-02.jpg" alt="Lorem Ipsum é simplesmente uma simulação de texto da indústria"></a>
      <a href="#"><h2>Lorem Ipsum é simplesmente uma simulação</h2></a>
    </div>
    
    <div class="sld-right-bottom-2">
      <a href="#" title="Lorem Ipsum é simplesmente uma simulação de texto da indústria"><img src="img/img-03.jpg" alt="Lorem Ipsum é simplesmente uma simulação de texto da indústria"></a>
      <a href="#"><h2>Lorem Ipsum é simplesmente uma simulação</h2></a>
    </div>
    
 </section>
</div>  
 
  
<div class="container-conteudo-db-at"> 

 <section class="corpo-artigos clearfix">
 
 <div class="title">
  <div class="line"></div>
  <p>Últimas Notícias</p>
 </div>
     
  <article class="artigos">
   <a href="#" title="Um usuário conseguiu desbloquear oficialmente o PS4"><img src="img/ps4.png" alt="Um usuário conseguiu desbloquear oficialmente o PS4" title="Um usuário conseguiu desbloquear oficialmente o PS4"></a>
   <span class="categoria"><p>Games</p></span>
   <div class="loop">
   <a href="#" title="Um usuário conseguiu desbloquear oficialmente o PS4"><h1>Um usuário conseguiu desbloquear oficialmente o PS4</h1></a>
   </div>
  </article>
 
 <article class="artigos">
   <a href="#" title="Um usuário conseguiu desbloquear oficialmente o PS4"><img src="img/ps4.png" alt="Um usuário conseguiu desbloquear oficialmente o PS4" title="Um usuário conseguiu desbloquear oficialmente o PS4"></a>
   <span class="categoria"><p>Games</p></span>
   <div class="loop">
   <a href="#" title="Um usuário conseguiu desbloquear oficialmente o PS4"><h1>Um usuário conseguiu desbloquear oficialmente o PS4</h1></a>
   </div>
  </article>
 
 <article class="artigos">
   <a href="#" title="Um usuário conseguiu desbloquear oficialmente o PS4"><img src="img/ps4.png" alt="Um usuário conseguiu desbloquear oficialmente o PS4" title="Um usuário conseguiu desbloquear oficialmente o PS4"/></a>
   <span class="categoria"><p>Games</p></span>
   <div class="loop">
   <a href="#" title="Um usuário conseguiu desbloquear oficialmente o PS4"><h1>Um usuário conseguiu desbloquear oficialmente o PS4</h1></a>
   </div>
  </article>
 
 <article class="artigos">
   <a href="#" title="Um usuário conseguiu desbloquear oficialmente o PS4"><img src="img/ps4.png" alt="Um usuário conseguiu desbloquear oficialmente o PS4" title="Um usuário conseguiu desbloquear oficialmente o PS4"/></a>
   <span class="categoria"><p>Games</p></span>
   <div class="loop">
   <a href="#" title="Um usuário conseguiu desbloquear oficialmente o PS4"><h1>Um usuário conseguiu desbloquear oficialmente o PS4</h1></a>
   </div>
  </article>
  
  <article class="artigos">
   <a href="#" title="Um usuário conseguiu desbloquear oficialmente o PS4"><img src="img/ps4.png" alt="Um usuário conseguiu desbloquear oficialmente o PS4" title="Um usuário conseguiu desbloquear oficialmente o PS4"/></a>
   <span class="categoria"><p>Games</p></span>
   <div class="loop">
   <a href="#" title="Um usuário conseguiu desbloquear oficialmente o PS4"><h1>Um usuário conseguiu desbloquear oficialmente o PS4</h1></a>
   </div>
  </article>
 
 <article class="artigos">
   <a href="#" title="Um usuário conseguiu desbloquear oficialmente o PS4"><img src="img/ps4.png" alt="Um usuário conseguiu desbloquear oficialmente o PS4" title="Um usuário conseguiu desbloquear oficialmente o PS4"/></a>
   <span class="categoria"><p>Games</p></span>
   <div class="loop">
   <a href="#" title="Um usuário conseguiu desbloquear oficialmente o PS4"><h1>Um usuário conseguiu desbloquear oficialmente o PS4</h1></a>
   </div>
 </article>
 
 <article class="artigos">
   <a href="#" title="Um usuário conseguiu desbloquear oficialmente o PS4"><img src="img/ps4.png" alt="Um usuário conseguiu desbloquear oficialmente o PS4" title="Um usuário conseguiu desbloquear oficialmente o PS4"/></a>
   <span class="categoria"><p>Games</p></span>
   <div class="loop">
   <a href="#" title="Um usuário conseguiu desbloquear oficialmente o PS4"><h1>Um usuário conseguiu desbloquear oficialmente o PS4</h1></a>
   </div>
 </article>
 
 <article class="artigos">
   <a href="#" title="Um usuário conseguiu desbloquear oficialmente o PS4"><img src="img/ps4.png" alt="Um usuário conseguiu desbloquear oficialmente o PS4" title="Um usuário conseguiu desbloquear oficialmente o PS4"/></a>
   <span class="categoria"><p>Games</p></span>
   <div class="loop">
   <a href="#" title="Um usuário conseguiu desbloquear oficialmente o PS4"><h1>Um usuário conseguiu desbloquear oficialmente o PS4</h1></a>
   </div>  
 </article>
  
  <article class="artigos">
   <a href="#" title="Um usuário conseguiu desbloquear oficialmente o PS4"><img src="img/ps4.png" alt="Um usuário conseguiu desbloquear oficialmente o PS4" title="Um usuário conseguiu desbloquear oficialmente o PS4"/></a>
   <span class="categoria"><p>Games</p></span>
   <div class="loop">
   <a href="#" title="Um usuário conseguiu desbloquear oficialmente o PS4"><h1>Um usuário conseguiu desbloquear oficialmente o PS4</h1></a>
   </div>
  </article>
 
 <article class="artigos">
   <a href="#" title="Um usuário conseguiu desbloquear oficialmente o PS4"><img src="img/ps4.png" alt="Um usuário conseguiu desbloquear oficialmente o PS4" title="Um usuário conseguiu desbloquear oficialmente o PS4"/></a>
   <span class="categoria"><p>Games</p></span>
   <div class="loop">
   <a href="#" title="Um usuário conseguiu desbloquear oficialmente o PS4"><h1>Um usuário conseguiu desbloquear oficialmente o PS4</h1></a>
   </div>
  </article>
  
 </section>


 <aside class="clearfix">
 
  <span class="text-1-sdb"><p>Siga-nos</p></span>
   <section class="social-ctn">
    <ul class="social">
     <li><a target="_blank" href="https://www.facebook.com/"><img src="img/Facebook.png" alt="Facebook" title="Facebook"/></a></li>
     <li><a target="_blank" href="https://www.twitter.com/"><img src="img/Twitter.png" alt="Twitter" title="Twitter"/></a></li>
     <li><a target="_blank" href="https://plus.google.com/collections/featured"><img src="img/Google+.png" alt="Google+" title="Google+"/></a></li>
     <li><a target="_blank" href="https://www.youtube.com/"><img src="img/Youtube.png" alt="Youtube" title="Youtube"/></a></li>
    </ul>
   </section>  
    
  <span class="text-2-sdb"><p>As mais lidas</p></span>
  
   <section class="container-mais-lidas">
     <article class="mais-lidas">
     <a href="#"><img src="img/ps4.png" alt="Um usuário conseguiu desbloquear oficialmente o PS4" title="Um usuário conseguiu desbloquear oficialmente o PS4"></a>
     
     <div class="txt-ctn"><a href="#" title="Um usuário conseguiu desbloquear oficialmente o PS4"><h2>Um usuário conseguiu desbloquear oficialmente o PS4</h2></a></div>
     <span class="categoria-sdb"><p>Games</p></span>
     </article> 
     
     <article class="mais-lidas">
     <a href="#"><img src="img/ps4.png" alt="Um usuário conseguiu desbloquear oficialmente o PS4" title="Um usuário conseguiu desbloquear oficialmente o PS4"></a>
     
     <div class="txt-ctn"><a href="#" title="Um usuário conseguiu desbloquear oficialmente o PS4"><h2>Um usuário conseguiu desbloquear oficialmente o PS4</h2></a></div>
     <span class="categoria-sdb"><p>Games</p></span>
     </article> 
     
     <article class="mais-lidas">
     <a href="#"><img src="img/ps4.png" alt="Um usuário conseguiu desbloquear oficialmente o PS4" title="Um usuário conseguiu desbloquear oficialmente o PS4"></a>
     
     <div class="txt-ctn"><a href="#" title="Um usuário conseguiu desbloquear oficialmente o PS4"><h2>Um usuário conseguiu desbloquear oficialmente o PS4</h2></a></div>
     <span class="categoria-sdb"><p>Games</p></span>
     </article> 
     
     <article class="mais-lidas">
     <a href="#"><img src="img/ps4.png" alt="Um usuário conseguiu desbloquear oficialmente o PS4" title="Um usuário conseguiu desbloquear oficialmente o PS4"></a>
     
     <div class="txt-ctn"><a href="#" title="Um usuário conseguiu desbloquear oficialmente o PS4"><h2>Um usuário conseguiu desbloquear oficialmente o PS4</h2></a></div>
     <span class="categoria-sdb"><p>Games</p></span>
     </article> 
     
     <article class="mais-lidas">
     <a href="#"><img src="img/ps4.png" alt="Um usuário conseguiu desbloquear oficialmente o PS4" title="Um usuário conseguiu desbloquear oficialmente o PS4"></a>
     
     <div class="txt-ctn"><a href="#" title="Um usuário conseguiu desbloquear oficialmente o PS4"><h2>Um usuário conseguiu desbloquear oficialmente o PS4</h2></a></div>
     <span class="categoria-sdb"><p>Games</p></span>
     </article> 
    </section> 
    
 </aside>
</div>

 <span class="ir-ao-topo clearfix">
  <img src="img/back_to_top.png"/>
 </span> 
 
 <div class="container-vmais">
 <a class="ver-mais clearfix" href="#">Ver Mais conteúdo</a>
 </div>
 
 <footer>
  <section class="nav-rdp">
   <ul>
     <li><a href="#">Anuncie</a></li>
     <li><a href="#">Contatos</a></li>
     <li><a href="#">Sobre nós</a></li>
     <li><a href="#">Política de privacidade</a></li>
    </ul>
  </section>
  <span class="copy-do-site"><p>&copy; Copyright 2016 - Todos os direitos reservados ao <a href="index.php">dominacaotech.com.br</a></p></span>
 </footer>
  
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script><scriptsrc="js/javascript.js"></script>
 <script src="js/jquery.bxslider.min.js"></script>
 <script src="js/modernizr-custom.js"></script> 
</body>
</html>
    
asked by anonymous 19.12.2015 / 01:20

1 answer

3

From the experience I have, a GOOD WRITING CODE has the same effect on any browser, and may only have some slight variation in font rendering or other details but does not change the layout you want.

Looking at your code, it seemed very heavy and polluted, not respecting the possible variations of CSS interpretation and tags that may occur between one browser and another.

I suggest that you rephrase the whole code, in a concise and clean way, building one area after another (top, body, side column, footer ...) and testing browsers one by one and if there is any difference, find out what is wrong until it stays the same at all, and then move on to the next area and so on.

I have been working with the front end for over 10 years and rarely test my code in other browsers (I use Chrome) because I already know what one supports and the other does not, so I can make a concise code where the layout stays EXACTLY the same in all.

I'm not judging your level of knowledge if you're an area professional or just venturing out, but from what I'm seeing, you need to sharpen yourself a lot more. Good luck!

    
31.12.2015 / 01:26
Help with INNER JOINS angularJs form with ng-repeat