Why is a table td not suitable as a containing block for absolute positioning of an element when other browsers allow that CSS feature?
Absolute positioning requires a containing element. I'm taking a class on HTML5 and CSS3 from ed2go.com. A photo display using thumbnails in a table shows the full size picture with its corner in the center of the thumbnail when you hover over the thumbnail.
Snippet of code for one td
<td> <img src="pix2/flower01.png" alt="" class="small"> <img src="pix2/flower01.png" alt="" class="left"></td>
The "small" class makes the picture a thumbnail. The "left" class positions the full size picture with its corner in the center of the thumbnail when the mouse hovers over the thumbnail. This works correctly in Internet Explorer but not Firefox. The reason is that Firefox does not consider a td to be a containing element by using position:relative so the large picture corner is in the center of the viewport. Although td is not a block element it would seem that allowing absolute positioning with respect to a td would be a good default implementation.
The "problem" can be "fixed" by simply placing the two <img> inside a <p></p>.
You can see the two different implementations at http://s179350112.onlinehome.us/temp6.htm and http://s179350112.onlinehome.us/temp7.htm
Is Firefox implementing the Standard correctly? Would a default implementation as in Internet Explorer be allowed by the Standard?
Modified by cor-el
Chosen solution
Thanks for link. It turns out this bug/feature has been a complaint for years. It was first reported in 2000. https://bugzilla.mozilla.org/show_bug.cgi?id=63895 I don't know if they ever intend to "fix" it :-(
Read this answer in context 👍 0All Replies (9)
The code snipped did not show up. Here it is with incorrect syntax so you can see it. <td> <imgage src="pix2/flower01.png" alt="" class="small"> <imgage src="pix2/flower01.png" alt="" class="left"></td>
The solution is to place the pictures inside a paragraph element.
Sorry for the confusion, I didn't know what would/wouldn't show up in the text.
Modified by CalBear
Seems to be working fine here in Firefox 22 with all large images showing with their left or right top attached to the center.
How does this display for you if that is different?
Start Firefox in Safe Mode to check if one of the extensions (Firefox/Tools > Add-ons > Extensions) or if hardware acceleration is causing the problem (switch to the DEFAULT theme: Firefox/Tools > Add-ons > Firefox uses the about: protocol to access built-in about: pages that you can open via the location bar just like you open web pages.
- http://kb.mozillazine.org/About_protocol_links).
- Do NOT click the Reset button on the Safe Mode start window or otherwise make changes.
Thank you for the suggestions. Please double check that you have reviewed the page
http://s179350112.onlinehome.us/temp7.htm
That page has the problem on 4 different computers running Firefox version 21 and 22 as well as three portable versions with no extensions installed, versions 17, 20 and 23beta. The instructor for the course has the same problem with Firefox. This is unlikely to be the setup/add-ins on all of these computers.
The problem is that Firefox will not consider a td as the containing block for contained item with a position:absolute css value. This appears to be a decision made in the Gecko Engine. Internet Explorer, Safari and Chrome do not make the same decision regarding td as a containing block and both pages produce the same results.
Pictures of the correct (temp6.htm) and incorrect (temp7.htm) results are attached to this posting.
Modified by CalBear
Sorry, I'm not seeing an issue either. Firefox 4.0.1, Firefox 16.0.2, Firefox 21.0, and Firefox 22.0 (on WinXP) - all the larger images appear below and to the right or left of center of each smaller image.
Does your rendering of temp7.htm look the same as in the picture?
The larger image is supposed to have its corner in the center of the related thumbnail as shown in temp6.htm Any other position for the large image is incorrect as shown in the image with the large picture well below the thumbnails. Other browsers do not show the large picture in the incorrect position.
It looks like this image.
https://support.cdn.mozilla.net/media/uploads/images/2013-07-04-08-20-14-35e339.png
Have you reloaded that page by-passing the Cache?
{Ctrl + F5}
Yes that is the incorrect large picture location produced in Firefox for page temp7.htm. The intent of the code is to place the corner of the large image in the center of the corresponding thumbnail. The td where the thumbnail is located is position:relative and the large picture is position:absolute and its corner should appear in the center of the thumbnail.
As shown below the large picture is in the correct location, all other browsers show it in the correct location, Firefox, for temp7.htm, does not. Ctrl + F5 makes no change.
Modified by CalBear
Yes, I see the same on the temp7 page.
Maybe someone at the MozillaZine "Web Development/Standards Evangelism" forum knows more about this.
The helpers at that forum are more knowledgeable about web development issues.
You need to register at the MozillaZine forum site in order to post at that forum.
Chosen Solution
Thanks for link. It turns out this bug/feature has been a complaint for years. It was first reported in 2000. https://bugzilla.mozilla.org/show_bug.cgi?id=63895 I don't know if they ever intend to "fix" it :-(