Absolute child moving out of positioned parent

I’ve been helping a guy with his Joomla website. I put together a demo slideshow (using the jQuery Cycle library) on a test page and got it working fine. I figured I was all set.

I create a parent container (a 1x1 table is all Joomla will let me use) and assigned it an id. I dropped each of the pictures from the slideshow into the only table cell. Everything lines up neatly centered each picture above the other when no script is running. When I added the JS call, the slideshow effect runs fine, but the images become absolutely positioned and are moving outside the table. This despite the fact that it runs fine on 99% of webpages including the demo I tried on this website. The td element which contains the images is showing position: relative; as it should in Firebug. However, in FF the image slips to the upper left hand corner of the content area. In IE, it moves right, it’s half off the screen but no scroll bar appears. And all the content below it moves up like it’s been removed from the table whose dimensions then collapse.

Any ideas how this is possible when the td element is the nearest positioned ancestor? I’ve even used jQuery to apply relative positioning explicitly to the table, but that doesn’t appear to change anything.

Sounds like there is some other CSS that is overriding your td {position:relative;} somehow.

Do you have a link?

I know that’s what it sounds like. :frowning: However, the Cycle library codes the declaration inline which trumps anything else, and Firebug confirms it’s the operating style. The table and the td are both right where they should be (although collapsed to the minimum possible size since the images are all absolutely positioned).

:frowning: No, I’ve had to disable the table temporarily while the effect is messed up. I can’t leave that on the homepage of a website, and the demo page I put together works perfectly. I’ve compared the XHTML but I’ve no idea what could be causing the difference. Here’s the code.


<table style="display: none;" summary="Aerial photographs of San Diego." id="slides1carousel" align="center" border="0">
     <tbody>
          <tr>
               <td>
                    <img src="/images/stories/carouselcoronadobridgehigh.jpg" alt="Aerial photograph of San Diego: Coronado Bridge" border="0" width="515" height="345">
                    <img src="/images/stories/carouselsilverstrandhigh.jpg" alt="Aerial photograph of San Diego: Silver Strand" border="0" width="514" height="345">
                    <img src="/images/stories/carouselsandiegobayhigh.jpg" alt="Aerial photograph of San Diego: San Diego Bay" border="0" width="514" height="345">
                         .
                         .
                         .
               </td>
          </tr>
     </tbody>
</table>

The jQuery code is pretty basic (photocarousel is my demo, slides1carousel is the homepage slideshow).


jQuery(document).ready(function(){
    jQuery('#photoCarousel').css('color', 'red');
    jQuery('#slides1carousel').css('display', 'none');
    // jQuery('#slides1carousel').css('position', 'relative');
    jQuery('#photoCarousel p').cycle();
    // jQuery('#slides1carousel td').cycle();
});

Any ideas how this is possible when the td element is the nearest positioned ancestor? I’ve even used jQuery to apply relative positioning explicitly to the table, but that doesn’t appear to change anything.
I believe that’s your problem right there, a table (or it’s elements) is not capable of taking on relative positioning to establish a containing block for AP children.

Most of the time everyone will nest the table in a div and then set RP on the div.

I create a parent container (a 1x1 table is all Joomla will let me use) and assigned it an id.

Joomla will not let you use a div? That’s crazy, I’d say it’s time to find another cms then.

:slight_smile: Thanks again Rayzur. I’m always grateful for the insights. Normally, I would have used divs to begin with but it’s a Joomla site and that doesn’t seem to be any kind of option. However, I managed to slip a paragraph into the table cell, delete all the pictures, reimport them into the paragraph, and modify the JS script to target that. Bass ackwards, but it’s working gorgeously now.

Thanks so much.

Wow. Learn something new everyday.

Agreed.