[RESOLVED] Safari image displacement bug

[Halamantariel]

I'm having a hard time with a Safari-only bug, and I think I need help on this one. I've tested this "system" on 4 different browsers: Firefox (most recent), IE7, Opera (most recent) and Safari, and only Safari displays a weird yet very annoying bug.

Here's the example page: http://halamantariel.homeip.net/bug/

Just click the button. AJAX will load some text and put it in a previously invisible (display: none) div, between the button and the images below. The images should move down to make some room for the new text to be displayed.

Everything works fine, except with Safari. What happens in Safari is that the images with "Nouveau" written in them do NOT move down as they should. Instead, they stay in place, being placed over the newly downloaded text. These "Nouveau" images are positioned using the "position: absolute", because I want them to always be in the bottom right corner of the tables, and the title text for each may be 1 line, 2 lines or 3 lines long.


Any help would be greatly appreciated. Development on this project went very well until I stumbled upon this very annoying problem.

[Halamantariel]

The bug also happens even if I'm not using AJAX to load content in the invisible DIV. Here's an example page: http://halamantariel.homeip.net/bug/index2.html

Any theories, ideas or solutions would be greatly appreciated.

[Halamantariel]

Problem solved.

I had posted on the official Apple Safari forums, and someone found the solution! The only thing that was missing from my code was this:

h3.video { position: relative }

That's it!


So it would seem that Safari requires the relative positioning of a parent container for the absolutely positioned child to be attached to its parent. I find it quite odd that it requires that, as the other 3 browsers I tested didn't need that. Oh well... we learn new stuff every day!

[toicontien]

From what you describe, I find it quite odd the other browsers don't act that way. What you are describing is exactly how all browsers should react. And by "attach" you mean "positioned with respect to" right?