Wide table causing horizontal scrollbar

Question

I have a table inside a couple of nested divs. One column holds an image whose width makes the total width of the page wider than the display and the horizontal scrollbar shows.

This cell is from an asp.net ajax popup (on mouseover) and is hidden via javascript, so the scrollbar isn't needed.

Is there a way via css/xhtml to make it so that the scrollbar doesn't show? I am sure that the width of the table cell is causing the problem because when I remove it, the scrollbar is gone. The image element is nested in a div. I tried overflow: hidden and manipulating the table cell widths - neither worked, at least without altering the widths of the images.

Thanks in advance.

Answer 1

I can't say I'm sure why you'd be getting a scrollbar with overflow:hidden, but here's the trick I use to have mouse-over popups:

HTML:

 <div><a href="#" class="showtooltip">Text you want visible at all times. <div
 id="tooltip">elements you want for mouse tooltip</div></a>

CSS to format links:

a:link .showtooltip{
//CSS
}
a:hover .showtooltip{
//CSS
}
a:hover .showtooltip{
//CSS
}
a:active .{
//CSS
}

Your CSS will likely be the same for all of those next up we need to set the CSS for the tooltip:

a:link .showtooltip div{
visibility:hidden;
}
a:hover .showtooltip div{
visibility:hidden;
}
a:hover .showtooltip div{
visibility:visible;
//CSS to properly position and size div
}
a:active . div{
visibility:hidden;
}

You can then have your ajax write to document.getElementById('tooltip')

Answer 2

I should have mentioned the fact that this problem only occurs in IE7 and not in FF3. Anyways, the following link illustrates the bug I ran into. Hope this helps anyone else who runs into this problem.

http://snook.ca/archives/html_and_css/position_relative_overflow_ie/