DIV formatting missing in HTML5 output but Print output good

[M33R4]

My project is single-source with HTML5 and Print (PDF) targets/outputs.

On my topic pages, I have DIVs that contain a graphic to the left, a background colour, and space for text. They look like this:

DIV on topic page.PNG

DIV 2 on topic page.PNG

I've just Build Primary and those DIVs have no formatting in my HTML5 output - they are sitting as plain paragraphs like this:

DIV missing when viewed in browser_2.PNG

DIV missing when viewed in browser.PNG

Good thing is that in my printed output, those DIVs are displaying as designed.

On my Stylesheet, all looks normal

Any solutions on how to fix the HTML5 missing DIV formatting please

Thanks.
[/color]

[Chicago_HPT]

Is the formatting all done via CSS or do you have an image inserted in the divs in your XML? Did you accidentally set the images/stripes in the CSS for the Print medium instead of the default (Web) medium?

Can you share the XML for the div and the CSS for the style or styles?

-jeff

[robdocsmith]

I suspect the style has been added to the print medium and not the HTML5 one. Verify that when you are changing styles you change them for all appropriate mediums.

As a side note, I do something similar in my docs, but use a class of paragraph to achieve the side bar - this way I don't need to encase a normal paragraph inside a div:

Code: Select all

p.Note
{
	page-break-inside: avoid;
	column-break-inside: avoid;
	background-color: #E5E9F3;
	border-left: solid 4px #1A2E5A;
	overflow: hidden;
	padding: 10px;
	padding-left: 15px;
	padding-right: 15px;
	mc-auto-number-format: 'Note: ';
	mc-auto-number-class: 'boldText';
	mc-auto-number-position: inside-head;
	mc-auto-number-offset: 0;
}

I use the class .boldText to apply a specific bold font to my "Note:" headings.