Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

Why is a table td not suitable as a containing block for absolute positioning of an element when other browsers allow that CSS feature?

  • 9 replies
  • 1 has this problem
  • 1 view
  • Last reply by CalBear

more options

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?

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 <pre><nowiki><td> <img src="pix2/flower01.png" alt="" class="small"> <img src="pix2/flower01.png" alt="" class="left"></td></nowiki></pre> 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 &lt;img&gt; inside a &lt;p&gt;&lt;/p&gt;.<br /> 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 👍 0

All Replies (9)

more options

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

more options

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.

more options

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

more options

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.

more options

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.

more options

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}

more options

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

more options

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.

more options

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 :-(