Grow your CSS skills. Land your dream job.

IE layout problem – gap between divs…

  • # May 10, 2010 at 10:54 am

    Hello, I am new here, was just wondering if anyone could help with an IE layout problem I have been unable to solve.

    In IE a large gap shows up between the topmainsection and mainsection

    here is the html for the relevant section…

    Code:

    post it note with contact details

    Welcome to Marble Design

    Marble Design’s aim is to create interesting, attractive websites that are fast and user-friendly. It also aims to provide information on web design. Fellow web designers can find articles and tutorials
    on the blog page.

    Within seconds users will have made judgements on your website and consequently your business. Some may lose interest altogether if a site doesn’t load quickly. We aim to
    make the user-experience as rewarding as possible and a positive reflection of your business’ values.

    Web Design Services

    • Uniquely coded HTML and CSS websites
    • Web Standards compliant
    • Search Engine Optimisation (SEO)
    • Programmes used Photoshop, Dreamweaver

    and here is the CSS

    Code:
    #tophomesection{
    width:960px;
    height:265px;
    margin-left:auto;
    margin-right:auto;
    position:relative;
    z-index:0;
    background-image:url(images/balls7.jpg);
    background-repeat:no-repeat;
    }

    #topmainsection{
    width:960px;
    height:138px;
    margin-left:auto;
    margin-right:auto;
    position:relative;
    margin-bottom:0;
    }

    #postit{
    float:right;
    display:block;
    position:relative;
    z-index:2;
    margin-right:-50px;
    margin-top:-60px;
    }

    #postitportfolio{
    position:absolute;
    left:1000px;
    top:350px;
    z-index:2;
    }

    #mainsection{
    width:900px;
    padding-top:20px;
    padding-right:40px;
    padding-left:20px;
    margin-left:auto;
    margin-right:auto;
    color:#3e4b54;
    background:#ffffff;
    font-family:”Helvetica”,Arial, Sans-serif;
    font-size:small;
    line-height:150%;
    position:relative;
    z-index:-1;
    }

    #mainsection img.pic{
    float:left;
    padding-right:10px;
    }

    #mainsection p.about{
    width:750px;
    height:300px;
    padding-left:10px;
    }

    #mainsection a{
    text-decoration:none;
    color:#02c500;
    }

    #mainsection a:hover{
    color:#FFD100;
    }

    #mainsection h1{
    color:#3e4b54;
    font-size:200%;
    margin-left:40px;
    }

    #mainsection p{
    width: 840px;
    margin-left:40px;
    margin-right:50px;
    }

    #mainsection h4{
    margin-left:40px;
    text-decoration:none;
    border-bottom:1px dashed #f13f19;
    width:147px;
    font-size:100%;
    }

    #mainsectiontwo {
    margin: 0 auto;
    width:960px;
    background:#ffffff;
    font-size:small;
    }

    #heading h1{
    font-size:17pt;
    color:#f13f19;
    margin-left:70px;
    margin-top:20px;
    margin-bottom:5px;
    }

    #heading h1 a{
    font-size:17pt;
    color:#f13f19;
    margin-top:20px;
    margin-bottom:5px;
    text-decoration:none;
    }

    #heading h4{
    font-size:13pt;
    color:#3e4b54;
    margin-left:90px;
    border-bottom:1px dashed #f13f19;
    width:500px;
    margin-bottom:5px;
    margin-top:15px;
    }

    sorry that site isn’t online yet and it’s all a bit messy (the code and everything really!)
    but any help or ideas would be much appreciated

    Thank you

    # May 10, 2010 at 5:03 pm

    Try changing this:

    Code:
    #postit{
    float:right;
    display:block;
    position:relative;
    z-index:2;
    margin-right:-50px;
    margin-top:-60px;
    }

    to this:

    Code:
    #postit{
    display:block;
    position:absolute;
    right: 10px;
    top: 100px;
    z-index:2;
    }

    (The right and top values will definitely need to be adjusted)

    # May 11, 2010 at 6:41 am

    Thank you, it worked!

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".