[HTML/CSS]Ankers maken een puinhoop van output - Softwareontwikkeling

woensdag 23 februari 2005 13:29

Acties:

Topicstarter

Ik kwam vandaag (wonder dat het me niet eerder is opgevallen) achter een wel heel idiote bug. Ik heb een stuk DocBook omgezet naar HTML dmv XSLT. Via wat aanpassing heb ik een eigen stylesheet gekoppeld aan de output. Nu vielen me enkele rare dingen op toen ik het in IE bekeek (FF komt zo... is weer beetje anders, maar ook niet goed).
Zie de volgende code, niet mijn gegenereerde code, maar vergelijkbaar:

code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<title>Hier een mooie titel</title>
<style media="screen" type="text/css"><!--
body { font-size: 10px; font-family: Arial, Helvetica, Geneva, Swiss, SunSans-Regular }
a { color: red; font-weight: 600; text-decoration: none; letter-spacing: 0em }
a:hover { color: red; font-weight: normal; letter-spacing: 0.5em }
p { }
--></style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et <a id="IDAEV4TD" class="indexterm"/>justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, <a id="IDAHV4TD" class="indexterm"/>consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</body>
</html>

Nu word de tekst na elk anker (class= indexterm) gehandeld alsof het een link is. In FF krijg je zelfs de :hover effecten erop van toepassing. Maar ik dacht dat de ankers wel goed afgesloten waren < />
Ligt dit aan mijn DocType definitie? Het is namelijk wel op te lossen door <a .. /> te veranderen in <a> </a> (let op de spatie, is nodig!)

Ik denk niet zwart-wit, ik denk diapositief! ( ͡° ͜ʖ ͡°)

woensdag 23 februari 2005 13:33

Acties:

Vinzzz243

k kijk ff voor je, maar je hoeft niet perse <a> te gebruiken voor anchors he...
kunt ook ander element gebruiken als je maar refereert naar het id van dat element

woensdag 23 februari 2005 13:36

Acties:

Savantas

Topicstarter

Klopt idd, maar dit komt uit standaard DocBook-stylesheets. Zitten meer zaken in die ik minder netjes vind, zoals gasinstallatie...

Maar mijn XSLT skills zijn niet zo dat ik dat even aanpas, zeker niet met zo'n uitgebreide als DocBook...

Ik heb even bovenstaand zo aangepast dat de 2e paragraaf dus met 'hack' is...

@ Andre: Dat verklaard dus waarom de 'hack' ook minimaal een spatie nodig heeft...

Ga denk ik maar eens een mailtje op de DocBook mailinglist zetten hierover... eerst eens testen of de xhtml-conversie hetzelfde probleem geeft.

Thanx!

[ Voor 53% gewijzigd door Savantas op 23-02-2005 13:40 ]

Ik denk niet zwart-wit, ik denk diapositief! ( ͡° ͜ʖ ͡°)

woensdag 23 februari 2005 13:37

Acties:

André

Analytics dude

Een <a> element kun je ook niet op die manier afsluiten omdat er altijd inhoud in moet staan.

Van de W3 site:

quote: http://www.w3.org/TR/REC-html40/struct/links.html#edef-A
Note. User agents should be able to find anchors created by empty A elements, but some fail to do so. For example, some user agents may not find the "empty-anchor" in the following HTML fragment:

<A name="empty-anchor"></A>
...some HTML...
<A href="#empty-anchor">Link to empty anchor</A>

[ Voor 81% gewijzigd door André op 23-02-2005 13:41 ]

woensdag 23 februari 2005 13:39

Acties:

Vinzzz243

je geeft html4 op daarin is het sluiten van de A required...

andre was me voor

[ Voor 25% gewijzigd door Vinzzz243 op 23-02-2005 13:40 ]

woensdag 23 februari 2005 13:45

Acties:

Verwijderd

Als je output method HTML is zou er theoretisch geen <a /> uit mogen komen. Dat zou een bug zijn in de XSLT processor.

Ik zou het is vragen op de Docbook mailing list. (Die voor style sheets.)

woensdag 23 februari 2005 13:57

Acties:

Savantas

Topicstarter

Ik zie overigens dat ik inderdaad de verkeerde DocType erboven had geplakt, zou moeten zijn:

code:

<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

Ik had de xhtml-stylesheet erover gezet. Maakt in ieder geval voor dit effect niet uit. DocBook-apps krijgt een mailtje...

@Anne: Ik had in kladblok al een stukje HTML staan, heb hier een vereenvoudigde versie van de gegenereerde code onder gezet, alleen domweg vergeten te kijken of de header wel goed was

complete correcte code is:

code:

<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<title>titel</title>
<style media="screen" type="text/css"><!--
body   { font-weight: normal; font-size: 12px; font-family: Arial, Helvetica, Geneva, Swiss, SunSans-Regular }
a { color: red; font-weight: 600; text-decoration: none; letter-spacing: 0em }
a:hover { color: red; font-weight: normal; letter-spacing: 0.5em }
p { }
--></style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et <a id="IDAEV4TD" class="indexterm"/>justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, <a id="IDAHV4TD" class="indexterm"/>consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et <a id="IDAEV4TD" class="indexterm"></a>justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, <a id="IDAHV4TD" class="indexterm"></a>consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</body>
</html>

Maar ook in FF, die voor zover ik weet Doctype's correct(er) behandeld, pakt ie toch de hele paragraaf vanaf het anker mee in dezelfde stijl gedefinieerd voor links.

Edit2:
Inderdaad, Mimetype does the thing... (Jeetje, Anne had gelijk

)

I can't explain why this happens. I'd speculate it's because the
docuemnt is actually treated as SGML, rather than XML. Try renaming the
file with a .xml extension and retesting in (without the SGML comment
around your CSS). It then works as expected, for me, in Firefox.

en

it's all down to mime type. when mozilla recieves something as
"text/html" it will treat it as an HTML. when mozilla gets a page as
"application/xhtml+xml" it will treat it as XML.
this makes sense in that in HTML there are no empty elements, thus the
style is activated on the start tag and ends at the next end tag (even
if this is a 'proper' (<a></a) tag in the second paragraph). in XML
empty elements are fine and so there's no problem.
how you configure this is dependent on server and server os, but with my
system (linux+apache) defaults i just made a copy of the test webpage
with an .xhtml extension and the bug went away

Daarnaast de simpele CSS-'hack' (als je het al zo kan noemen): maak van A -> A:link en dus ook A:hover -> A:link:hover en alleen de linkjes zullen de vereiste stijl krijgen, de anchors (en dus de rest van de tekst erachter) niet.

[ Voor 122% gewijzigd door Savantas op 23-02-2005 17:06 . Reden: Antwoord DocBook mailinglist ]

Ik denk niet zwart-wit, ik denk diapositief! ( ͡° ͜ʖ ͡°)