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?