Join us and the lead editor of IRL, Mozilla's multi-award-winning podcast, for a behind-the-scenes look at the pod and to contribute your ideas for the next season, themed: "AI and ME." Mark your calendar and join our Community Call on Wednesday, Aug 7, 17:00–17:45 UTC. See you there!

Avatar for Username

Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

Echekwara usoro a. Biko jụọ ajụjụ ọhụrụ ma ọ bụrụ na ị chọrọ enyemaka.

<Div> visible in all browsers except Firefox 35.01

  • 2
  • 4
  • 4 views
  • Nzaghachi ikpeazụ nke 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%);

Asịsa ahọpụtara

Change from position: fixed; to position: absolute;

Gụọ azịza a na nghọta 👍 1

All Replies (2)

Diego Victor
Diego Victor
more options

Asịsa Ahọpụtara

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>

Edeziri site na cor-el