I am integrating jQuery Tooltip UI on my site. Everything works fine testing the tooltips in a standalone page with simple HTML-based links, but when I try to use menu buttons on my site to activate the tooltip, the positioning doesn't render correctly on most browsers.
Oddly enough IE6/IE7 render correctly, but everthing else FF3.0+, Chrome, Safari render the tooltip to the far left of the screen not underneath the button.
I am using the "bottom center" positioning statement in the JQuery parameters for the tooltip.
Example CSS for an image which is acting as a button (to display tooltip below):
Any ideas on how I can resolve this?
If I don't use float positioning for the buttons, everything works fine. But need to do this for the layout on the site!
Oddly enough IE6/IE7 render correctly, but everthing else FF3.0+, Chrome, Safari render the tooltip to the far left of the screen not underneath the button.
I am using the "bottom center" positioning statement in the JQuery parameters for the tooltip.
Example CSS for an image which is acting as a button (to display tooltip below):
CSS for button positioning:
#button {
margin-right: 5px;
margin-top: 102px;
display: inline;
float: right;
height: 26px;
margin-bottom: 0;
width: 100px;
}
Link using float image:
<a href="#"><img src="button.png" id="button" />
Any ideas on how I can resolve this?
If I don't use float positioning for the buttons, everything works fine. But need to do this for the layout on the site!
