Forums

Give help. Get help.

  • # November 19, 2008 at 11:21 am

    Hi,
    I’m fairly new to css (and this forum, hi!) and I’ve been struggling recently with a quirk in IE(7).

    It involves floats (and yeah I’m trying to avoid them as much as I can, until IE shapes up and does it right). In the layout I’m using a bunch of position:relative & z-index to make a layered footer, with transparent png’s. I would’ve made it into one image, but I’m aiming for a fluid, 100%, centered layout.

    So far so good right?
    The problem arose when I looked at the layout in IE. Apparently that browser doesn’t like 2 floats with 50% widths inside a 100% div. I have to make one 49% and the other 50%. So, in an all MS IE world the math goes 49+50=99 and 50+50=101 ??
    F.Y.I. I’ve zeroed out all margins and paddings, as you can see.

    My question is, is this related to a float-bug, or a %-bug? Or a combination of them both? Or maybe I’ve missed some basic stuff about IE? (i.e. -Have you turned the computer on? :) )

    Any and all light on this subject would be killer.

    Here’s screenshot of that footer in Safari:
    [img]http://ta-det-lugnt.se/data/49.percent.floats.inside.100.png[/img]
    And here’s the basic code:

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





    # November 19, 2008 at 12:47 pm

    No idea how and why it happens but if you use absolute positioning left and right 0 along with the floats it will work :)

    http://johnsbeharry.com/lab/code/2-50-p … lumns.html
    I made this little one for you ;)

    # November 19, 2008 at 2:56 pm

    Ah mighty fine point no floats needed :|
    :oops: …

    # November 20, 2008 at 5:58 am

    Thanks guys. Absolute it is.
    Another reason to leave floats alone a few years.

    For future reference, the new code is:

    Code:
    * { margin:0; padding:0; border:0; }
    #footer {
    height:347px;
    position:relative;
    z-index:1;
    width:100%;
    background:url(‘footer.jpg’) bottom left repeat-x;
    overflow:hidden;
    }
    .leftcolumn, .rightcolumn {
    padding-top:242px;
    position:absolute;
    bottom:0px;
    z-index:1000;
    height:105px;
    width:50%;
    }
    .leftcolumn {
    background:url(‘footer-bl.jpg’) bottom left no-repeat;
    left:0px;
    }
    .rightcolumn {
    background:url(‘footer-br.jpg’) bottom right no-repeat;
    right:0px;
    }
    # November 20, 2008 at 8:19 am

    ^^ Ye floats can sometimes be hard to manipulate but as long you practice you should get accustomed to what to and not do :)

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

You must be logged in to reply to this topic.

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