CODEWITHSUNDEEP
htmlcssfirefox
Luke Litherland
Luke Litherland

Reputation: 227

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?

Upvotes: 0

Views: 50

Answers (2)

user5718206
user5718206

Reputation:

Try to add this code:

#left-box {
vertical-align: top;
}

In my firefox it resolved your issue =) And this solution allows you to keep the height of .main-container-notes 1000px or whatever you want

Upvotes: 0

user6742604
user6742604

Reputation:

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

Upvotes: 1

Related Questions