I am moving my CSS flyout menu, which was overly complex, to Suckerfish.
Links within the menu have an information popup giving more info about what each page contains, using
#nav a span {visibility:hidden;position:absolute;top:-120px;left:175px;
to position the info popup (and #nav a:hover span {visibility:visible; to make it visible, this gave the positioning I wanted for the info balloon: the foot of the popup being aligned with the menu item.

However, in Suckerfish (in everything except IE6, bless its heart), the popup positions itself in relation to the containing ul, and so remains in the same position, near the top of the menu, as you can see here:
http://www.internetevangelismday.com...fishpopup1.php

The popup is designed like a split clamshell, with a top and bottom graphic, so that it can expand if there is more text in it, or people are using a large font size.

If I change the CSS using WebDeveloperToolbar to position:relative; the popup DOES position correctly, but then each second-level menu link loses the background image balloontop.png, and the menu link height increases a huge amount, because the image balloontop.png is I presume being forced invisibly into the menu link area (it certainly shows up under 'outline relative elements' on the toolbar.

Anyone have ideas on making 'position: relative' work in this situation?

Grateful thanks

Tony

Put the position:relative on the <a>page #</a> and the balloon will follow the link as you want it to.

For IE6 - first, it does not support the hover pseudoclass on anything but the <a>, and second, it has issues with nested positioning.
www.positioniseverything.net

Thanks LadynRed!

Works beautifully.

Mega thanks


Tony

You're welcome

Thanks again! Might I just ask - would you know anything about this too:

Up to now I have subsituted my PNGs with gifs, for IE6 in my menu. However elsewhere I have been able to use the extra code that forces IE6 to treat png transparency properly. But is it possible to position a graphic so treated, and allow it to keep its proper size. Look at this background image here:
www.internetevangelismday.com/testIE6.html

It is artificially stretched to the height of the red outline div, whereas the graphic's actual height is much less.

I'd still like to apply normal background properties to it, something like

background:url(http://www.internetevangelismday.com/images/balloon.png) no-repeat transparent top left;

so that it would appear in normal size, at the position I need it.

Many thanks!

Tony

PS I found that changing sizingMethod to 'fixed' fixes the
graphic at correct size, but I can't get it to behave as a normal background, or position it as one. In the above example, the div has a height of 350px and a red border all round, but the graphic is seemingly preventing the border appearing

PPS, I see that I can't apply that to backgrounds and positioning:
http://24ways.org/2007/supersleight-...ent-png-in-ie6

but am trying to use
http://homepage.ntlworld.com/bobosola/

thanks again

Tony