Gallery - dl, dt, dd - Not displaying correctly

Question

Having some troubles setting a title to the problem. But the problem is that the 3 columns gallery is not being displayed correctly in the following browsers:

Windows:

Firefox

Works in Chrome and Internett Explorer.

Mac:

Chrome
Safari

Have not found any browser where it works correctly.

The gallery is runned with basic WordPress, so it's not developed by me. Therefor it should work on all plattforms?

Not sure where I should begin to search for the problem.

I have tried deleting some images within the Inspector and this is what I have found out:

8 images works
9 images does not work
10-11 images works
12-13 images does not work

I have also found out that other galleries works correctly. Example.

I add some of the HTML below, so maybe you see a bug. Demo for the problem.

<div id='gallery-2' class='gallery galleryid-1349 gallery-columns-3 gallery-size-thumbnail'>
    <dl class='gallery-item'>
        <dt class='gallery-icon portrait'>
            <a href='http://annettemartens.com/wp-content/uploads/2013/08/IMG_22574.jpg' data-rel="lightbox-gallery-2"><img width="300" height="300" src="http://annettemartens.com/wp-content/uploads/2013/08/IMG_22574-300x300.jpg" class="attachment-thumbnail size-thumbnail" alt="The Joy of Life" aria-describedby="gallery-2-680" srcset="http://annettemartens.com/wp-content/uploads/2013/08/IMG_22574-300x300.jpg 300w, http://annettemartens.com/wp-content/uploads/2013/08/IMG_22574-768x768.jpg 768w, http://annettemartens.com/wp-content/uploads/2013/08/IMG_22574-1024x1024.jpg 1024w" sizes="(max-width: 300px) 100vw, 300px" /></a>
        </dt>
        <dd class='wp-caption-text gallery-caption' id='gallery-2-680'>
            Title
        </dd>
    </dl>
    <dl class='gallery-item'>
        <dt class='gallery-icon portrait'>
            <a href='http://annettemartens.com/wp-content/uploads/2013/08/IMG_3772.jpg' data-rel="lightbox-gallery-2"><img width="300" height="300" src="http://annettemartens.com/wp-content/uploads/2013/08/IMG_3772-300x300.jpg" class="attachment-thumbnail size-thumbnail" alt="Abandoned Garden I" aria-describedby="gallery-2-448" /></a>
        </dt>
        <dd class='wp-caption-text gallery-caption' id='gallery-2-448'>
            Title
        </dd>
    </dl>
    <dl class='gallery-item'>
        <dt class='gallery-icon landscape'>
            <a href='http://annettemartens.com/wp-content/uploads/2013/08/IMG_30962.jpg' data-rel="lightbox-gallery-2"><img width="300" height="300" src="http://annettemartens.com/wp-content/uploads/2013/08/IMG_30962-300x300.jpg" class="attachment-thumbnail size-thumbnail" alt="Celestian Visitant" aria-describedby="gallery-2-955" /></a>
        </dt>
        <dd class='wp-caption-text gallery-caption' id='gallery-2-955'>
            Title
        </dd>
    </dl>
    <br style="clear: both" />
    <!-- And so on  -->
</div>

Any ideas?

Can you describe what you mean by "Not displaying correctly" I opened both of the links you provided in Chrome and Firefox and they look and function the same in both browsers. — d_boggus, Jun 27 '16 at 20:05
Consider using `display: inline-block` for each tile instead of `float: left`. — Marat Tanalin, Jun 27 '16 at 20:14
Turns out display: inline-block solves the problem with the Inspector. But the problem is that it's set by Wordpress in wp-includes... And i "can't" change that. Or any ideas? — Olen, Jun 27 '16 at 20:30
CSS allows to override any previous rule. This can sometimes be tedious, but in your case it should be enough to override `float` property to the `none` value for the corresponding selector. — Marat Tanalin, Jun 27 '16 at 22:55

score 1 · Accepted Answer · answered Jun 27 '16 at 20:21

This kind of things happen when you have floating elements with different heights:

#wrapper {
  width: 400px;
  border: 1px solid blue;
  overflow: hidden;
}
.item {
  width: 198px;
  height: 198px;
  border: 1px solid;
  float: left;
  background: yellow;
}
.item:first-child {
  height: 210px;
}

<div id="wrapper">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

One way to avoid it is using clearance after each row. It seems you are already using brs for that.

#wrapper {
  width: 400px;
  border: 1px solid blue;
  overflow: hidden;
}
.item {
  width: 198px;
  height: 198px;
  border: 1px solid;
  float: left;
  background: yellow;
}
.item:first-child {
  height: 210px;
}
#wrapper > br {
 clear: left;
}

<div id="wrapper">
  <div class="item"></div>
  <div class="item"></div>
  <br />
  <div class="item"></div>
  <div class="item"></div>
</div>

The problem is that your br are not displayed because of

.gallery br {
  display: none;
}

Then they can't clear. Just remove that style, or don't use floating.

Thank you. This works for desktop, but for mobile it's the same problem :) Any guesses? — Olen, Jun 27 '16 at 20:44
I went for display: inline-block from the comment above. This works great on both desktop and mobile. What are your thoughts about it? — Olen, Jun 27 '16 at 20:49
Yes, I also said "or don't use floating". But be aware of [How to remove the space between inline-block elements?](http://stackoverflow.com/q/5078239/1529630), [My inline-block elements are not lining up properly](http://stackoverflow.com/q/19366401/1529630) and [Image inside div has extra space below the image](http://stackoverflow.com/q/5804256/1529630) — Oriol, Jun 27 '16 at 20:51

Gallery - dl, dt, dd - Not displaying correctly

1 Answers1