ansaurus

Question

Answer 1

A:

Your floated/positioned elements should be first in order before normally aligned text. Don't position them in the order they appear.

Also you might want to add an !important to increase precedence and use Microsoft's IE Developer toolbar to see which rules are taking effect. What's the width of the parent element?

It does look like it should just work though.

apphacker 2009-02-11 17:13:00

Thanks, but this doesn't seem to change things. Also this would mess things up for users using a screen reader.

Richard Ev 2009-02-11 17:15:58

Answer 2

+2 A:

Try this (forgive the inline style!)

<div id="Footer">
    <div style="width:100%">
    <input class="left" type="button" value="Left" />
    Some text in the middle
    <input class="right" type="button" value="Right" />
    </div>
  </div>

AJM 2009-02-11 17:14:36

Pretty excellent - thanks AJM!However, in IE6 there's now a 20px gap between the left of the Left button and the edge of the Footer...

Richard Ev 2009-02-11 17:18:14

Answer 3

+7 A:

You must trigger the hasLayout property (an IE thing…) of #footer. Width and height trigger it, if you don't want to set a width or height, you can use the IE-only zoom property in CSS.

<!DOCTYPE html>
<html>
<head>
    <title>Layout problem!</title>
    <style type="text/css">
        div#footer
        {
            padding: 10px;
            color: #fff;
            background-color: #484848;
            position: relative;
            text-align: center;
            zoom: 1;
        }
        div#footer input
        {
            margin: 5px 15px;
            position: absolute;
            top: 0;
        }
        div#footer input.right
        {
            right: 0;
        }
        div#footer input.left
        {
            left: 0;
        }
    </style>
</head>
<body>
    <div id="footer">
        <input class="left" type="button" value="Left">
        Some text in the middle
        <input class="right" type="button" value="Right">
    </div>
</body>
</html>

IIRC, in IE, elements have two different layout behaviors, one if hasLayout is true, and another if it's false. Making sure that it's set to true can fix a lot of weird layout issues like this one.

nlogax 2009-02-11 17:24:35

That is quite peverse! Thanks Jonas.That works almost perfectly - it seems to push the width of my containing div out by a couple of pixels in IE6.

Richard Ev 2009-02-11 17:36:05

Setting zoom will change the cursor. Might want to limit this to IE6 only by prepending a _ to the rule.

apphacker 2009-02-11 17:49:56

I don't see any cursor change problems Bjorn

Richard Ev 2009-02-12 10:36:25

Answer 4

A:

I'm going to suggest a bit of a chance to your approach and see if you have any luck with this:

<style type="text/css">
    DIV#Footer
    {
        padding: 10px;
        color: #fff;
        background-color: #484848;
        position: relative;
        text-align: center;
    }
    DIV#Footer INPUT
    {
        margin: 5px 15px;
        position: absolute;
        top: 0px;
    }
    DIV#Footer INPUT.right
    {
        float: right;
    }
    DIV#Footer INPUT.left
    {
        float: left;
    }
    #Footer .center {
        float: left;
    }

</style>

Then in the HTML

<div id="Footer">
    <input class="right" type="button" value="Right" />
    <input class="left" type="button" value="Left" />
    <div class="center">Some text in the middle</div>
</div>

You would then have to go through and give them some margins to line them up how you want them. This won't work for a fluid layout, unless you give the footer, or a container within the footer for these items a fixed width.

Matt 2009-02-12 01:26:53

That doesn't seem to work at all I'm afraid Matt...

Richard Ev 2009-02-12 10:35:39

Answer 5

+1 A:

As jonas said.

Whenever in doubt, I recommend to specify a width explicitly, even if not required, and I prefer to use that over "zoom" since zoom wasn't designed to fix the layout issue. Setting a width explicitly however is not always possible so "zoom" does the trick.

faB 2009-02-12 23:19:51

Answer 6

A:

Another option I found worked for me to deal with absolutely positioned div tags in ie6 is to add both the left and right values in the CSS.

It's simple math if you know the widths of the divs you're working with.

Seems to "staple" the div box in place.

I've tried all of the other suggestions I've read (including javascript to force ie6 to behave like it's ie7 or ie8) but they didn't work.

The solution above did.

Good luck!

Scott Young 2010-02-09 20:54:53

ansaurus

tags:

views:

answers:

IE6 layout issue - absolute positioning

related questions