Margin-top Problem with FireFox

Discussion in 'HTML & Website Design' started by Sulan84, Jul 7, 2009.

0
  1. #1
    I have a problem with MarginTop...
    Here the Code:

    
....
<title>Unbenanntes Dokument</title>
<style type="text/css">
<!--
#main {
    background-color: #336600;
    height: 200px;
}
#middle  {
    background-color: #33CC33;
    height: 100px;
    margin-top: 50px;
}
-->
</style>
</head>
<body>

<div id="main">
<div id="middle"></div>
</div>

</body>
    HTML:

    Difference:
    [​IMG]


    I need the IE Version for Firefox...
     
    Sulan84, Jul 7, 2009 IP
  2. KnuTz

    KnuTz Well-Known Member

    Messages:
    169
    Likes Received:
    11
    Best Answers:
    0
    Trophy Points:
    130
    Digital Goods:
    1
    #2
    try using padding-top to the main division instead of margin-top in "middle" division

    <style type="text/css">
    <!--
    *{
    margin:0;
    padding:0;
    }
    #main {
    background-color: #336600;
    padding-top:50px;
    height: 150px;
    }
    #middle {
    background-color: #33CC33;
    height: 100px;
    }
    -->
    </style>
     
    KnuTz, Jul 7, 2009 IP
  3. Sulan84

    Sulan84 Member

    Messages:
    121
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    28
    #3
    thank you. ill try it after work...

    Which is the best way to solve css problems? Testing first on IE and then correction for other browsers? the other way around...
     
    Sulan84, Jul 7, 2009 IP
  4. drhowarddrfine

    drhowarddrfine Peon

    Messages:
    5,428
    Likes Received:
    95
    Best Answers:
    7
    Trophy Points:
    0
    #4
    Never, ever trust IE to do anything right. Always, always use any other more modern browser to initially test your markup. Then look at IE to see if/when it screws things up.

    In this case, you are probably seeing IE screwing up on margin collapse. Using your original markup, add 'border:1px solid' to the divs just to see if the problem goes away. If it does, then you are seeing an IE bug.
     
    drhowarddrfine, Jul 7, 2009 IP
  5. Sulan84

    Sulan84 Member

    Messages:
    121
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    28
    #5
    i tried it. It works. Firefox has the same result like IE (like the picture)...

    I don't understand, why IE has the bug. I would say, that FireFox has a bug. But im new in webdesign and css....
     
    Sulan84, Jul 7, 2009 IP
  6. drhowarddrfine

    drhowarddrfine Peon

    Messages:
    5,428
    Likes Received:
    95
    Best Answers:
    7
    Trophy Points:
    0
    #6
    Firefox is performing correctly. When there is a question of which is right. Always go with Firefox, or Opera, or Safari or Chrome. IE rarely does anything correctly. It's 11 years behind all other browsers in modern standards and practices and should be put to sleep.

    The problem lies in margin collapse which IE is doing incorrectly, as always. Adding the borders forces Firefox to not collapse the margins but I'm too tired to explain it all right now.
     
    drhowarddrfine, Jul 8, 2009 IP