How to prevent <div> floating on top of other divs in Firefox?

Question

In the project that I am doing, I have several sections one below the other, and I load them one by one, depending on the choice of the embankment. Now this works great if I don't have any fancy elements in the <div> . But when I added the form to the div, it started to float on the div above it. This happens when I select any element in the form. In addition, I cannot select any element in the dropDown list that is in the <form> .

Here is an example section list code

  <div class="container"> <div class="st-container"> <input type="radio" name="radio-set" checked="checked" id="st-control-1"/> <a href="#st-panel-1">Serendipity</a> <input type="radio" name="radio-set" id="st-control-2"/> <a href="#st-panel-2">Happiness</a> <input type="radio" name="radio-set" id="st-control-3"/> <a href="#st-panel-3">Tranquillity</a> <input type="radio" name="radio-set" id="st-control-4"/> <a href="#st-panel-4">Positivity</a> <input type="radio" name="radio-set" id="st-control-5"/> <a href="#st-panel-5">Passion</a> <div class="st-scroll"> <div class="st-panel" id="st-panel-1"> <h2>Serendipity</h2> <p>Banksy adipisicing eiusmod banh mi sed. Squid stumptown est odd future nisi, commodo mlkshk pop-up adipisicing retro.</p> </div > <!--problematic div starts--> <div id="RepresentativeRegistrationPage" class="st-panel st-color"> <form action="#" method="post" id="registration-form" novalidate="novalidate"> College: <select class="required" id="college_id" name="college_id"> <option selected="selected" value="">Select College</option> <option value="4">St. Xaviers College</option> <option value="5">DMC College</option> </select><span class="error_msg"></span><br> First Name: <input type="text" value="" class="required" name="first_name" id="first_name"><span class="error_msg"></span><br> Last Name: <input type="text" value="" class="required" name="last_name" id="last_name"><span class="error_msg"></span><br> Username: <input type="text" class="required" name="username" id="username"><span class="error_msg"></span><br> Password: <input type="password" class="required" name="password" id="password"><span class="error_msg"></span><br> Confirm Password: <input type="password" class="required" name="confirm_password" id="confirm_password"><span class="error_msg"></span><br> Mobile Number: <input type="text" value="" class="required" name="mobile_number" id="mobile_number"><span class="error_msg"></span><br> Email address: <input type="text" value="" class="required" name="email" id="email"><span class="error_msg"></span><br> <input type="submit" value="Register" name="submit"> </form> </div> <!--problematic div ends --> <div class="st-panel" id="st-panel-3"> <h2>Tranquillity</h2> <p>Sint aute occaecat id vice. Post-ironic fap pork belly next level godard, id fanny pack williamsburg forage truffaut.</p> </div> <div class="st-panel st-color" id="st-panel-4"> <h2>Positivity</h2> <p>Mixtape fap leggings art party, butcher authentic farm-to-table you probably haven't heard of them do labore cosby sweater.</p> </div> <div class="st-panel" id="st-panel-5"> <h2>Passion</h2> <p>Fixie ad odd future polaroid dreamcatcher, nesciunt carles bicycle rights accusamus mcsweeney mumblecore nulla irony.</p> </div> </div><!-- // st-scroll --> </div><!-- // st-container --> 

And here is the CSS

 .st-container { position: absolute; width: 100%; height: 100%; top: 0; left: 0; font-family: 'Josefin Slab', 'Myriad Pro', Arial, sans-serif; } .st-container > input, .st-container > a { position: fixed; bottom: 0px; width: 20%; cursor: pointer; font-size: 16px; height: 34px; line-height: 34px; } .st-container > input { opacity: 0; z-index: 1000; } .st-container > a { z-index: 10; font-weight: 700; background: #e23a6e; color: #fff; text-align: center; text-shadow: 1px 1px 1px rgba(151,24,64,0.2); } /* "Fix" for percentage rounding: add a background bar pseudo element with the same color like the labels */ .st-container:before { content: ''; position: fixed; width: 100%; height: 34px; background: #e23a6e; z-index: 9; bottom: 0; } #st-control-1, #st-control-1 + a { left: 0; } #st-control-2, #st-control-2 + a { left: 20%; } #st-control-3, #st-control-3 + a { left: 40%; } #st-control-4, #st-control-4 + a { left: 60%; } #st-control-5, #st-control-5 + a { left: 80%; } .st-container > input:checked + a, .st-container > input:checked:hover + a{ background: #821134; } .st-container > input:checked + a:after, .st-container > input:checked:hover + a:after{ bottom: 100%; border: solid transparent; content: ''; height: 0; width: 0; position: absolute; pointer-events: none; border-bottom-color: #821134; border-width: 20px; left: 50%; margin-left: -20px; } .st-container > input:hover + a{ background: #AD244F; } .st-container > input:hover + a:after { border-bottom-color: #AD244F; } .st-scroll, .st-panel { position: relative; width: 100%; height: 100%; } .st-scroll { top: 0; left: 0; -webkit-transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; -ms-transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out; /* Let enforce some hardware acceleration */ -webkit-transform: translate3d(0, 0, 0); -webkit-backface-visibility: hidden; } .st-panel{ background: #fff; overflow: hidden; } #st-control-1:checked ~ .st-scroll { -webkit-transform: translateY(0%); -moz-transform: translateY(0%); -o-transform: translateY(0%); -ms-transform: translateY(0%); transform: translateY(0%); } #st-control-2:checked ~ .st-scroll { -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -o-transform: translateY(-100%); -ms-transform: translateY(-100%); transform: translateY(-100%); } #st-control-3:checked ~ .st-scroll { -webkit-transform: translateY(-200%); -moz-transform: translateY(-200%); -o-transform: translateY(-200%); -ms-transform: translateY(-200%); transform: translateY(-200%); } #st-control-4:checked ~ .st-scroll { -webkit-transform: translateY(-300%); -moz-transform: translateY(-300%); -o-transform: translateY(-300%); -ms-transform: translateY(-300%); transform: translateY(-300%); } #st-control-5:checked ~ .st-scroll { -webkit-transform: translateY(-400%); -moz-transform: translateY(-400%); -o-transform: translateY(-400%); -ms-transform: translateY(-400%); transform: translateY(-400%); } /* Content elements */ .st-deco{ width: 200px; height: 200px; position: absolute; top: 0px; left: 50%; margin-left: -100px; background: #fa96b5; -webkit-transform: translateY(-50%) rotate(45deg); -moz-transform: translateY(-50%) rotate(45deg); -o-transform: translateY(-50%) rotate(45deg); -ms-transform: translateY(-50%) rotate(45deg); transform: translateY(-50%) rotate(45deg); } [data-icon]:after { content: attr(data-icon); font-family: 'RaphaelIcons'; color: #fff; text-shadow: 1px 1px 1px rgba(151,24,64,0.2); position: absolute; width: 200px; height: 200px; line-height: 200px; text-align: center; font-size: 90px; top: 50%; left: 50%; margin: -100px 0 0 -100px; -webkit-transform: rotate(-45deg) translateY(25%); -moz-transform: rotate(-45deg) translateY(25%); -o-transform: rotate(-45deg) translateY(25%); -ms-transform: rotate(-45deg) translateY(25%); transform: rotate(-45deg) translateY(25%); } .st-panel h2 { color: #e23a6e; text-shadow: 1px 1px 1px rgba(151,24,64,0.2); position: absolute; font-size: 54px; font-weight: 900; width: 80%; left: 10%; text-align: center; line-height: 50px; margin: -70px 0 0 0; padding: 0; top: 50%; -webkit-backface-visibility: hidden; } #st-control-1:checked ~ .st-scroll #st-panel-1 h2, #st-control-2:checked ~ .st-scroll #st-panel-2 h2, #st-control-3:checked ~ .st-scroll #st-panel-3 h2, #st-control-4:checked ~ .st-scroll #st-panel-4 h2, #st-control-5:checked ~ .st-scroll #st-panel-5 h2{ -webkit-animation: moveDown 0.6s ease-in-out 0.2s backwards; -moz-animation: moveDown 0.6s ease-in-out 0.2s backwards; -o-animation: moveDown 0.6s ease-in-out 0.2s backwards; -ms-animation: moveDown 0.6s ease-in-out 0.2s backwards; animation: moveDown 0.6s ease-in-out 0.2s backwards; } @-webkit-keyframes moveDown{ 0% { -webkit-transform: translateY(-40px); opacity: 0; } 100% { -webkit-transform: translateY(0px); opacity: 1; } } @-moz-keyframes moveDown{ 0% { -moz-transform: translateY(-40px); opacity: 0; } 100% { -moz-transform: translateY(0px); opacity: 1; } } @-o-keyframes moveDown{ 0% { -o-transform: translateY(-40px); opacity: 0; } 100% { -o-transform: translateY(0px); opacity: 1; } } @-ms-keyframes moveDown{ 0% { -ms-transform: translateY(-40px); opacity: 0; } 100% { -ms-transform: translateY(0px); opacity: 1; } } @keyframes moveDown{ 0% { transform: translateY(-40px); opacity: 0; } 100% { transform: translateY(0px); opacity: 1; } } .st-panel p { position: absolute; text-align: center; font-size: 16px; line-height: 22px; color: #8b8b8b; z-index: 2; padding: 0; width: 50%; left: 25%; top: 50%; margin: 10px 0 0 0; -webkit-backface-visibility: hidden; } #st-control-1:checked ~ .st-scroll #st-panel-1 p, #st-control-2:checked ~ .st-scroll #st-panel-2 p, #st-control-3:checked ~ .st-scroll #st-panel-3 p, #st-control-4:checked ~ .st-scroll #st-panel-4 p, #st-control-5:checked ~ .st-scroll #st-panel-5 p{ -webkit-animation: moveUp 0.6s ease-in-out 0.2s backwards; -moz-animation: moveUp 0.6s ease-in-out 0.2s backwards; -o-animation: moveUp 0.6s ease-in-out 0.2s backwards; -ms-animation: moveUp 0.6s ease-in-out 0.2s backwards; animation: moveUp 0.6s ease-in-out 0.2s backwards; } @-webkit-keyframes moveUp{ 0% { -webkit-transform: translateY(40px); opacity: 0; } 100% { -webkit-transform: translateY(0px); opacity: 1; } } @-moz-keyframes moveUp{ 0% { -moz-transform: translateY(40px); opacity: 0; } 100% { -moz-transform: translateY(0px); opacity: 1; } } @-o-keyframes moveUp{ 0% { -o-transform: translateY(40px); opacity: 0; } 100% { -o-transform: translateY(0px); opacity: 1; } } @-ms-keyframes moveUp{ 0% { -ms-transform: translateY(40px); opacity: 0; } 100% { -ms-transform: translateY(0px); opacity: 1; } } @keyframes moveUp{ 0% { transform: translateY(40px); opacity: 0; } 100% { transform: translateY(0px); opacity: 1; } } /* Colored sections */ .st-color, .st-deco{ background: #fa96b5; } .st-color [data-icon]:after { color: #fa96b5; } .st-color .st-deco { background: #fff; } .st-color h2 { color: #fff; text-shadow: 1px 1px 1px rgba(0,0,0,0.1); } .st-color p { color: #fff; color: rgba(255,255,255,0.8); } @media screen and (max-width: 520px) { .st-panel h2 { font-size: 42px; } .st-panel p { width: 90%; left: 5%; margin-top: 0; } .st-container > a { font-size: 13px; } } @media screen and (max-width: 360px) { .st-container > a { font-size: 10px; } .st-deco{ width: 120px; height: 120px; margin-left: -60px; } } body{ font-family: Georgia, serif; background: #ddd; font-weight: 400; font-size: 15px; color: #333; overflow: hidden; -webkit-font-smoothing: antialiased; } a{ color: #555; text-decoration: none; } .clr{ clear: both; padding: 0; height: 0; margin: 0; 

This problem only occurs in Firefox (I am using Firefox 16.0). Below is the JSFiddle problem. Click "Happiness" on the navigation bar to go to the problem section. Can someone please help me deal with the problem?

Answer 1

Css magic seems to confuse Firefox in terms of “tabbing”. This is a very interesting problem, because it seems that Firefox is trying to find the tag and automatically aligns the viewport to do the top, although this is already ... CSS is wise, I can’t do anything to help, since even with overflow:hidden , you can still use the middle mouse button to scroll through the body and, therefore, cause the out of adjustment problem present in Firefox. Using google chrome, clicking a tab on the Serendipity tab several times will cause the viewport to automatically go to the input tab. See Avoid unwanted scrolling caused by keyboard navigation in IE?

However, with javascript, this can easily be avoided if you are willing to sacrifice the "no javascript" aspect of your site.

 var tabs = document.getElementById("registration-form").elements; for (var i = 0; i < tabs.length; i++) { tabs[i].setAttribute("tabindex", i + 1); tabs[i].addEventListener('keydown', function(e) { var e = window.event || e; var keyCode = e.keyCode || e.which; if (keyCode == 9) { e.preventDefault(); var x = window.scrollX, y = window.scrollY; var elementToFocus = document.getElementById("registration-form").elements[this.getAttribute("tabindex")]; if (typeof elementToFocus == "undefined") { elementToFocus = document.getElementById("registration-form").elements[0]; } elementToFocus.focus(); window.scrollTo(x, y); } }); } window.addEventListener("scroll", function(e) { var e = window.event || e; e.preventDefault(); window.scrollTo(0, 0); });​ 

http://jsfiddle.net/DGFat/15/

Answer 2

if you want to start a new div, use the clear attribute to prevent inheritance of the previous div. Something like that:

 <div your style here></div> <div Style="clear:both"></div> <div You second div></div> 

Answer 3

Are you trying to center this shape? Check this:

Add this to your css (jsFiddle here: http://jsfiddle.net/DGFat/8/ )

 form { height:200px; position: absolute; left: 50%; width:300px; top: 50%; margin: -100px 0 0 -150px; background: gray; /*just so you could see it better */ } 

Answer 4

I think the problem is that you are using input for "everything."

Addendum: [type="checkbox"] to your CSS in this declaration:
.st-container > input, .st-container > a { ... } becomes .st-container > input[type="checkbox"], .st-container > a { ... }

Stops the tab issue in FF, but breaks the layout a bit and discards the navigation. Sounds worse than it is.

All browsers have built-in properties for input elements. I think your CSS implementation just doesn't do enough good work to isolate your functionality from presentation.