Firefox absolute position rendering issue compared to Chrome

[lpeabody]

I have an element on my page that is absolutely positioned, and a parent element that is relatively positioned. My understanding of CSS is that the absolutely positioned element is absolutely positioned relative to the first ancestor element that has positioning (in this case the parent element which is positioned relatively). I’ve seen Chris do this numerous times. Am I correct in assuming this?

This works correctly in Chrome, but in Firefox it literally expands my element to the size of the entire page.

The elements, by the way, are an anchor tag and a table cell, which are positioned absolutely and relatively, respectively. So I have left, right, top, down set to 0 on the anchor tag so it expands to take up the entire size of the table cell.

I believe this flies in the face of the CSS standard (even 2.1), and I noticed this issue began creeping up in Firefox 2 major revisions ago, so in Firefox 8. Kind of disappointed with Firefox right now.

[vindicateme]

i’d need to see an example of what you’re doing, because i do it all the time and it works in all browsers..

[lpeabody]

Hi vindicateme. I believe this might be my problem http://www.webmasterworld.com/forum83/6391.htm

I guess Firefox just outright ignores relative positioning if assigned to any table cell element, which would definitely explain the problem I’m having. As the bottom of that thread concludes, relative positioning of a table cell element is undefined by the W3C, so Firefox isn’t breaking the rules.

[lpeabody]

Basically I have the following:

I need that anchor element’s size to expand to the width and height of its parent table cell. I guess the question becomes now, how do I do this so that it’s cross-browser compatible?

[vindicateme]

you could make the anchor display: block, but that would only work if all the table cells were of the same fixed height.

td {height:200px;}

td a {display: block; height: 100%; width: 100%;}

[ampo]

Thanks vindicateme.

[Author]

Posts