Absolute positioned anchor problem in IE6

**Rally** · Sep 4, 2007 11:30

Hi!

I want to position an anchor in the lower right corner of a container div. It looks nice in FF2.0.0.6/Win and IE7/Win. But in IE6SP2/Win the link is not positioned correctly (it is not visible at all).

I'm still developing locally so I can't give you an URL but here is a test which repeats the problem partially. The link is visible but has a strange offset. Please see attached images.

Any suggestions?

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>Test</title>

<style type="text/css">
body {
position : relative;
width : 600px;
margin-left : auto;
margin-right : auto;
margin-top : 50px;
border : 1px solid rgb(100,100,100);
padding : 20px;
}

   #msg {
position : relative;
border : 1px solid rgb(100,100,100);
background : rgb(240,240,240);
margin-top : 10px;
margin-left : auto;
margin-right : auto;
padding : 5px;
   }

   #msg p {
padding : 5px 20px 20px 20px;
   }

   #msg a {
position : absolute;
right : 5px;
bottom : 5px;
   }
</style>

</head>

<body>

<div id="msg">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque vitae eros vel libero sollicitudin accumsan. Nam ornare, pede in faucibus pulvinar, est sem ornare ante, ac fermentum magna dui non dui. Aliquam erat volutpat. In hac habitasse platea dictumst. Aliquam interdum, purus at elementum semper, odio mi ultricies augue, ac ullamcorper risus lacus at tortor.</p>
<a href="#">Link</a>
</div>

</body>

</html>

**all4nerds** · Sep 4, 2007 12:16

Hello

Strange code ? is a simple display block, text align right not better

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>Test</title>

<style type="text/css">
*{padding:0;margin:0;}

body {
width : 600px;
margin-left : auto;
margin-right : auto;
margin-top : 50px;
border : 1px solid rgb(100,100,100);
padding : 20px;
}

   #msg {
border : 1px solid rgb(100,100,100);
background : rgb(240,240,240);
margin-top : 10px;
margin-left : auto;
margin-right : auto;
padding : 5px;
   }

   #msg p {
padding : 5px 20px 20px 20px;
   }

   #msg a {
display:block;
text-align:right;
   }
</style>

</head>

<body>

<div id="msg">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque vitae eros vel libero sollicitudin accumsan. Nam ornare, pede in faucibus pulvinar, est sem ornare ante, ac fermentum magna dui non dui. Aliquam erat volutpat. In hac habitasse platea dictumst. Aliquam interdum, purus at elementum semper, odio mi ultricies augue, ac ullamcorper risus lacus at tortor.</p>
<a href="#">Link</a>
</div>

</body>

</html>

**Paul O'B** · Sep 4, 2007 12:43

Hi,

The parent element needs "haslayout" (see faq) otherwise ie6 doesn't know where its boundaries lie and will incorrectly position the absolute element

This code will apply haslayout and the element will be correctly positioned.

Code:

/* mac hide \*/
* html #msg {height:1&#37;}
/* end hide */

However All4nerds answer is the sensible way to do this unless you have a specific need for it to be placed at the bottom of an element that isn't only content height.

**Rally** · Sep 6, 2007 12:16

Thanks, the block display and text-align works just fine in this case.

User Tag List

Thread: Absolute positioned anchor problem in IE6

Thread Tools

Display

Absolute positioned anchor problem in IE6

Bookmarks

Bookmarks

Posting Permissions