What makes a code have different visual representations in different browsers?

Asked

Viewed 73 times

6

I have a website that I am developing on which I have a top set menu (a navbar). The problem is this navbar has different views on Chrome and Firefox. I’d like to know why this is happening.

  • I use Bootstrap 4.3.1 on the page.

See below the navbar code:

<!DOCTYPE html>
<html lang="pt-br">

<head>

  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <!-- Meta tags Obrigatórias -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">

  <!-- Estilo customizado -->
  <link rel="stylesheet" type="text/css" href="css/estilo.css">


  <link rel="icon" href="img/favicon.ico">

</head>

<body>

  <header>
    <nav class="navbar navbar-expand-md navbar-light fixed-top navbar-transparente">

      <div class="container">

        <a href="index.html" class="navbar-brand text-light" id="a-logo">
          <marquee>Thiago Petherson | Desenvolvedor Web</marquee>
        </a>



        <button class="navbar-toggler" data-toggle="collapse" data-target="#nav-principal">
					<i class="fas fa-bars text-white"></i>
				</button>

        <div class="collapse navbar-collapse" id="nav-principal">
          <ul class="navbar-nav ml-auto">
            <li class="nav-item">
              <a href="views/cursos.html" class="nav-link">Minhas Qualificações</a>
            </li>

            <li class="nav-item">
              <a href="views/calculador_imc.php" class="nav-link">Calcule seu IMC</a>
            </li>

            <li class="nav-item divisor">

            </li>

            <li class="nav-item">
              <a href="views/consideracoes.html" class="nav-link">Me conheça</a>
            </li>
            <li class="nav-item">
              <a href="" class="nav-link">Projetos Desenvolvidos</a>
            </li>

            <li class="nav-item">
              <a href="views/historico-profissional.html" class="nav-link">Histórico Profissional</a>
            </li>

          </ul>
        </div>

      </div>
    </nav>
  </header>
  <!-- Fim do Cabeçalho -->

How it looks in Chrome:

**Como fica no Chrome:**

Now on Firefox

**Agora no Firefox**

I would like to know why this is happening and if there is a way to solve it. These things happen a lot in different browsers. I have been through several situations where the code was displayed differently in the browsers. Thank you!

css html5 bootstrap-4

2 answers

5


Bootstrap 4 is HTML5-based and the marquee is obsolete. Although it even works, it is not recommended to use it as it can be removed at any time from browsers.

With this, Firefox along with the BS4 grid system is treating the tag differently compared to Chrome (and other browsers such as IE11 and Edge), not adjusting inside the flexbox, stretching the tag width, making it take up more space than it should within the flexbox.

Forget the marquee and use a modern animation with @keyframes. The effect is the same and is compatible with HTML5.

Exchange the <marquee> by a <span> and insert this CSS below to make the animation:

#a-logo{
   overflow: hidden;
}

#a-logo span {
    display: inline-block;
    padding-left: 100%;
    animation: marquee 15s linear infinite;
}

@keyframes marquee {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}

The value 15s (15 seconds) on the property animation is how long the text will take to cross from one end to the other. This time you can adjust as you like.

Take an example:

body{
 background: blue !important;
}

.nav-item a{
   white-space: nowrap !important;
}

#a-logo{
   overflow: hidden;
}

#a-logo span {
    display: inline-block;
    padding-left: 100%;
    animation: marquee 15s linear infinite;
}

@keyframes marquee {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<header>
    <nav class="navbar navbar-expand-md navbar-light fixed-top navbar-transparente">

      <div class="container">

      <a href="index.html" class="navbar-brand text-light" id="a-logo">
         <span>Thiago Petherson | Desenvolvedor Web</span>
      </a>



        <button class="navbar-toggler" data-toggle="collapse" data-target="#nav-principal">
					<i class="fas fa-bars text-white"></i>
				</button>

        <div class="collapse navbar-collapse" id="nav-principal">
          <ul class="navbar-nav ml-auto">
            <li class="nav-item">
              <a href="views/cursos.html" class="nav-link">Minhas Qualificações</a>
            </li>

            <li class="nav-item">
              <a href="views/calculador_imc.php" class="nav-link">Calcule seu IMC</a>
            </li>

            <li class="nav-item divisor">

            </li>

            <li class="nav-item">
              <a href="views/consideracoes.html" class="nav-link">Me conheça</a>
            </li>
            <li class="nav-item">
              <a href="" class="nav-link">Projetos Desenvolvidos</a>
            </li>

            <li class="nav-item">
              <a href="views/historico-profissional.html" class="nav-link">Histórico Profissional</a>
            </li>

          </ul>
        </div>

      </div>
    </nav>
  </header>

  • But Sam, is it just the dial that’s ruining all the other elements that are in the navbar ? Because if you stop the problem that is happening is not based on the functionality of the marque, but of the <li>...

  • It is the same Marquee that is breaking the layout. Firefox is not treating it as Chrome does, for example.

  • What is this @keyframes ?

  • It’s a CSS animation.

  • I made your suggestion but the <span> text is stopped.

  • Take a look at the example I posted, it doesn’t stand still :D

  • I mean, I checked here now. What was happening in firefox, is now happening in Chrome. Firefox worked.

  • I didn’t notice here no. I put .nav-item a{&#xA; white-space: nowrap !important;&#xA;} not to break lines in the menu.

  • With that you solved, @Sam. Thanks!

Show 4 more comments

0

Problem

There are some pre-defined rules in the browsers, the border size, spacing and so on, a good solution is to "reset" these rules before you start coding.

Solution

You can normalize these rules, there is already this ready to download, you can download the css here.

How to use

Just put the normalize.css and put before its rules, so it will normalize all rules, thus avoiding divergences.

<link rel="stylesheet" type="text/css" href="normalize.css">

Extra

Another solution is to reset the rules, "zeroing" each attribute, below some links with examples.

https://meyerweb.com/eric/tools/css/reset/ https://gist.github.com/DavidWells/18e73022e723037a50d6

Browser other questions tagged css html5 bootstrap-4

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