DIV formatting missing in HTML5 output but Print output good

This forum is for all Flare issues related to the HTML5, WebHelp, WebHelp Plus, and Adobe Air Targets
Post Reply
M33R4
Sr. Propeller Head
Posts: 128
Joined: Wed Oct 07, 2020 7:58 am
Location: UK

DIV formatting missing in HTML5 output but Print output good

Post by 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 :o

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

Thanks.
[/color]
You do not have the required permissions to view the files attached to this post.
Newbie to MadCap Flare
Chicago_HPT
Sr. Propeller Head
Posts: 133
Joined: Sun Feb 03, 2013 6:01 pm

Re: DIV formatting missing in HTML5 output but Print output

Post by 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
Sr. Propeller Head
Posts: 247
Joined: Thu May 24, 2018 3:11 pm
Location: Queensland, Australia

Re: DIV formatting missing in HTML5 output but Print output

Post by 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.
Post Reply