Geek Answers Handbook

IE6 placement problem - absolute positioning

The following HTML looks as required in Firefox 2 and 3 and IE7. The button Leftis on the left, the button Rightis on the right, and the text in the middle is in the middle!

However, on IE6 the button Leftis offset - it is centered.

Can anyone guess why?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Layout problem!</title>
    <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
        {
            right: 0px;
        }
        DIV#Footer INPUT.left
        {
            left: 0px;
        }
    </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>

(I used the IE Developer tool to try to analyze and fix this, to no avail ...)

+5
source share
6 answers

hasLayout ( IE...) #footer. , , IE- zoom 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, IE , , hasLayout - true, , false. , true, , .

+14

( !)

<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>
+2

jonas.

, , , "", . , "" .

+2

/ , . , .

Microsoft IE, , . ?

, .

0

, :

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

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>

, , . , .

0

, , , div ie6, , CSS.

, , .

, "" div .

, ( javascript, ie6 ie7 ie8), .

.

!

0

More articles:


All Articles