My site gets messy in Microsoft Edge, Firefox, and Safari. How to Resolve this Issue?

Question

My site gets messy in Microsoft Edge, Firefox, and Safari. How to Resolve this Issue?

Asked 8 years, 11 months ago

Viewed 823 times

2

My site picks up Chrome and Opera, but when I test these other browsers it gets messy, plus, in Edge.

Edge-

Safari-

Firefox is the one with the least errors-

My Code:

/*--------------------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>
 <script src="js/javascript.js"></script>
 <script src="js/jquery.bxslider.min.js"></script>
 <script src="js/modernizr-custom.js"></script> 
</body>
</html>

7

Welcome! Met the evil that haunts every front end developer :) It has a lot of code to analyze, but probably one of the reasons is these statements with values in pixels. If you want to create a fluid layout, go to percentage.

– Renan Gomes

2015/12/19 at 00:29
I will create responsive, and I did first for desktop.

– Gilmar Santos

2015/12/19 at 00:31
1

Hello, this problem should be due to pixel values, as mentioned in the above answer. But even if you don’t use percentage, you might be solving this using some framework, like Bootstrap, which already has a whole grid scheme that reduces almost to 0 these layout breaking problems in other browsers. Link to Bootstrap: [getbootstrap.com]

– João Victor

2015/12/19 at 04:05
So I have to move on to relative measures. @Joãovictor

– Gilmar Santos

2015/12/19 at 14:48
1

Friend, try using this: https://necolas.github.io/normalize.css/

– Tiago P.C

2015/12/22 at 17:54
Friend already used the ccs normalize, but it did not help.

– Gilmar Santos

2015/12/22 at 17:57
1

Already tried using Bootstrap or grid 960?

– PauloHDSousa

2015/12/22 at 17:58
1

'Cause I don’t know how to use it.

– Gilmar Santos

2015/12/22 at 17:59
1

@Gilmarsantos instead of using the file protocol, use a local server like Apache and test again, browsers interpret the location of css Resources differently.

– Guilherme Nascimento

2015/12/22 at 17:59
A tip I can give you, bootstrap never makes you learn why this happens. If you want to learn how to solve your problems without a framework, if it’s something for production that you don’t have time to learn, then it’s a valid reason to use bootstrap. Do you have any links to this online page? Analyzing the full HTML is much easier to find the defect.

– Renan Cavalieri

2015/12/31 at 00:38

Show 5 more comments

1 answer

Browser other questions tagged html css

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

by Sam • **79,597** points · Answer 1 · 2015-12-31T00:26:15+00:00

From my experience, a WELL-WRITTEN CODE has the same effect on any browser, it can only have some small variation in the font rendering or other details but that do not change the layout desired.

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

I suggest that you redo all the code, concisely and cleanly, building one area after another (top, body, side column, footer...) and go testing in the browsers one by one, and if there is any difference, try to know what is wrong until it is equal in all, and then move on to the next area and so on.

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

I’m not judging your level of knowledge if you are a professional in the field or just venturing, but from what I’m seeing, you need to improve a lot yet. Good luck!