Grow your CSS skills. Land your dream job.

[Solved] Absolute Positioning & IE Problems

  • # January 31, 2010 at 6:28 pm

    Hey! can anyone help me with this?

    I have a div positioned absolute within a div positioned relative, works fine in all browsers except IE (7 not tried 6 or 8 yet).

    here you can see how it looks in Firefox etc.. (Scroll to the right..!)
    [attachment=1]accgworks.jpg[/attachment]

    here you can see how IE messes it up… (scroll right again)
    [attachment=0]accgbroken.jpg[/attachment]

    ive tried allsorts, different positioning, margins, padding, widths / heights of div and or parent div, but nothing seems to be happening.

    Heres the code.

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




    • ACCG staff

    Welcome to the ACCG

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Morbi non nisl vitae nisi posuere scelerisque id ullamcorper tellus.
    Fusce felis turpis, blandit a gravida vitae, ultricies vel ante.
    Vivamus tincidunt, elit sit amet congue dictum, nisl nulla mollis orci,
    nec tempus mi magna vitae nisl. Suspendisse potenti. Suspendisse augue ante,
    fringilla sed aliquet sit amet, viverra id ipsum. Sed egestas ipsum nec massa volutpat id
    tincidunt dui dignissim?



    Code:
    * { padding:0; margin:0; }
    body { font-size:10pt; background-image:url(‘../images/header_short.jpg’); background-repeat:repeat-x; background-color:#9ba978; }
    #container { width:945px; margin-left:auto; margin-right:auto; }
    #header { padding: 30px 0 0 0; }
    .logo { padding:0 0 0 55px; float:left; width:135px; }
    .title { padding:15px 0 0 0; float:left; width:752px; }

    #nav { font:10pt georgia; text-transform:uppercase; float:left; width:710px;}
    #nav ul { margin:0; padding:10px 10px 0 0; list-style-type:none; }
    #nav .selected { float:left; margin:0 1px 0 0; padding:0 0 0 10px; background-image: url(‘../images/nav_left.gif’); background-repeat: no-repeat; }
    #nav .selected a { float:left; display:block; padding:5px 10px 5px 0; text-decoration:none; color:#999999; background-image: url(‘../images/nav_right2.gif’);
    background-repeat: no-repeat; background-position: right top; color:#4c722b;}
    #nav li { float:left; margin:0 1px 0 0; padding:0 0 0 10px; }
    #nav a { float:left; display:block; padding:5px 10px 5px 0; text-decoration:none; color:#FFFFFF; }
    #nav a:hover { color:#BBBBBB; }

    #mask { width:100%; position:relative; }
    #page { overflow:auto; top:-4px; position:relative; width:945px; background-color:#FFF; padding:10px 10px 10px 10px; -moz-border-radius: 5px; -webkit-border-radius: 5px;}

    #content-area { width:710px; color:#000000; float:left; }
    #grey-block { background-color:#FAFAFA; width:660px; height:245px; padding:0 5px 5 5px; }
    #sidebar { font:8pt verdana; width:200px; background-color:#FAFAFA; position:absolute; right:0px; top:-0px; color:#000000;border: 1px solid #EAEAEA; padding:10px; border-bottom:2px solid #CCCCCC; }
    #footer { padding:10px; position:absolute; bottom:10px; text-align:center;}

    .info { padding:5px 0 5px 0; font:8pt verdana; }
    .info2 { top:-20px; position:relative; padding:0 0 5px 0; font:8pt verdana; }
    .rolls { left:3px; position:relative; top:5px; }
    .map-link a { position:relative; left:110px; top:-60px; text-align:center; text-decoration:none; color:#84211d; line-height:12pt; }
    .map-link a:hover { text-decoration:underline; }
    .seperate { padding-bottom:15px; }
    .email { padding-top:10px; }
    .welcome-image { padding:10px 0 10px 10px;}
    .main-text { padding:0 10px 0 10px;}

    div#rotator { position:relative; height:125px; padding-top:10px;}
    div#rotator ul li { left:0px;float:left;position:absolute;list-style: none; padding-left:10px;}
    div#rotator ul li img { border:0px;padding:0px; }
    div#rotator ul li.show { z-index:500; }

    cheers
    mark

    Rob
    # January 31, 2010 at 6:53 pm

    hey mark – do you have it uploaded anywhere yet? :) Just easier for me to poke at it… lol

    # February 1, 2010 at 5:58 am

    Hi, i just uploaded it here so you can have a look

    http://www.quarterlightdesign.com/accg/

    thanks!

    Rob
    # February 1, 2010 at 6:38 am

    Hey – so IE is rendering your Sidebar inside your Page element – which has a position of relative. So that means that in IE it is getting its position of 170px from the top of the div#page. Every other browser renders it after the page div… so it gets its position from the mask element.

    Now if I was a betting man – without looking further I would say something is up with the mask element, and IE… I would just double check you have closed all your divs and other block elements ULs LI’s you know…

    mm scratch that: when I refreshed it was back inside the mask and not page… I would say though there is something with the mask… going to poke it some more

    # February 1, 2010 at 7:23 am

    Thanks for taking the time to look through it, appreciated!

    my feelings were it was something to do with the positioning of mask, im gonna keep digging!

    mark

    # February 1, 2010 at 9:36 am

    If you set the #sidebar top to -30px it moves it up, you might just need an IE7 conditional comment. If you are worried about IE6 it disappears off the page completely and you will need a pngfix for the header.

    # February 1, 2010 at 2:02 pm

    hey virtual,
    ill try the -30, i tried -170 and some others before, but ill give that a go.
    yeah im gonna do the pngfix,

    cheers
    mark

    Rob
    # February 1, 2010 at 2:11 pm

    try giving your #header a height of 170px and takeing away the top:170px from the #sidebar

    # February 1, 2010 at 2:28 pm

    hmmm no joy setting the top:-30px or even -3000px even :?

    finally tested it in IE 8 and it works fine, 6 destroys it which i expected anyway

    mark

    # February 1, 2010 at 2:33 pm

    rob,
    tried that, no luck im afraid.
    i have the top on #sidebar set to 0 but it is ignoring the top rule completely :?

    mark

    Rob
    # February 1, 2010 at 3:18 pm

    You sure? coz as soon as I give the #header a height of 170px, and then the #sidebar a top of 0px – it works, there about…

    # February 4, 2010 at 7:28 am

    yeah that made the firefox, safari etc.. version look the same as the IE version, even in my IE stylesheet it didnt make any difference :?

    anyway, i fixed it now :D

    i removed the mask and made the #container relative and positioned the #sidebar absolute to that.

    cheers for the help rob!

    mark

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

You must be logged in to reply to this topic.

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