One border missing, either on side or bottom

I’m having several galleries on one page using Bloxx trying to implement a white border both on thumbnails and images. However, whatever I try the borders show on three sides only in all browsers. In Exhibeo all appear fine. Here: Travels

Hi Jon,

I think it’s drawing the border, but the image is overlapping it.

Can you reduce your Xway document to a test document with just one or two galleries on a page? Duplicate your existing document (File > Duplicate) and rename the duplicate. Then delete pages and galleries from the duplicate.

If you send me the test document, I’ll take a look at it. I might also need an Exhibeo document, but I can get back to you on that.

This seems to be caused by a * { box-sizing:border-box } style on your page, probably in the CSS Markup field which Xway adds. This changes the behaviour of padding in relation to the width (in this case) of the box, which is what Bloxx uses for those borders.

Unless that style is needed for something else, it should probably be removed from CSS Markup. If you do need that style for something else, you can add the following to remove the box-sizing from the Bloxx overlay elements:

.bloxx-grid-wrapper, .bloxx-grid-wrapper * { box-sizing:initial }

This should be added to the Bloxx theme in Exhibeo but you can add the above in the CSS Markup field of the Xway’s page inspector in the meantime.

I don’t think that’s it, because Xway uses the border-box model and automatically adds * { box-sizing:border-box } to every page

Actually, I’ve just tested it and it looks like we need to fix the Bloxx theme in Exhibeo!

So it does, I didn’t check the output before adding it to CSS Markup and evidently didn’t check closely enough to see it was there twice after I added it.

border-box sizing is what’s causing the issue in Bloxx though, so the above CSS will resolve that. I’ll edit the previous message to remove the CSS Markup confusion. It’s possible other themes also use padding with the assumption that content-box sizing will be used.

We had a previous issue with Impress galleries, and we fixed that in the Impress stylesheet, so it looks like we should do the same here (and check other themes, as you suggest).

Hello Simon, I tried your css suggestion. It worked on the thumbnails which now has the borders all around. However, the images are still lacking the bottom border.

Jeremy, I guess if you are going into the Bloxx app to fix this, you’ll have to do an update? If so, what timeline can we expect?

Jon

For the images you also need to add: .bloxx-slides-wrapper * { box-sizing:initial }.

We should be able to update Exhibeo within a few weeks. But you can work around the problem for now by making the suggested additions in CSS Markup (in the Page Inspector for the page or master page). Instead of box-sizing:initial you could also be more explicit and say box-sizing:content-box

I implemented both suggestions and all borders are in place. Thank you, both.

We’ve released a new version of Exhibeo (2.0.11) that fixes this problem, along with another unrelated problem (controls being underlined). If you re-export your Bloxx gallery/galleries (and update them or re-import them in Xway) you should be able to remove any CSS markup you’ve added as a workaround.