Grow your CSS skills. Land your dream job.

margin top issues in browsers

  • # September 25, 2012 at 9:35 am

    Hi All,
    Im having this issue with margin-top eating away my time. i have the sample layout test page as below


    #container {
    margin-left: 0px;
    width: 1000px;
    height:1200px;
    }
    #rightCol {
    position: absolute;top: 30px; margin-left: 125px; margin-right:auto;width:841px; height:1100px; border-radius:15px;behavior:url(border-radius.htc);background:#CCC;z-index:1;
    }
    #outercontent {background:green;position:absolute;padding:10px;font-size:12px; align:center;width:830px;
    margin-top:5px; margin-bottom:1px;margin-left:3px; margin-right:3px;vertical-align:middle;
    overflow:auto;overflow:hidden;line-height: 150%;z-index:1;
    }
    .content5{width:290px;padding:10px;padding-left:15px;padding-right:8px;font-size:12px;float:left;
    vertical-align:top; background:#FFF; margin:0px;margin-top:5px;}
    .content6{width:470px;padding-top:10px;padding-left:15px;padding-right:8px;margin-top:5px;margin-bottom:5px;
    font-size:12px;float:right; margin-left:9px;vertical-align:top; background:#FFF;margin-right:0px;}
    .content7{width:425px;height:180px;padding-top:10px;padding-left:15px;padding-right:8px;font-size:12px;float:left;
    vertical-align:top; background:#FFF; margin-top:10px;margin-right:5px;margin-bottom:5px;margin-left:0px;clear:left;}
    .content8{width:335px;height:280px;padding:10px;padding-left:15px;padding-right:8px;margin:auto;
    font-size:12px;float:right;vertical-align:top; background:#FFF;clear:right;}
    .content9{width:310px;height:212px;padding:10px;padding-left:15px;padding-right:8px;font-size:12px;float:left;
    vertical-align:top; background:#FFF; margin:0px;margin-top:5px;}
    .content10{width:450px;padding:10px;padding-left:15px;padding-right:8px;margin-top:5px;
    font-size:12px;float:right; margin-left:9px;vertical-align:top; background:#FFF;margin-right:0px;}

    now the content8 div should come below the content 6. i added margin-top:5px to give some space between the two divs. this works differently in the browsers. it works fine in IE but firefox and chrome wants a value of -53px;
    please help.im running out of time and this issue is boggling me.

    # September 25, 2012 at 9:36 am

    @sirila Please post your code on http://codepen.io

    # September 25, 2012 at 9:37 am

    Please put your sample page on http://Codepen.io or http://jsfiddle.net.

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".