<Div> visible in all browsers except Firefox 35.01
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 👍 1All Replies (2)
Chosen Solution
Change from position: fixed; to position: absolute;
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