Certain Styles Not Appearing Correctly in HTML5 Output

[AudreyLange]

Something strange is happening with a few of our styles in HTML5 output.

In the Flare editor, they look fine in the non-print medium view (see image below).

FlareEditor.png

But in the HTML5 output of this topic, the border and image disappear for some of the note styles (see image below).

WebOutput.png

I have no idea what's going on. It only happens for the Reference, Best Practice, Warning, and Prerequisite and not for the Note or Tip, which seems bizarre!

If you want to look at the CSS code, here it is:

Code: Select all

p.note
	{
		mc-auto-number-format: '{b}Note:  {/b}';
		font-weight: normal;
		font-family: Calibri;
		font-size: 100%;
		color: #000000;
		padding: 5px;
		padding-right: 15px;
		padding-left: 46px;
		padding-bottom: 5px;
		margin-left: 20px;
		margin-right: 40px;
		margin-bottom: 10px;
		margin-top: 6px;
		background-image: url('../Images/Icons/Note-PNG.png');
		background-repeat: no-repeat;
		background-position: 1% 25%;
		border-radius: 8px;
		border: solid 1px #292929;
		height: auto;
		page-break-inside: avoid;
		mc-next-tag: p;
	}

	p.reference
	{
		mc-auto-number-format: '{b}Reference:  {/b}';
		font-weight: normal;
		font-family: Calibri;
		font-size: 100%;
		color: #000000;
		padding: 5px;
		padding-left: 46px;
		padding-right: 15px;
		padding-bottom: 5px;
				margin-left: 20px;
		margin-right: 40px;
		margin-bottom: 10px;
		margin-top: 6px;
		background-image: url('../Images/Icons/Reference-PNG.png');
		background-repeat: no-repeat;
		background-position: 1% 25%;
		border-radius: 8px;
		border: solid 1px #97989b;
		height: auto;
		page-break-inside: avoid;
		mc-next-tag: p;
	}

	p.bestpractice
	{
		mc-auto-number-format: '{b}Best Practice:  {/b}';
		font-weight: normal;
		font-family: Calibri;
		font-size: 100%;
		color: #000000;
		padding: 5px;
		padding-right: 15px;
		padding-left: 46px;
		padding-bottom: 5px;
				margin-left: 20px;
		margin-right: 40px;
		margin-bottom: 10px;
		margin-top: 6px;
		background-image: url('../Images/Icons/BestPractice-PNG.png');
		background-repeat: no-repeat;
		background-position: 1% 25%;
		border-radius: 8px;
		border: solid 1px #f68d41;
		height: auto;
		page-break-inside: avoid;
		mc-next-tag: p;
	}

	p.tip
	{
		mc-auto-number-format: '{b}Tip:  {/b}';
		font-weight: normal;
		font-family: Calibri;
		font-size: 100%;
		color: #000000;
		padding: 5px;
		padding-right: 15px;
		padding-left: 46px;
		padding-bottom: 5px;
		margin-left: 20px;
		margin-right: 40px;
		margin-bottom: 10px;
		margin-top: 6px;
		background-image: url('../Images/Icons/Tip-PNG.png');
		background-repeat: no-repeat;
		background-position: 1% 25%;
		border-radius: 8px;
		border: solid 1px #7ca44c;
		height: auto;
		page-break-inside: avoid;
		mc-next-tag: p;
	}

	p.prerequisite
	{
		mc-auto-number-format: '{b}Prerequisite:  {/b}';
		font-weight: normal;
		font-family: Calibri;
		font-size: 100%;
		color: #000000;
		padding-right: 15px;
		padding: 5px;
		padding-left: 46px;
		padding-bottom: 5px;
				margin-left: 20px;
		margin-right: 40px;
		margin-bottom: 10px;
		margin-top: 6px;
		background-image: url('../Images/Icons/Prerequisite-PNG.png');
		background-repeat: no-repeat;
		background-position: 1% 25%;
		border-radius: 8px;
		border: solid 1px #2a65ac;
		height: auto;
		page-break-inside: avoid;
		mc-next-tag: p;
	}

	p.warning
	{
		mc-auto-number-format: '{b}{color red}Warning:  {/color}{/b}';
		font-weight: normal;
		font-family: Calibri;
		font-size: 100%;
		color: #000000;
		padding: 5px;
		padding-right: 15px;
		padding-left: 46px;
		padding-bottom: 5px;
			margin-left: 20px;
		margin-right: 40px;
		margin-bottom: 10px;
		margin-top: 6px;
		background-image: url('../Images/Icons/Warning-PNG.png');
		background-repeat: no-repeat;
		background-position: 1% 25%;
		border-radius: 8px;
		border: solid 1px #ed3539;
		height: auto;
		page-break-inside: avoid;
		mc-next-tag: p;
	}

[kwag_myers]

What browser(s) have you tried? Is this happening in IE?

[AudreyLange]

kwag_myers:
I've tested it in both IE and Chrome, and I got the same result in both.

[SteveS]

Have you tried setting the properties in the default media, rather than non-print?

[AudreyLange]

SteveS:
Yes. I just tried setting the properties in the default media rather than non-print, did a build, and got the same results.

[emsachs]

It works for me, although of course I don't have the images. But I get the border.

[AudreyLange]

emsachs:
Thank you for trying it out! The padding and everything was correct? Wow, that is weird -- I wonder why the exact same code would work for you but not for me. I can't figure it out ...

[SteveS]

Looking at your code the only difference I can see is the auto number wording, the image, and the border colour...

So, have you tried changing the border colour, either to a number that works (note or tip) or using a different convention (ie red, purple, green)?

[SteveS]

Wait...

I cut and paste the sample code from your stylesheet into notepad++ to compare.

I've just noted the margin-left property in the 3 styles that are failing have been indented:

IndentedCode.png

Could that be where the problem lies?

[Psider]

Double-check that the capitalisation in the topic code matches the capitalisation in the stylesheet. It's possible that the editor will accept mismatched case (I don't currently have access to Flare to check), whereas HTML5 is very strict. It's possible this mismatch could have happened if the style was originally capitalised and then changed after it had been applied in a topic.

[MattyQ]

...HTML5 is very strict.

XHTML is case sensitive (i.e., strict). HTML (5 included) is not.

http://www.w3.org/TR/html-markup/docume ... ensitivity

[MattyQ]

I've just noted the margin-left property in the 3 styles that are failing have been indented...

Could that be where the problem lies?

I think Steve is probably spot on -- it may be a non-standard tab that's causing Flare's CSS parser to break. I've encountered this sort of behavior before using certain selectors.

Notice in your screenshots that the color, font-size, and padding are all getting applied to those elements. However, following the tab, the margin-left, background image, and border properties are not. So, the CSS properties are getting applied up until that indentation.

[Psider]

...HTML5 is very strict.

XHTML is case sensitive (i.e., strict). HTML (5 included) is not.

http://www.w3.org/TR/html-markup/docume ... ensitivity

Maybe I'm getting confused with CSS. In any case, I've noticed that styles often break if the case doesn't match between the HTML and CSS.

[AudreyLange]

Thank you to everyone who offered suggestions and help with this!
The problem is now solved. The weird thing is that it suddenly started working without me making the suggested changes.
It had been displaying incorrectly for months, and then suddenly it worked correctly a day or so ago.
I think it may have something to do with my transition to Flare 11.... but I have no idea. It's bizarre.

Thanks again, everyone!