Div width: auto and IE

Posted by Andrew Heath on Stack Overflow See other posts from Stack Overflow or by Andrew Heath
Published on 2010-12-22T00:45:44Z Indexed on 2010/12/22 23:54 UTC
Read the original article Hit count: 248

Filed under:
|
|
|

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.

© Stack Overflow or respective owner

Related posts about css

Related posts about div