I'm using the jQuery qTip to show individual users and their votes when an average rating is mousedover.
qTip calls a PHP file which grabs all the users and votes for the item from the MySQL database and builds a 3 column table, which appears as the tooltip.
In Firefox, the tooltip displays properly.
In IE7 (haven't tested on
IE8 yet), the tooltip is the proper height, but the width is only 2 or 3 characters - not the entire table.
If I set the width of the div to a fixed number, say width: 300px; I can coax IE into displaying it properly.
However, the length of my users' names varies considerably, and I'd rather not nail down the div to its maximum possible width and then have a crapload of whitespace when you look at an item voted on only by "Joe".
Using width: auto; has no effect in IE7.
Are there alternatives?
Sorry if I've overlooked a similar question. I searched for a
bit before posting but didn't find anything suitable.
EDIT TO ADD CODE:
<div
style="-moz-border-radius: 0pt 0pt 0pt 0pt;
position: absolute;
width: 358px;
display: none;
top: 384.617px;
left: 463.5px;
z-index: 6000;"
class="qtip qtip-defaults" qtip="0">
<div style="position: relative;
overflow: hidden;
text-align: left;"
class="qtip-wrapper">
<div style="overflow: hidden;
background: none repeat scroll 0% 0% white;
border: 1px solid rgb(211, 211, 211);"
class="qtip-contentWrapper">
<div class="qtip-content qtip-content"
style="background: none repeat scroll 0% 0% white;
color: rgb(17, 17, 17);
overflow: hidden;
text-align: left;
padding: 5px 9px;">
<div id="WhoResults">
<table>
<tbody>
<tr>
<td>guy1</td>
<td>guy2</td>
<td>guy3</td>
</tr>
<tr>
<td>guy4</td>
<td>guy5</td>
<td>guy6</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
I have applied no CSS styling. That's all been handled by qTip. I tried to format it as best I could. Thanks for any help you can provide.
