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

Támogatás keresése

Kerülje el a támogatási csalásokat. Sosem kérjük arra, hogy hívjon fel egy telefonszámot vagy osszon meg személyes információkat. Jelentse a gyanús tevékenységeket a „Visszaélés bejelentése” lehetőséggel.

További tudnivalók

A témacsoportot lezárták és archiválták. Tegyen fel új kérdést, ha segítségre van szüksége.

<Div> visible in all browsers except Firefox 35.01

  • 2 válasz
  • 4 embernek van ilyen problémája
  • 4 megtekintés
  • Utolsó üzenet ettől: 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%);

Kiválasztott megoldás

Change from position: fixed; to position: absolute;

Válasz olvasása eredeti szövegkörnyezetben 👍 1

Összes válasz (2)

Diego Victor
Diego Victor
more options

Kiválasztott megoldás

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>

Módosította: cor-el,