Problems with list

HTML & CSS
1

In a website I’m working on i have a few galleries. Most of them work fine but one of them is completely messed up because of the different heights of the thumbnails and I have no idea how to solve it. And probably the same will happen to the other galleries when other pictures with different sizes will be added

This is the page I’m talking about. Any help would be highly appreciated.

2

Add this to your CSS:

.album li:nth-child(3n+1) {
    clear: left;
}

This will force each 4th list item to start a new line

3

Hi megazoid, thanks for the reply. I just tried that but than each gallery is messed up!

4

That’s strange, I’ve tested it with Chrome Inspector on your page and everything was fine.
Another thing you can do, add this to ul.album li definition:

  min-height: 165px;

It will set all photos same height and fix the floating

5

Again thank you for the reply. Tried that one as well, but still nothing. I guess there is something completely wrong in the structure anyway because in FF the entire gallery is messed up. It is as if FF is not respecting the % width

6

You’re doing something wrong, because when I’m adding min-height I see the difference in Chrome and Firefox.

ul.werk li, ul.album li {
    ....
    min-height: 165px;
}

Did you clear browser cache after making the changes?

7

I just added the min height again, cleared the cache both in Chrome and Firefox but without result See chrome

900×506 46 KB

But what is even is worrying me more that in FF and IE the width of the li is not respected see FF

900×506 58.9 KB

What am I doing wrong?

8

I see now, you’ve added 135px min-height but this is not enough
Make 160px or more to see an effect

Edit: I’ve checked in latest Firefox and there is everything fine now even with 135px. But in Chrome gallery is still messed up, you should increase min-height up to 160px for Chrome

9

Hi thanks again. I will increase that. There is one other thing I noticed just now. Only on the main portfolio page

Portfolio and on the dogs page the 22% width is not respected in FF all other pages seems to be right. Do you see something strage in those pages?

10

Try this:

ul.werk li img, 
ul.album li img {
    width: 100%;
}
11

My advice here would be not to set a min-height, but instead remove float: left from the list items and instead use this:

display: inline-block;
vertical-align: top;

That works much more reliably.

12

I will give that a try :). It shouldn’t be needed though. Because I have added the max-width: 100% for images in normalize.css

13

Hi Ralph. Thank you for that. I have adjusted that and that works indeed great, but do you have an idea why the 22% width is not respected in FF? In Chrome everythings works fine now but in FF (and IE) it is running out of the parent

14

The problem is that you were running into a float snag due to the uneven height of the list items. You should not have been floating and should have been display:inline-block’ing as per Raphs suggestion. Any attempts at equalizing the height would be a band-aid fix FYI.

15

Hi Ryan thanks for the reply.I have adjusted that after Ralph mentioned it, I cleared the cache several times but it is still floating out. Or is it just me still seeing it that way?

See this page

16

I only have a chromebook on me right now (5:55AM right now) so I won’t have access to FF for another hour or so.

17

Ha ok Ryan. Please tell me what you see when you can see it on FF (and IE). Thanks a lot

18

Hello. Chrome, FF, and IE11 all look identical to me.

1148×603 189 KB

19

Hi Ryan, thank you for the reply. I am talking about this album

20

You’ll probably need to set max-width:100% on the anchors (in addition to it already being on the images) to get firefox/IE to behave.

ul.werk a, ul.album a {
  max-width:100%;
}