Grow your CSS skills. Land your dream job.

IE6 content positioning problem?

  • Mmm
    # November 19, 2008 at 6:32 am

    Hey guys, long time reader first time poster :)

    I’ve just finished updating a site (created by someone else) and it works very nicely in Safari/Firefox etc, but in IE on some pages the content appears in the wrong place.

    [img]http://img512.imageshack.us/img512/5328/errorro1.th.jpg[/img][img]http://img512.imageshack.us/images/thpix.gif[/img]

    Here is my code:

    Code:
    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">




    Pick a fight with inspiration
    In order to make money for you and make your brand even more famous, we live by six golden rules. After all, it’s a battlefield out there and we want to be victorious.

    learn to fight
    No matter how successful your business, one can never learn too much about how to compete.

    Show the way
    Always work co-operatively but take responsibility for all your actions and outcomes.

    Know the facts
    Always listen. Consider everything before taking action and use all knowledge wisely.

    Do it better
    Never stop looking for new ideas and create the opportunity to win. Different is good.

    Seize the day
    The most important success factor in any competition is speed. Simple methods are effective and inexpensive.

    Keep them guessing
    Always be one step ahead of your opponents. Combine expected and unexpected tactics.


    Here is the CSS document

    Code:
    body { text-align: center; }
    div#container { background-color: #fff; width: 740px; height: 500px; margin: 20px auto 0 auto; text-align: left; }
    /* macie5 hack */
    div#container { margin: -330px 0 0 -370px; position: absolute; top: 50%; left: 50%; }
    /* end of hack */
    div#nav { width: 110px; float: left; padding: 35px 0 0 0; }
    div#nav ul { font-size: .7em; font-weight: bold; text-align: center; margin: 0; padding: 0; }
    div#nav ul li { list-style-type: none; margin: 0 0 15px 0; }
    div#nav a { text-decoration: none; }
    img#bar { float: left; margin: 20px 0 0 0; }
    div#stage {
    width: 605px;
    height: 600px;
    float: left;
    margin-top: 10px;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 0;
    }
    div#logo { text-align: right; height: 30px; }
    p.footer { display: none; clear: left; text-align: center; font-family: helvetica, arial, sans-serif; font-size: .7em; line-height: 1.5em; margin: 0; padding: 5px 0 .7em 0; color: #666; }
    #workarea p {
    margin: 0 0 5px;
    }

    /* homepage */

    img#tower { margin-left: 85px; height: 480px; }
    div#tower44 {
    margin-left: 60px;
    height: 480px;
    margin-top: 20px;
    }

    /* us */

    div#founders p { font-size: .7em; line-height: 1.2em; margin: 0 0 1.2em 0; color: #666; text-align: left; }

    /* experience */

    div#experience { margin: 5px 0 0 30px; }
    table#brands { font-size: .7em; }
    table#brands th { text-align: right; padding: 0 10px 6px 0; border-right: 1px solid #999; vertical-align: top; color: #6eaabf; }
    table#brands td { text-align: left; padding: 0 0 6px 10px; vertical-align: top; color:#666; }

    /* contact us */

    div#contact {
    width: 250px;
    margin-top: 30px;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 40px;
    }
    div#contact a { text-decoration: none; }
    div#contact p { font-size: .8em; line-height: 1.2em; margin: 0; }
    div#wrapcontact {
    width: 250px;
    height: 55px;
    }
    div.conwrap { width: 250px; margin: 0 0 8px 0; padding: 0px; float: left; font-size: .8em; line-height: 1.5em; margin: 0; color: #666; }
    div.conleft { width: 50px; margin: 0px; padding: 0px; float: left; color: #6eaabf; font-weight: bold; }
    div.conright { width: 200px; margin: 0px; padding: 0px; float: left; }

    /* philosophy */

    div#philosophy { width: 270px; margin: 20px 0 0 45px; }
    div#philosophy p { font-size: .7em; line-height: 1.2em; margin: 0 0 1.2em 0; color: #666; text-align: left; }

    /* what we do */

    div#sound { display: inline; }
    div#whatwedo { width: 570px; height: 280px; margin: 10px 0 0 30px; }
    div#whatwedo h2 { margin: 1.5em 0 .5em 0; font-size: .75em; }
    div#whatwedo p { font-size: .9em; line-height: 1.5em; margin: 0; }
    div#whatwedo ul { font-size: .75em; color: #666; margin: 0; width: 450px; padding: 0; }
    div#whatwedo ul li { display: inline; margin-right: 5px; }
    div#whatwedo ul li.alt { color: #333; }
    img#whaimg { float: right; margin-top: -145px; }

    /* work */

    div#workarea { height: 440px; margin: 0; }
    div#worknav { height: 50px; text-align: center; }
    div#workarea a { text-decoration: none; font-weight: bold; font-size: 1.1em; }
    div#workarea p { font-size: .7em; line-height: 1.2em; text-align: left; }
    div#workarea h1 { font-size: .7em; line-height: 1.2em; color: #6eaabf; font-weight: bold; }

    div#workarearight { height: 440px; margin: 0; }
    div#workarearight a { text-decoration: none; }
    div#workarearight p { font-size: .7em; line-height: 1.2em; text-align: right; }
    div#workarearight h1 { font-size: .7em; line-height: 1.2em; text-align: right; color: #6eaabf; font-weight: bold; }

    table#work { font-size: .7em; vertical-align: top; }
    table#work td { text-align: center; padding: 0px; vertical-align: top; color: #6eaabf; }
    table#awards { font-size: .7em; width: 560px; }
    table#awards th { font-size: 1.8em; text-align: left; padding: 0 20px 2px 0; vertical-align: bottom; color: #6eaabf; }
    table#awards td { text-align: left; padding: 0 0 2px 0; vertical-align: top; color:#666; }
    div#awardsworkarea { height: 570px; margin: 0; }
    div#awards { margin: 5px 0 0 30px; }
    span.awardyear {color: #6eaabf; font-weight: bold; vertical-align: text-bottom; height: 50px; }
    h2.awardyear {color: #6eaabf; font-size: 1em; font-weight: bold; height: 10px; margin-top: 8px; }

    /* clients */

    div#sageone{ width: 165px; height: 420px; margin: 0; background-image: url(../images/work/sage1.jpg); background-repeat: no-repeat; padding: 30px 0 0 440px; }
    div#sagetwo{ width: 240px; height: 125px; margin: 0; background-image: url(../images/work/sage2.jpg); background-repeat: no-repeat; padding: 315px 0 0 365px; }
    div#sagethree{ width: 351px; height: 110px; margin: 0; background-image: url(../images/work/sage3.jpg); background-repeat: no-repeat; padding: 330px 126px 0 128px; }
    div#sagefour{ width: 283px; height: 182px; margin: 0; background-image: url(../images/work/sage4.jpg); background-repeat: no-repeat; padding: 258px 0 0 322px; }
    div#sagefive{ width: 170px; height: 120px; margin: 0; background-image: url(../images/work/sage5.jpg); background-repeat: no-repeat; padding: 320px 0 0 435px; }

    div#betone{ width: 260px; height: 143px; margin: 0; background-image: url(../images/work/bet1.jpg); background-repeat: no-repeat; padding: 287px 70px 0 315px; }
    div#bettwo{ width: 265px; height: 82px; margin: 0; background-image: url(../images/work/bet2.jpg); background-repeat: no-repeat; padding: 358px 0 0 340px; }
    div#betthree{ width: 265px; height: 93px; margin: 0; background-image: url(../images/work/bet3.jpg); background-repeat: no-repeat; padding: 337px 0 0 340px; }
    div#betfour{ width: 240px; height: 415px; margin: 0; background-image: url(../images/work/bet4.jpg); background-repeat: no-repeat; padding: 25px 0 0 365px; }
    div#betfive{ width: 130px; height: 248px; margin: 0; background-image: url(../images/work/bet5.jpg); background-repeat: no-repeat; padding: 192px 0 0 475px; }
    div#betsix{ width: 456px; height: 118px; margin: 0; background-image: url(../images/work/bet6.jpg); background-repeat: no-repeat; padding: 322px 74px 0 76px; }

    div#makroone{ width: 125px; height: 95px; margin: 0; background-image: url(../images/work/makro1.jpg); background-repeat: no-repeat; padding: 345px 50px 0 430px; }
    div#makrotwo{ width: 540px; height: 60px; margin: 0; background-image: url(../images/work/makro2.jpg); background-repeat: no-repeat; padding: 380px 0 0 65px; }

    div#tomsone{ width: 555px; height: 105px; margin: 0; background-image: url(../images/work/toms1.jpg); background-repeat: no-repeat; padding: 335px 0 0 55px; }
    div#tomstwo{ width: 255px; height: 145px; margin: 0; background-image: url(../images/work/toms2.jpg); background-repeat: no-repeat; padding: 295px 0 0 350px; }
    div#tomsthree{ width: 240px; height: 143px; margin: 0; background-image: url(../images/work/toms3.jpg); background-repeat: no-repeat; padding: 297px 0 0 365px; }
    div#tomsfour{ width: 219px; height: 427px; margin: 0; background-image: url(../images/work/toms4.jpg); background-repeat: no-repeat; padding: 18px 0 0 386px; }
    div#tomsfive{ width: 274px; height: 117px; margin: 0; background-image: url(../images/work/toms5.jpg); background-repeat: no-repeat; padding: 323px 300px 0 30px; }
    div#tomssix{ width: 169px; height: 212px; margin: 0; background-image: url(../images/work/toms6.jpg); background-repeat: no-repeat; padding: 229px 0 0 436px; }
    div#tomsseven{ width: 255px; height: 140px; margin: 0; background-image: url(../images/work/toms7.jpg); background-repeat: no-repeat; padding: 300px 0 0 350px; }
    div#tomseight{ width: 279px; height: 96px; margin: 0; background-image: url(../images/work/toms8.jpg); background-repeat: no-repeat; padding: 343px 0 0 254px; }
    div#tomsnine{ width: 265px; height: 134px; margin: 0; background-image: url(../images/work/toms9.jpg); background-repeat: no-repeat; padding: 306px 0 0 340px; }
    div#tomsten{ width: 160px; height: 427px; margin: 0; background-image: url(../images/work/toms10.jpg); background-repeat: no-repeat; padding: 13px 0 0 383px; }

    div#hyone{ width: 216px; height: 79px; margin: 0; background-image: url(../images/work/hy1.jpg); background-repeat: no-repeat; padding: 341px 20px 20px 355px; }
    div#hytwo{ width: 196px; height: 147px; margin: 0; background-image: url(../images/work/hy2.jpg); background-repeat: no-repeat; padding: 293px 20px 0 380px; }
    div#hythree{ width: 255px; height: 410px; margin: 0; background-image: url(../images/work/hy3.jpg); background-repeat: no-repeat; padding: 30px 0 0 350px; }

    div#sunderlandone{ width: 137px; height: 118px; margin: 0; background-image: url(../images/work/sunderland1.jpg); background-repeat: no-repeat; padding: 297px 0 0 429px; }

    div#scienceone{ width: 300px; height: 70px; margin: 0; background-image: url(../images/work/science1.jpg); background-repeat: no-repeat; padding: 370px 272px 0 33px; }

    div#dunelmone{ width: 214px; height: 81px; margin: 0; background-image: url(../images/work/dunelm1.jpg); background-repeat: no-repeat; padding: 360px 34px 0 339px; }
    div#dunelmtwo{ width: 256px; height: 124px; margin: 0; background-image: url(../images/work/dunelm2.jpg); background-repeat: no-repeat; padding: 316px 28px 0 321px; }
    div#dunelmthree{ width: 155px; height: 37px; margin: 0; background-image: url(../images/work/dunelm3.jpg); background-repeat: no-repeat; padding: 340px 83px 63px 367px; }

    div#nbsone{ width: 156px; height: 150px; margin: 0; background-image: url(../images/work/nbs1.jpg); background-repeat: no-repeat; padding: 305px 0 0 459px; }
    div#nbstwo{ width: 220px; height: 96px; margin: 0; background-image: url(../images/work/nbs2.jpg); background-repeat: no-repeat; padding: 348px 0 0 385px; }

    div#warmsealone{ width: 222px; height: 78px; margin: 0; background-image: url(../images/work/warmseal1.jpg); background-repeat: no-repeat; padding: 336px 0 0 351px; }

    div#newcastlecityone{ width: 354px; height: 164px; margin: 0; background-image: url(../images/work/newcastle1.jpg); background-repeat: no-repeat; padding: 276px 0 0 252px; }
    div#newcastlecitytwo{ width: 287px; height: 80px; margin: 0; background-image: url(../images/work/newcastle2.jpg); background-repeat: no-repeat; padding: 355px 0 0 319px; }

    p strong {
    display: block;
    margin: 0 0 -5px;
    }
    div#tower {
    margin-left: 120px;
    height: 480px;
    margin-top: 40px;
    }
    arcademain {
    margin-left: 25px;
    height: 480px;
    float: right;
    }

    Any help would be great as I think its driving me mad! :) Many thanks!

    # November 19, 2008 at 12:00 pm

    I see no problem with it with the code you gave me on IE 6 &7 so that may mean it’s one of the images that alter the dimensions of the divs that make it drop down.

    If you upload a live one I’ll be glad to check it out agian

    Mmm
    # November 19, 2008 at 12:04 pm

    Ah cool, so one of the images is too wide for the DIV?

    Thats great news! Many thanks! :)

    # November 19, 2008 at 12:49 pm

    lol I’m not exactly sure but from what I’ve seen (since I didn’t have the images and it worked) that should be the problem.

    Test it out and see

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

You must be logged in to reply to this topic.

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