CSS Parser in 4.2

[JasonSTI]

Just started using Flare 4.2 (we had been compiling fine in 3.1) and we're getting some issues with our link styles. We created a class a.Popup for all links that we have set to use Popups, which makes the link look slightly different. However, how Flare isn't coloring the links correctly (rendering them blue instead of the designated a style) and reporting errors during the build.

Code: Select all

Line: 1. Char: 5. Missing colon (:)

And in the Messages, it shows:

Code: Select all

CSS Parser: Line: 1. Char: 5. Missing color(:)(tokens=Popup)

The CSS file has the styles as:

Code: Select all

a.Popup
{
	text-decoration: none;
	border-bottom: 1px #800000;
	border-bottom-style: dashed;
}

a
{
	padding-left: 0px;
	color: #800000;
	font-weight: bold;
}

(and incidently, the first line of the CSS file was inserted by Flare, and is:

Code: Select all

 /*<meta />*/

Anyone know why this is going bonkers in 4.2, when it compiled fine in 3.1?

[LTinker68]

Code: Select all

a.Popup
{
	text-decoration: none;
	border-bottom: 1px #800000;
	border-bottom-style: dashed;
}

I wonder if you need to separate the border-bottom style or combine them. In other words, maybe it has to be...

Code: Select all

a.Popup
{
     text-decoration: none;
     border-bottom-size: 1px
     border-bottom-color: #800000;
     border-bottom-style: dashed;
}

...or it has to be...

Code: Select all

a.Popup
{
     text-decoration: none;
     border-bottom: dashed #800000 1px;
}

[JasonSTI]

I tried both ways, but it didn't seem to make a difference.

As a work around, I added the color attribute to the a.Popup tag as well, so it at least renders correctly in the CHM (it still displays as blue in Flare, however, and I still get the build errors).

[LTinker68]

I'm trying to think if I've ever used a border setting on the <a> tag. If I wanted it underlined, I always set text-decoration to underline.

If you set the Stylesheet Editor to "Show: Assorted Relevant Properties", then the border options aren't even available, so it could be that you can't use the border styles with an <a> tag. You might have to create a span tag that has the border you want, put that span tag around the text, then put the <a> tag around the span tag. So it would be something like <a href="whatever.com"><span class="btmBorder">Text to hyperlink</span></a>. Never actually tried that so you'd have to play with it.

[JasonSTI]

I figured out why we were getting the CSS Parser: Line: 1. Char: 60. Missing colon (:)) error. Someone had coded something by hand and had put style="Base" instead of class="Base" when trying to assign styles.

Fixed that. No more compile errors. Now to make my editors use Flare/X-Edit.

The border setting works on the <a> tag, although it is unsupported by all browsers. It works in HTML Help, however. We wanted to use a dashed underline, and this was the only way to do it without having to find all of those links and adding spans around them.

Per an e-mail from MadCap, starting with Flare 4.2 the CSS rendering is more strict. Instead of assigning on the base a.class level, to correctly render in Flare the styles need to be on the a.class:link pseudoclass level. Once the color and style were set there, everything looked fine.

So... everythings fine. Nothing to see here. Move along.

[ChristyPatton]

Not so fast sheriff.

How did you find the error? Line by line look through? I'm getting a very similar error.

Line: 1. Char: 6. Missing colon (:)
(sub system) CSS Parser Line 1 Char 7

My meta tag is identical to yours, line 1 doesn't make any sence. I don't know how else to intererperet your finding on char 60.

Any suggestions get a big thank you.

[wclass]

I had a similar error - Char 4 for me. I had to find the problem "manually".

The message on the error tab has less info than the one on the messages tab. I scrolled through all the messages till I found the error displayed
- as "CSS Parser: Line 1. Char: 4. Missing colon (:) (token=xyz)" (you could save the log and search).

This told me two things - the first was the name of the file in error (error appeared just after it), and the extra token information. I searched the file for the token text and found a badly formed element - a <b> tag with a class=xyz assigned, and nowhere near line 1.

I fixed this in the code and the error is cleared. I also put in a bug report that the error messages need to be improved - making the css parser strict is fine, but we need the errors to be clear.

[ChristyPatton]

Yup, that was it.

I found <p style="Strong"> and it should be <p class="Strong">

Thank you for your help. Knowing what Token meant made all the difference.