Can't position anchor tags using relative or absolute in IE7 & IE6

HTML & CSS
1

I am working on a grid-based design for a client. I have three modules that are each equal in width and height. Each module contains text. Some modules have more lines of text than another. What I need to do is position an anchor tag in the lower left corner of each module. I found that the positioning of the anchor tag is affected by the number of lines of text. For example, an anchor tag will appear lower in a module with 5 lines of text, while an anchor tag will appear slightly higher in a module with only 4 lines of text. To fix this, I created a class called bottomLeft and applied it to the anchor. The CSS for the class looks like this:

a.bottomLeft {position: absolute; top: 65px;}

. The HTML for the anchor tag then looks like this:

<a class="bottomLeft">Link</a>

. This fixed the alignment issue in FF3, but not in IE7 and IE6. In IE7 and IE6, all the anchor tags are misaligned. How do I fix this in IE7 and IE6 so all the anchor tags are aligned consistently no matter how many lines of text may be in the module? I tried using

position: relative;

and

position: absolute;

but neither worked. Any suggestions?

2

Hi, your prob better off saying bottom 0 instead of top. But that is prob not your problem. Try giving it a left 0 value as well…

And of course make sure each outer container (or module?) has the position relative.

3

Hi,

IE6 and 7 will place an element exactly the same as other browsers assuming that the parent is in haslayout mode and that the parent is position:relative and the child is absolute.

e.g.


<!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=utf-8">
<title>Untitled Document</title>
<style type="text/css">
.parent {
    width:500px;
    height:500px;
    position:relative;
    border:1px solid #000;
}
.bottomLeft {
    position: absolute;
    top: 450px;
    left:0;
    margin:0;
}
</style>
</head>
<body>
<div class="parent">
    <p class="bottomLeft"><a href="#">Test</a></p>
</div>
</body>
</html>

Note that ie6 and 7 are actually 1px out when you use bottom or right and the distance covered is an odd number of pixels and is cause by its bad rounding algorithms.