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

This thread was archived. Please ask a new question if you need help.

<Div> visible in all browsers except Firefox 35.01

  • 2 replies
  • 4 have this problem
  • 4 views
  • Last reply by 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%);

Chosen solution

Change from position: fixed; to position: absolute;

Read this answer in context 👍 1

All Replies (2)

Diego Victor
Diego Victor
more options

Chosen Solution

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>

Modified by cor-el