Button doesn't expand horizontally, text cut off

[Andrei Soroker]

Hello,

I'm seeing a very unusual situation where things work in FF, Chrome,
IE (7+), and Safari, but not in Opera.

If you load http://pleasehelpmepayoffmyhouse.com you will see a yellow
button to the right of the image. This button is suppose to grow
vertically to fit all the text. This works in other browsers.

My website is "localized" in way causes most text to be loaded with a
AJAX calls and inserted into appropriate elements in the DOM. Placing
<br>eaks in the text (or modifying the text in any way to help this
issue) is not an option.

Does anyone know why this issue happens and how it could be fixed?

Thanks,
Andrei

[Andrei Soroker]

On Aug 2, 11:47 am, Andrei Soroker <sor...@gmail.com> wrote:
> Hello,
>
> I'm seeing a very unusual situation where things work in FF, Chrome,
> IE (7+), and Safari, but not in Opera.
>

> If you loadhttp://pleasehelpmepayoffmyhouse.comyou will see a yellow

> button to the right of the image.   This button is suppose to grow
> vertically to fit all the text.  This works in other browsers.
>
> My website is "localized" in way causes most text to be loaded with a
> AJAX calls and inserted into appropriate elements in the DOM.  Placing
> <br>eaks in the text (or modifying the text in any way to help this
> issue) is not an option.
>
> Does anyone know why this issue happens and how it could be fixed?
>
> Thanks,
> Andrei

Subject should say "vertically", not "horizontally".

[Ric]

On Sun, 02 Aug 2009 11:47:58 -0700, Andrei Soroker <sor...@gmail.com>
wrote:

I don't think this is unusual at all, when you don't specify something
then the browser makes a quess at what you want it to do. This is
especially a problem when using absolutely positioned blocks, and why I
try hard to avoid them.
A div with a width of "auto" will expand to the width of it's containing
block unless it is positioned outside the normal document. In Opera, most
likely the containing block's width is calculated before it's child nodes
are filled by the Ajax calls, therefore the width is less than what you'd
like.

You should remove the inline style for that element, and instead specify a
width for it's containing block.
You can edit the source of the page in Opera and imediately see what it
looks like.
I used the following and removed the inline style and that fixed it...
#house
{
position: absolute;
width: 614px;
left: 450px;
top: 80px;
}
#highlight_all {
width: 120px;
}