Horizontal Image Gallery Coding Issue / suggestions

Question

I have a client, who request a website update.. The previous site I designed had a nice looking gallery with thumbnails and pop-up images.. She preferred to switch to a different format, similar to the one she has on an agency website.. This is the gallery on that website:

http://zenobia.com/hmu_g_j/hmu_gleeson_austin_f400.html

I came up with a new design, but I am having browser compatibility issues.. You can see the new gallery page here:

http://www.lisagleeson.com/galleries/lifestyle/

I setup the gallery to pull images from a folder, which works.. The gallery is placed within a Div container which is 100% wide, so that it stretched across the screen. The inner Div container is set so that the overflow is hidden, but scrollable. The page works in Safari, but not in Firefox or Chrome.. The overflow function does not see to work, it only posts the images which will fit in the Div..

Does anyone have suggestions on how to fix this issue so that the Div is 100% wide..

Answer 1

Remove the inline-block from #gallery and add it to #galleryImage. Also, remove the float from #galleryImage.

#gallery {
  height: 525px;
  margin-left: 10px;
  overflow-y: hidden;
  overflow-x: scroll;
}

#galleryImage {
  height: 525px;
  margin-left: 10px;
  display: inline-block
}