Firefox and Image Gallery.

I'm having the same issue in Firefox, Epiphany, Safari.

this might help:

http://drupal.org/node/41257

FWIW I have problems with this too. I believe the reason it happens is that image.module applies 'height' equivelent to the size of the thumbnail to the li element which contains the image and description text - thus if you have text that takes up a larger height than the thumbnail you get a mess.

IMSHO the current xhtml for the image galleries is done badly, you'll be a lot happier if you use a phptemplate based theme and alter the xhtml and css.

The link above does help. The image theme customization leads to a forum discussion on the matter located at http://drupal.org/node/41259.

The text and pictures no longer overlap, but it is at the cost of not displaying the titles. However, a bit of tweaking can get that to work also (adding height or adding width).

Actually, the change can be made without going through the whole ordeal of moving around where the module gets its theme from.

Under the function theme_image_gallery($galleries, $images), you can make the changes that can increase the size of each "block" to prevent text overlapping. Its not as nice as detecting text and resizing, but it'll work.

The $height += 75; is what adds 75 pixels to the image size to make room for some text. The $content .= ' style="height : '.$height .'px; width : '.$width.'px;"'; is where it is applied.

You can change the number and/or add a

    $width += X;

to change the size to suit your needs.

Just to add my .02 -- I'm also having this problem with Firefox and 4.7. It would be great if this could be fixed. I'll try hard-coding an increased block size, but I'm worried that this will create excessively large spacing in other browsers.

Especially given the fact that I'm also having issues in IE -- the layout of the photos on the page is bizarre (e.g. The first row has 7 images, whereas the second has 5 with two "empty" spaces at the leftmost side of the row, then the third row has one image... This is annoying).

So, the problem is indeed the theme_image_gallery function as mentioned above. This isn't purely a Firefrox problem, and a patch was proposed almost a year ago to correct it -- but it looks like it hasn't been integrated yet (status is "code needs review"): http://drupal.org/node/25054

I messed with this for a long time as well. The list setup really just doesn't work. The floating images ends up breaking lots of styling as well. For example, try making your #main have a background color. Ouch, now you have a strange block covering a small area and these images just floating on the screen. I ended up having to hack things even more than these simple fixes.

My solution was to go ahead and provide a table for image display and not do any styling in the code for the galleries. Tables do have their place and really we are providing somewhat tabular data here. The code I have is WFM quality but I can probably fix it up and attach a patch.

http://drupal.org/node/64829 was marked duplicate

moving this to http://drupal.org/node/25054

I'm not 100% sure what i did to fix it, but it works on my site. Looks the same in IE and Firefox. All I did was mess with the CSS and make sure that the width and height were defined in system configuration.

Logically I figured if i went to image_gallery.css and changed it so that the ul.images li displayed as a block, that should stop them from overlapping.

it didn't work at first, but then I checked the image module settings under system configuration and made sure that the width and height of the thumbnails were both defined. and it worked.

see the result
http://quakers.davidcoffee.com/?q=image/tid/2