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

Question

In the project that I'm doing, I have multiple divisions one below another and I load them one after other depending on the navbar choice. Now that works fine if I don't have any fancy elements in the <div>. But when I added a form to a div it started floating on the div above it. This happens when I select any element in form. Also, I can't seem to be able to select any item that's there in the dropDown list that's there in the <form>.

Here is sample code of the list of divisions

 <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's 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's 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 happens in Firefox ( I'm using Firefox 16.0). Here is a JSFiddle of the problem. Click on the "Happiness" option in navbar to get to the problematic section. Can someone please help me sort out the issue?

Answer 1

It seems like the css magic confuses Firefox in terms of "tabbing". This is a very interesting issue because it seems like Firefox tries to locate the tag and automatically align the viewport to make at the top, though it already is... CSS wise, I can do nothing to help, as even with overflow:hidden, you can still use the middle mouse button to scroll the body and thus cause the out-of-alignment issue present in Firefox. With google chrome, pressing tab on the "Serendipity" tab multiple times will cause the viewport to scroll to the input tab directly. See Avoid unwanted scrolling triggered by keyboard navigation in IE?

However, with javascript, this can all be easily avoided, if you're 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/