[Firefox 4 beta 1]: Rendering <div> with [display: table-cell] strangely

Firefox displays the cells [#side, #data, #form] with a huge preceding space at the top of their contents. Whereas, Safari & Opera do not do this. Is it something to do with my CSS, or is it Firefox's fault?

HTML code:

 <body>

   <div id="banner">St. Tom's Ambulance Ball</div>

    <!-- START[container] -->
    <!-- "body" -->
    <div id="container">

        <!-- START[header] -->
        <div id="header">

            <!-- header -->
            <div id="header_text">introduction</div>
            <div id="header_cell2">the process</div>
            <div id="header_cell3">start</div>

        </div>
        <!-- END[header -->

        <!-- START[content] -->
        <!-- "other container" -->
        <div id="content">

            <!-- START[form] -->
            <!-- "for the forms" -->
            <!-- <div id="side"> -->
            <div id="form">
                <?php
                require_once(realpath($config["directories"]["views"]."/index.form.view.php"));
                ?>
            </div>
            <!-- END[form] -->

            <!-- START[data] -->
            <!-- "main content" -->
            <div id="data">
                <?php
                require_once(realpath($config["directories"]["views"]."/index.data.view.php"));
                ?>
            </div>
            <!-- END[data] -->

            <!-- START[side] -->
            <!-- "for navigation" -->
            <!-- <div id="form"> -->
            <div id="side">
                <?php
                require_once(realpath($config["directories"]["views"]."/index.side.view.php"));
                ?>
            </div>
            <!-- END[side] -->

        </div>
        <!-- END[content] -->

        <!-- START[footer] -->
        <div id="footer">
            <!-- footer -->
            <div id="footer_text">
                <ul>
                    <li><a href="index.php">home</a></li>
                    <li><a href="">partners</a></li>
                    <li><a href="">projects</a></li>
                    <li><a href="">contact us</a></li>
                </ul>
            </div>

            <div id="footer_cell2">&nbsp;</div>
            <div id="footer_cell3">&nbsp;</div>

        </div>
        <!-- END[footer] -->

    </div>
    <!-- END[container] -->
  </body>

CSS code:

#container{ border-collapse: collapse; display: table; table-layout: fixed; width: 80%; margin-left: auto; margin-right: auto; padding: 0px; font-family: Arial, Helvetica, sans-serif; font-size: 14px; }

#header, #footer{ display: table-row; color: #fff; text-align: center; font-variant: small-caps; } #footer{ background-color: #708090; text-align: left; font-weight: bold; }

#header{ background-color: #036; }

.order_no{ color: #036; }

#content{ display: table-row; }

#side, #data, #form, #footer_text{ display: table-cell; padding: 0 1em; }

#header_text, #header_cell2, #header_cell3{ display: table-cell; border-left: thin solid white; font-weight: bold; font-size: x-large }

#footer_cell2, #footer_cell3 { display: table-cell; padding: 0 1em; }

#side, #data, #form{ background-color: #f0f0f0; border: 0 solid #d0d0d0; border-right-width: 1px; padding-bottom: 10px; }

ansaurus

tags:

views:

answers:

[Firefox 4 beta 1]: Rendering <div> with [display: table-cell] strangely

related questions