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:
I've just Build Primary and those DIVs have no formatting in my HTML5 output - they are sitting as plain paragraphs like this:
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]
DIV formatting missing in HTML5 output but Print output good
DIV formatting missing in HTML5 output but Print output good
You do not have the required permissions to view the files attached to this post.
Newbie to MadCap Flare
-
- Sr. Propeller Head
- Posts: 133
- Joined: Sun Feb 03, 2013 6:01 pm
Re: DIV formatting missing in HTML5 output but Print output
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
Can you share the XML for the div and the CSS for the style or styles?
-jeff
-
- 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
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:
I use the class .boldText to apply a specific bold font to my "Note:" headings.
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;
}