We're calling on all EU-based Mozillians with iOS or iPadOS devices to help us monitor Apple’s new browser choice screens. Join the effort to hold Big Tech to account!

Avatar for Username

Pesquisar no site de suporte

Evite golpes de suporte. Nunca pedimos que você ligue ou envie uma mensagem de texto para um número de telefone, ou compartilhe informações pessoais. Denuncie atividades suspeitas usando a opção “Denunciar abuso”.

Saiba mais

Esta discussão foi arquivada. Faça uma nova pergunta se precisa de ajuda.

<Div> visible in all browsers except Firefox 35.01

  • 2 respostas
  • 4 têm este problema
  • 4 visualizações
  • Última resposta de cor-el

ErikP120
ErikP120
more options

On wp.erikwiss.com the div #slogan is not visible in FF, where it shows perfectly in all other browsers. This has something to do with positioning, of that I'm sure. But how do I fix this problem?

This is the CSS found by FF's inspect element: (#slogan is supposed to be centered both vertically and horizontally

  1. slogan { 
   height: auto;
   text-align: center;
   position: fixed;
   width: 100%;
   left: 50%;
   margin: 0px 0px 0px -50%;
   z-index: 2;
   top: 50%;
   transform: translateY(-50%);
On wp.erikwiss.com the div #slogan is not visible in FF, where it shows perfectly in all other browsers. This has something to do with positioning, of that I'm sure. But how do I fix this problem? This is the CSS found by FF's inspect element: (#slogan is supposed to be centered both vertically and horizontally #slogan { height: auto; text-align: center; position: fixed; width: 100%; left: 50%; margin: 0px 0px 0px -50%; z-index: 2; top: 50%; transform: translateY(-50%);

Solução escolhida

Change from position: fixed; to position: absolute;

Ler esta resposta 👍 1

Todas as respostas (2)

Diego Victor
Diego Victor
more options

Solução escolhida

Change from position: fixed; to position: absolute;

cor-el
cor-el
  • Moderator
  • Top 10 Contributor
more options

Firefox shows that section further down because of top:50% (50% of the length of the enveloping div #skrollr-body).

There is also a problem with the tags in that section. The page source flags the closing </a> in red as 'end tag 'a' violates nesting rules' (hover red code to see an informative tooltip). The closing </p> tags are flagged as well. So you need to check that part of the code. For some reason it doesn't show in the Inspector. 

<div id="slogan">
<a href="#what-we-do" class="js-coll-local-link"></p>
<h1>
Det är dags att ge din musik det sound den förtjänar</p>
<p>Välkommen till Wiss Music Productions<br />
</h1>
<p></a>
</div>

I assume that you want something like this: 

<div id="slogan">
<a href="#what-we-do" class="js-coll-local-link">
<h1>
<p>Det är dags att ge din musik det sound den förtjänar</p>
<p>Välkommen till Wiss Music Productions</p>
</h1>
</a>
</div>

Alterado por cor-el em