Luke Litherland Luke Litherland - 14 days ago 7
CSS Question

Firefox displaying <DIV> incorrectly - HTML/CSS

I wasn't too sure how to word the title as its a rather obscure issue.

Essentially if you go to http://www.discovertheplanet.net click on one of the 3 boxes and if you are on firefox you will see the issue. If you view on IE or Chrome the menu on the left hand side is in the correct position, however on Firefox it starts way down the page.

I have viewed the console and there were a few CSS errors referring to the bootstrap.css. I have been on the Bootstrap website for known issues with firefox but there was nothing relevant.

My HTML for the main are 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 -->


Ive just included my whole CSS File here so you can see all the classes

There is one for the Animations and One for General Styles

Like i said its rather obscure and im not sure what extra info you require,

Please just ask and i can provide you with it.

So i ask, why is this only happening in Firefox?

Answer

the .main-container-notes height is causing this try removing it

Comments