Log in / Register

Forum › How do I...?

make certain css selector work with Prince

Diana
Hello, in CSS file, I have the following:

#toc a[class="H1"] {
font-size:28px;
color: blue;
}

In html, I have a li item as:
<a id="link0" href="#title0" class="H1">ngws_xpatrol_ctrl</a>
This is in a div with id="toc".

The font size and color in CSS works well in a browser, but when I convert the html file to a pdf, #toc a[class="H1"] is not applied. Is there anyway I can make this work?

Thanks
Diana
mikeday
There should be no problem with that, although it would be shorter to write the selector as "#toc a.H1 { ... }".

Are other rules in the style sheet being applied?
Diana
I just found out it's case sensitive. If I use #toc a.H1 or #toc a[class="H1"], it works on Chrome, but not with Prince; if I use h1, it's the opposite! Can Prince make it work both ways, lower or upper case?

Thanks
Diana
mikeday
If you try testing this document:
<!DOCTYPE html>
<html>
<head>
<style>
a.h1 { font-style: italic }
a.H1 { font-weight: bold }
</style>
</head>
<body>
<p>
<a class="h1" href="">this is a test</a>
<a class="H1" href="">this is a test</a>
</p>
</body>
</html>

I find that Prince, Firefox, and Chrome all render the first link italic and the second link bold. This is the correct behaviour, as class names in HTML are actually case-sensitive.

However, if you remove the <!DOCTYPE html> declaration, the browsers will fallback into "quirks mode", where they attempt to render old (pre-CSS) webpages in the expected manner, and treat class names case-insensitively. Prince does not support quirks mode, so I would recommend adding the DOCTYPE declaration and ensuring compatibility with HTML5 and modern browsers.

Edited by mikeday