SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Jun 2006
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    margin-top Firefox BUG

    I have a problem with nested divs and using margin-top. I am hoping somebody could help me find a solution. I made a really simple example of what I am trying to do. Here is the link: http://www.barretmonchka.com/connect...arginprob.html

    In IE, the top margin is properly applied to the red div to distance it from the top of the blue div. However, in Firefox, the top margin of the red div is applied to the blue div (it's parent element). Does anybody know what I could do? Your help would be so much appreciated.

    Different doctypes did not help the matter.

    Here is the code:


    <html>
    <head>
    <title></title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">

    table#main{
    width: 100%;
    height: 100%;
    }

    table#main td{
    width: 100%;
    height: 100%;
    vertical-align: middle;
    text-align: center;
    }

    div#blue{
    margin-right: auto;
    margin-left: auto;
    width: 780px;
    background-color: blue;
    text-align: left;
    height: auto;
    }

    div#red{
    width: 611px;
    height: 484px;
    background-color: red;
    margin-top: 55px;
    margin-left: 130px;
    }

    </style>

    </head>

    <body>

    <table id="main">
    <tr>
    <td>

    <div id="blue">
    <div id="red"></div>
    </div>

    </td>
    </tr>
    </table>

    </body>
    </html>



    thanks so much,
    Barret

  2. #2
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Collapsing margins: add 1px of top padding to #blue. Also, remove height: auto - it's already auto height so you don't need to specify it.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,784
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Firefox is in fact obeying the specs in this matter and you can read more about the effect here:

    http://www.complexspiral.com/publica...psing-margins/

    The solution Tyssen posted should sort it anyway


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •