CODEWITHSUNDEEP
htmlcss
Shahar Galukman
Shahar Galukman

Reputation: 902

Page layout different in Firefox

I'm having problem getting the same results in Firefox as in Chrome. In Chrome, layout is as I want it to be, while in Firefox it seems different.

here is the markup:

<body>
    <div id="big_wrapper">

        <header id="top_header">
            <h1>Maple 16</h1>
        </header>

        <div id="box">

            <aside id="sidebar">
                <table cellpadding="0" cellspacing="15px">
                        <col span="7" width="160px" />
                        <row span="7" width="160px" />
                        <tr>
                            <td colspan="1" bgcolor="#40b040">
                                <a href="../index.html" ><img src="../images/buttons/home.png" class="img"></a>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="1" bgcolor="#ffbf00" class="img">
                                <img src="../images/buttons/shop.png">
                            </td>
                        </tr>
                        <tr>
                            <td colspan="1" bgcolor="#4040ff" class="img">
                                <img src="../images/buttons/download.png">
                            </td>
                        </tr>

                </table>

            </aside>

            <section>
                <article id="maple_article" dir="rtl" align="right">
                    <h1>מהי Maple?</h1><br />
                    <p>
                    Maple היא תוכנה לפתרון בעיות מתמטיות הנדסיות המשלבת יכולות סימבוליות, ממשק גרפי נוח לשימוש ומנוע נומרי.<br />
                    כתיבת הקוד והטקסט הינה כתיבה אינטואיטיבית ונוחה לעריכה.<br />
                    כמו כן קיים תיעוד מלא של תהליך הפתרון אשר מהווה מסמך.<br />
                    </p>
                    <p class="notice">
                    היות ו Maple אינה תוכנה אמריקאית, Maple ושרשרת המוצרים הנלווים ל Maple אינם תחת הגבלות שימוש והפצה של ארה"ב.
                    השימוש ב  Maple אינו מצריך אישור EULA.
                    </p>
                    <h2>תכונותיה העיקריות של Maple:</h2>
                    <br />
                    <ul>
                    <li>
                    יכולות גרפיות גבוהות, יצירת אפליקציות אנימציה בקלות וממשק משתמש גרפי (GUI) נוח ואינטואיטיבי. 
                    </li>
                    <li>
                    במהלך הכתיבה ב Maple מתבצע תיעוד מלא של תהליך הפתרון וכתיבת המסמך – תהליך חשוב והכרחי לשימור ידע.
                    </li>
                    <li>
                    פתרון מגוון רחב של בעיות מתמטיות (אלגברה, חדוו"א, משוואות דיפרנציאליות, סטטיסטיקה הסתברות ועוד..) המתבצע בקלות וללא הגבלת דיוק באמצעות המנוע הנומרי החזק של התוכנה. 
                    </li>
                    <li>
                    ל Maple סביבת תכנות מלאה הניתנת להרחבה. כמו כן, Maple יודע לבצע חישובים של קוד הנכתב בשפת תכנות אחרת.
                    </li>
                    <li>
                    ל Maple אפשרות להדריך (ולתקן במקרה הצורך) בפתרון בעיות מתמטיות שונות באמצעות תרגולים ופותרנים מובנים בתוכנה.
                    <li>
                    <li>
                    ל Maple יכולת להתממשק עם מגוון רחב של תוכנות לדוגמת Matlab ToolChain, Optimus ועוד..
                    </li>
                    </ul>
                    <br /><br />
                    <p>
                    כיום קיימים ב Maple יותר מ-170 חבילות תוכן (Packages) במגוון רחב של נושאים אשר מגיעים עם התוכנה עצמה וללא תשלום נוסף.
                    <p>

                </article>

            </section>

        </div>

        <div id="screenshots">
            <h2>Screenshots</h2>
            <table cellspacing="15px" id="shots_table">
                <tr>
                    <td>
                        <img src="http://placehold.it/160x160">

                    </td>
                    <td>
                        <img src="http://placehold.it/160x160">
                    </td>
                    <td>
                        <img src="http://placehold.it/160x160">
                    </td>
                    <td>
                        <img src="http://placehold.it/160x160">
                    </td>
                    <td>
                        <img src="http://placehold.it/160x160">
                    </td>
                </tr>
            </table>
        </div>

        <footer id="footer">
            Copyrights Digisec Technology. All rights reserved.
        </footer>
    </div>
</body>

As you can see, I'm using big wrapper for whole site, and box for article pages. so box will contain the sidebar and the article.

following is the CSS parts which seems relevant:

#top_header{
    margin-top: 5px;
    padding: 20px;
}

#footer{
    color: grey;
    text-align: center;
    padding: 20px;
    border-top: 2px solid black;
}

/*Articles*/
#box{
    display: -webkit-box;
    -webkit-box-orient: horizontal;
    display: -moz-box;
    -moz-box-orient: horizontal;
    display: -o-box;
    -o-box-orient: horizontal;
    margin-bottom: 10px;
}

#maple_article{
    width: 85%;
    color: #f8f8f8;
    font-size: 16px;
    margin-left: 15px;
}

#sidebar{
    width: 15%;
}

.notice{
    color: #FF6666 ;
}

/*ScreenShots*/ 
#screenshots{
    text-align: right;
}

#shots_table{
    float: right;
}

You can see I'm defining 15% width for the sidebar and 85% for the article. the screen shots our outside the box section.

I'm using box layout and also made sure moz is also defined. What am I missing?

Upvotes: 1

Views: 81

Answers (1)

Shahar Galukman
Shahar Galukman

Reputation: 902

Well, I was dumb, Had to define specific width to sidebar and make the article flexible.

Upvotes: 1

Related Questions