link not working as expected

[rablampain]

I have the following HTML code which renders as expected in the browser (Firefox), that is when clicked, the link pointed to within the <div ..></div> tags renders at the top of a new window as specified in the css file and is highlighted that way but the ebook reader (Calibre) only shows a new window in which the link (from over 200 of them) could be rendered anywhere and the CSS formatting is ignored necessitating to read the whole window to find it.

I have only basic knowledge on the subject, I understand the browser considers the link as part of the <div></div> block and the link inherits the css formatting of the <div>, if this is correct, how can I accomplish the same result with the Calibre?
Else, I am missing something, what is it?

If the CSS inherit keyword is the answer, I could not figure how to use it.

Thank you for your help.

HTML code

<div class="quote">
"Government today is growing too strong to be safe. There are ..."
<br>
<a href="#H.L._Mencken">H.L. Mencken</a>
</div>
..
..
..
<p id="H.L._Mencken">
September 12, 1880 - January 29, 1956<br>
Was an American journalist, satirist, cultural critic and scholar of American English.
</p>

CSS code

p {
page-break-inside: avoid;
}
.quote {
page-break-inside: avoid;
background-color: silver;
text-align: center;
}

[kovidgoyal]

sorry I dont understand what you are saying. It would help if you posted a minimal file reproducing the issue or at least some screenshots.

[rablampain]

Thank you for your answer.
I am not sure posting a screenshot of the result would help, this is a web page (585K >96,000 words) being converted into an ebook. It contains over 200 links similar to the problematic link as described in the HTML code above and the CSS code is in an external file. The problem is all about the difference between how browsers render HTML and how book readers do it.
The problem is that in the example shown above and repeated below when clicking "H.L. Mencken" in the HTML 'link'

<a href="#H.L._Mencken">H.L. Mencken</a>

the content within the html code below should show with a background silver colour but it shows with a default colour (black)

<p id="H.L._Mencken">
September 12, 1880 - January 29, 1956<br>
Was an American journalist, satirist, cultural critic and scholar of American English.
</p>

Also, clicking the link should place the linked content at the top of the new window but it shows anywhere in that new window which is filled with other linked contents that precede and follow the linked content of interest and since each of these linked content is only 3 lines it is necessary to read the content of the whole window to find the few lines of interest.

The code has worked as expected for years under the browser and still does and it has been found valid html 5 with W3C HTML validator, so the problem is NOT the calling of the CSS file.

I hope this makes sense to you. If it does not, I can build 2 files that would reproduce the effect but I hope this is not necessary since often it confuses the issue by introducing new problems.

I was thinking about purchasing Calibre but am under the impression that if the only solution is to rewrite the lot (remove links and include linked content in place), then that removes a good part of the incentive to make the purchase.

[kovidgoyal]

calibre is free, it does not need to be purchased. And most book readers, including calibre, use browsers to do the actual rendering. The calibre viewer operates by default in paged mode, which means that when you click a link you will be taken to the page that contains the target of the click, it will not neccessarily be at the top of the page. If you wish to always ensure it is at the top of a page, you need to insert a page break before the target. Or click the yellow scroll icon in th etop right corner of the viewr to switch it to flow mode and it will behave like a browser.