IE6 layout issue - absolute positioning
Question
The following HTML looks as required in Firefox 2 & 3 and IE7. The Left button is on the left, the Right button is on the right, and the text in the middle is...in the middle!
However on IE6 the Left button is misaligned - it appears center-aligned.
Can anyone suggest 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 have been using the IE Developer tool to try and analyse and fix this, to no avail...)
6 answers
solution1
13 ACCPTED 2009-02-11 17:24:35
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.
solution2
2 2009-02-11 17:14:36
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>
solution3
2
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.
solution4
0 2010-02-09 20:54:53
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!
solution5
0 2009-02-11 17:13:00
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.
solution6
0 2009-02-12 01:26:53
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.