Forums

Give help. Get help.

  • # 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">



    African Caribbean Care Group For The Elderly


    • 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

    # 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!

    # 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 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

    # 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

    # 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 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag