I have a number of spry tooltips in the bottom right of this page http://www.ituna.ca . The problem is that when the browser window is resized to asmaller size there is not enough room for the tooltip image and the result is a shaking image. How can I get around this? Perhaps putting the image to the left of the tip might work but I can't figure out how to accomplish this.I have tried a number of changes to the CSS but nothing seesm to work. Can anyone help me with this?
Here is the CSS:
@charset "UTF-8";
/* SpryTooltip.css - version 0.2 - Spry Pre-Release 1.6.1 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
/* HACK FOR IE: to make sure the tooltips show above form controls, we underlay each tooltip with an iframe */
.iframeTooltip
{
position: relative;
z-index: auto;
filter:alpha(opacity:0.1);
font-style: italic;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #060;
border-right-color: #060;
border-bottom-color: #060;
border-left-color: #060;
font-family: Arial, Helvetica, sans-serif;
font-size: small;
font-weight: bold;
color: #660;
background-color: #FFF;
text-align: left;
float: left;
}
.tooltipContent
{
background-color: #FFF;
font-size: small;
font-style: italic;
font-weight: bold;
color: #660;
text-align: right;
height: auto;
width: inherit;
}
