MaxiGallery - styling issue IE7

Hello,

I’m having an issue show the pictures in rows in IE7 - everything is working fine in Firefox.

the images are surrounded by a div tag - they are direct children of the div.thumbs tag - since the div tag is a block element, IE7 takes the div that’s holding the images over the whole width of the page - please see attachment.



I was wondering whether anybody knows how to fix this?

Thank you in advance for your help.

I’m also interested in seeing any CSS improvements that you people may have for MaxiGallery.

I did some research on what would be the best way to layout the thumbnails. In many cases, thumbnails are built as an unordered list. I also have to support an easy way to define how many thumbnails should be rendered per row (the &pics_per_row parameter). Currently in the default layout, the thumbnails are wrapped in inline divs and a
tag is placed (with clear:both) when the line is to be broken. (based on this example)

But there is issues in displaying the thumbnails like this when the thumbnails are different in height. Usually the layout breaks and not all lines have the right amount of images.

So, what I’m thinking is that would it be better to make the thumbnails come to an unordered list and if user has set &pics_per_row parameter, it would end the list after each &pics_per_row amount and start a new one.

So it would go like this when pics_per_row is not set (eg. show as many pictures as the container has space for):



And if pics_per_row is set to 3 for example, it would go like this:




I don’t know if that would help to get it any better, but I could test.. What do you guys/gals think?

floating the divs wouldn’t be a problem if we could set the width for them - we could have something like this:

<div.thumbs>
<div style="width: ....">

</div>
</div>

the width could be based on the thumbnails dimensions - padding, border and margin have to be taken into consideration - however, achieving this should be too difficult when using mootools.

I guess nested spans would work well too

But we cannot use static widths, because that wouldn’t allow the use of &pics_per_row parameter. Users would have to specify widths to their containers manually that gets the certain amount of thumbnails per row.. or we could try to calculate that using javascript like you said, but it would be too much work for such a simple thing.

I didn’t mean the unordered list as a solution for your problem only, but as more general fix for the whole layout of the thumbnails.. I’ll try to play around it and report back my findings..

Quote from: doze at Feb 23, 2007, 10:08 AM

But we cannot use static widths, because that wouldn’t allow the use of &pics_per_row parameter. Users would have to specify widths to their containers manually that gets the certain amount of thumbnails per row.. or we could try to calculate that using javascript like you said, but it would be too much work for such a simple thing.

I didn’t mean the unordered list as a solution for your problem only, but as more general fix for the whole layout of the thumbnails.. I’ll try to play around it and report back my findings..

I don’t know how the code is dealing with the pictures, but don’t we know the image dimensions when building the rows?

as to the nested spans, I’m using this technique in the ibrowser plugin when adding captions to the image - have a look at the ibrowser css or I could pm you the part that’s dealing with the captions.

The SVN version has new default html markup and css.. it produces the gallery thumbnails as an unordered list. Seems to work fine on FF an IE 6, if you are using many different size thumbnails and it won’t layout properly by default (eg. when it puts as many pics per row as the container has space for), use &pics_per_row parameter to define how many pictures should be on a row and it should layout correctly..

Hi,

This is my first post since I have started using modx (and maxigallery) and I am finding both to be really cool!

Just to say mmjaeger that I had the same layout issue as you in IE and a display:inline; in the .thumbs div img class did the trick:

.thumbs div img {
border: none;
display: block;
margin: 5px auto;
display:inline;
}

It seems that IE in general does not understand margin:auto very well --> http://www.positioniseverything.net/explorer/doubled-margin.html

Hope this helps!

Have you tried the v0.5 final? the css is completely different in it and this should be fixed..

No I haven’t tried the final version yet, wasnt aware of it Will try it, thanks for the suggestion doze