ce_gallery CSS Style Issue w/ HTML5 Contao 2.11.5 SOLVED

[ernestmcd]

Good morning:

I've run into an issue with the ce_gallery core that I can't seem to solve.

In Contao 2.11.5 if I set up a standard ce_gallery with images using a page layout set to "HTML" and a properly configured HTML5 template, the ce_gallery consistently blows out of its containing division. When checking using Firebug, there is a style setting that shows the td width set to the percentage of the number of images in a row. e.g. 3 images = 33%, 4 images set to 25%. There is no reference to the source of this css declaration other than a cryptic reference to W3C:
http://blueocean.frontwavewebsites.c...ons-html5.html

element.style {
     width: 25%;
}

No matter what I've tried with my with my humble CSS skills , the ce_gallery does not accept the styling cues from modifications to the style sheet.

If I change the page back to XHTML (transitional or strict, doesn't matter) the ce_gallery then resets itself to the correct width of the containing division.

http://blueocean.frontwavewebsites.c...xtensions.html

Does anyone have any suggestions on what is causing this issue with HTML5, but not in XHTML? I would appreciate any suggestions or advice.

Ernest McDermon
Snellville, GA

[Andreas]

Try to eleminate those big margins on your .image_container

header, footer, nav, section, aside, article, figure, figcaption {
  display: block;
  margin: 0;
}

[ernestmcd]

Thanks, but "width" of the td as a percentage is not the same as "margin" for the image container. My analysis of this issue with Firebug leads me to believe that the problem seems to center around the HTML5 picking up a percentage for width of the columns in the display that is peculiar to the HTML5 version of the page, but does not affect the XHTML flavor.

Does anyone else have some other thoughts on this?

[Andreas]

Your problem has nothing to do with HTML5. Give your image_container in XHTML the same margin as in HTML5 and you have the same problem there.

.image_container {
  float: left;
  margin: 16px 40px;
  z-index: 5;
}

Try to give your table a width and table-layout

table {
  table-layout: fixed;
  width: 100%;
}

[ernestmcd]

Okay, I think I've identified the issue and have a working solution on my website now. I located a working solution in this thread on stackoverflow.com:

http://stackoverflow.com/questions/3...ith-my-padding

There are several fixes for thinks like ul elements etc. that are discussed, and my best guess is that the issue centers around this comment from the discussion thread:

It's because the DOCTYPE changes the rendering mode to Standards Compliance Mode. Specifically, this means you're using the W3C Box Model now which computes width/height for block elements differently than quirks mode.

It appears that the problem affects primarily margin around the image, and possibly line-height for ul elements if there is a problem with lists. After applying the fix below, margin and/or padding applied to the images has been removed in HTML5 pages, and they now respond to image alignment in a text box, and margin settings in the Contao image element area are working as well:

(These lines just need to be added to either the core stylesheets or your own CSS The z-index is my setting for the theme we're using):

contao_layout.css

html * { 
	margin: 0;
	padding: 0;
}

contao_properties.css

/** IMAGES **/
.image_container {
	z-index: 5;
	padding: 0;
}

.image_container img {
	border: 0;
	margin: 0;
}

Anyway, this seems to be working now for me. Hope this solution above is of help to someone else. Any other suggestions of course are appreciated.

Ernest McDermon
Snellville, GA