I struggled to find the right words for the title because this issue is quite elusive.
If you visit and click on one of the three boxes, you'll notice a problem when using Firefox. The menu on the left side appears in the correct position on IE or Chrome, but on Firefox, it begins way farther down the page.
Upon inspecting the console, I found some CSS errors related to bootstrap.css. Despite searching for known issues with Firefox on the Bootstrap website, I couldn't find anything relevant.
Here's the HTML code for the main area where the menu is:
<!-- Main Body Area -->
<div class="main-container-notes">
<div id="left-box">
<?php
echo "<div style='width: 100%; display: table;'>";
while( $noteName = sqlsrv_fetch_array( $resultNotes, SQLSRV_FETCH_ASSOC))
{
echo "<div class='hvr-bounce-to-right1 hover-cursor' style='width: 100%; border-right: 5px solid #00AA88; height: 50px;'>" . $noteName['NoteName'] . "</div>";
}
echo "</div>";
?>
</div>
<div id="right-box">
</div>
</div>
<!-- End Main Body Area -->
I've included my entire CSS file here so you can see all the classes.
There's one for Animations and another for General Styles.
This issue is quite perplexing, and I'm unsure of what additional information you might need. Feel free to ask, and I'll provide it.
So, why is this issue only occurring in Firefox?