Radio buttons won't group in CSS tooltip

[SamF]

Hi all,

I've implemented the CSS options for my site in a standard "floating" CSS tooltip, where the CSS code is:


a.options {
position: relative;
}

a.options span {
display: none;
}

a.options:hover span {
display: block;
position: absolute;
z-index: 100;
}

When I try to put radio buttons in the tooltip, all the associated JavaScript works fine, but the buttons won't select and deselect as normal: rather, the first option selected will select, and nothing else in the group will show itself as selected after that. When I put them outside the tooltip, they work fine.

Can anyone work out what's going on?


<a href="#" onclick="return false;" class="options">Options<span>
<p>
Text size: <input name="textSize" type=radio onclick="ChangeFontSize('standard');"> Standard<input name="textSize" type=radio onclick="ChangeFontSize('largetext');"> Large
</p>
<p>
Contrast: <input name="contrast" type=radio onclick="ChangeContrast('standard');"> Standard<input name="contrast" type=radio onclick="ChangeContrast('highcontrast');"> High
</p>
</span></a>


Any help would be greatly apprectiated!
Thanks,
Sam

[SamF]

I've put my page up, and it can be found at http://www.concord.org/~sfentress/Clouds2.html. You can see the Options panel and the non-functioning radio buttons at the top right.

Again, any help will be greatly appreciated.
Sam

[zak]

Hi Sam.

The problem is that you're wrapping everything inside an anchor tag which I guess screws up the rendering of radio button states. I tried recreating what you had using <span class="options"> instead of an <a>, and it worked fine in non-IE browsers.

In IE6 it didnt show the menu because the :hover pseudo-class is only supported on <a> tags. In IE7 the menu was displayed on hover but as soon as the pointer left the options span it disappeared.

I'm not sure how to fix that, but what you're doing is very similar to dropdown menus, which are explained beautifully in the Suckerfish Dropdown (http://www.alistapart.com/articles/dropdowns/) article at ALA. Maybe you can apply that to what you need here.

[SamF]

Thanks you! That link was very useful.

Sam