ce_image in HTML5 layout blows out of grid

[ernestmcd]

Good morning:

I'm running into an issue with what appears to be a padding issue when changing a layout from "XHTML Transitional" to "HTML5". Here is a screen shot of the same page in XHTML:

[attachment=1:2i146yj5]screenshot_xhtml.jpg[/attachment:2i146yj5]

The image at the top is a custom HTML module and both it and the ce_element image below it are contained within the fieldset border in a grid_4 300px wide container:

[img]tl_files/badassdash/images/template/dash_board_273.png[/img]

Here are the same two images when the Page Layout is changed to HTML5:

[attachment=0:2i146yj5]screenshot_html5.jpg[/attachment:2i146yj5]

The ce_image element blows out the width of the container, but the custom HTML does not. When I compare the frontend/ce_image.xhtml template and the ce_image.html5 templates, there is a line of code in the XHTML template that reads:

<div class="image_container"<?php if ($this->margin): ?> style="<?php echo $this->margin; ?>"<?php endif; ?>>

and in the HTML5 template it reads:

<figure class="image_container"<?php if ($this->margin): ?> style="<?php echo $this->margin; ?>"<?php endif; ?>>

What is causing the padding issue to change between the two? I believe the problem involves the "figure" element somehow. I'm not having any luck finding this. Any suggestions? Is there a CSS setting or change I should modify to fix this in the HTML5?

Ernest McDermon
Snellville, GA

[thyon]

look at the reset.css stylesheet for HTML5. that includes margin:0; and padding:0px for figure. normally figure has lots of margin and padding added by the browser's default styles. You just have to get rid of them.