IE7+ negeert Title en gebruikt ALT als Title

[Verwijderd]

Een vaag probleem met IE7 en hoger. IE7 schijnt de ALT text van een afbeelding te pakken en te weergeven als Title tag, terwijl de echte title tag genegeerd wordt.

In firefox en Chrome / opera is dit niet het geval. Stukje van de broncode:

code:

<li><a href="urlnaarsite/pagina/" title="De originele titel met mouseover"><img src="afbeelding.png" width="100" height="30" alt="ALT Text afbeelding" /></a></li>

Is de manier waarop mijn code wordt opgebouwd verkeerd of ligt dit specifiek aan IE ? Naar mijn weten mag een ALT text in een URL niet voorkomen, maar alleen in een IMG tag. In een URL mag juist alleen de Title als gebruikte anchor voorkomen, maar weer geen ALT text. Wat is nu verkeerd?

[Manuel]

Het attribuut title is toegestaan bij de <img /> tag en het klopt dat de alt niet bij een URL kan worden neergezet, want de browser checkt niet of de URL wel of niet bestaat. Als het plaatje niet beschikbaar is komt pas de ALT in beeld voor zover ik weet.

Misschien is het makkelijker om je <img /> de title tag van je <a> element mee te geven, de title wordt dan sowieso weergegeven in IE / FF / andere browsers.

[Wolfboy]

Internet explorer handelt dit inderdaad niet correct af. De enige nette manier om het gedrag in IE en de andere browsers hetzelfde te krijgen is door zowel de alt als de title tag te gebruiken bij afbeeldingen.

[R4gnax]

Verwijderd schreef op woensdag 23 december 2009 @ 03:06:
Een vaag probleem met IE7 en hoger. IE7 schijnt de ALT text van een afbeelding te pakken en te weergeven als Title tag, terwijl de echte title tag genegeerd wordt.

In firefox en Chrome / opera is dit niet het geval. Stukje van de broncode:

code:

<li><a href="urlnaarsite/pagina/" title="De originele titel met mouseover"><img src="afbeelding.png" width="100" height="30" alt="ALT Text afbeelding" /></a></li>

Wat IE doet is eigenlijk heel logisch. Kijk nog maar eens goed naar je stukje broncode: de image tag ligt in de anchor tag genest. Als je dus boven de anchor gaat hangen en wacht op een tooltip oid, dan zul je óók altijd boven de image hangen. En dus 'wint' de alt text van je image van de title op je anchor.

[MoietyMe]

R4gnax schreef op woensdag 23 december 2009 @ 08:45:
[...]


Wat IE doet is eigenlijk heel logisch. Kijk nog maar eens goed naar je stukje broncode: de image tag ligt in de anchor tag genest. Als je dus boven de anchor gaat hangen en wacht op een tooltip oid, dan zul je óók altijd boven de image hangen. En dus 'wint' de alt text van je image van de title op je anchor.

alt != title

Als jij een alt op een img zet dan zal hij die tekst niet laten zien als je er met je muis overheen gaat. Dus wat je nu zegt is niet logisch.

[Bosmonster]

Tja, is een irritante IE bug met alt-tags die misbruikt worden als tooltips.

Enige dat je betrouwbaar kunt doen is de title van de anchor ook toevoegen als title van de img.

[R4gnax]

Good Fella schreef op woensdag 23 december 2009 @ 09:46:
[...]

alt != title

Als jij een alt op een img zet dan zal hij die tekst niet laten zien als je er met je muis overheen gaat. Dus wat je nu zegt is niet logisch.

In dat geval had Jism met een duidelijker voorbeeld moeten komen wat dan ook de case behandelt waar een img tag zowel een alt text als een title text heeft. Huidige voorbeeld is tamelijk misleidend.

[Bosmonster]

R4gnax schreef op woensdag 23 december 2009 @ 12:56:
[...]


In dat geval had Jism met een duidelijker voorbeeld moeten komen wat dan ook de case behandelt waar een img tag zowel een alt text als een title text heeft. Huidige voorbeeld is tamelijk misleidend.

Het voorbeeld is juist precies de case waar het fout gaat. De alt-tag die door IE foutief gebruikt wordt als tooltip overschrijft de title van de omliggende anchor die _wel_ correct als tooltip weergegeven zou moeten worden.

Een title op de img zetten is juist wat dit oplost. Mooi is het niet, want je moet de title dus dubbel gaan gebruiken, alleen om die IE-bug op te lossen. En semantisch gezien wil je die title misschien wel helemaal niet op die img.

[ Voor 12% gewijzigd door Bosmonster op 23-12-2009 13:14 ]

[Verwijderd]

Volgens mij is mijn bevinding nog steeds correct, en is IE7+ de boosdoener die er verkeerd mee omgaat. De ALT in een A HREF plaatsen zorgt voor een niet validerende stukje code. De ALT op de juiste manier invoeren zoals mijn voorbeeld al was wordt wel gewoon correct gezien bij W3C validator en weergeven in Firefox.

[Bosmonster]

Ja dat ligt aan IE, zoals al paar keer eerder gezegd...

En een alt-attribuut op iets anders dan een afbeelding slaat natuurlijk nergens op. Het gaat per slot van rekening om ALTernatieve tekst.

[ Voor 26% gewijzigd door Bosmonster op 23-12-2009 16:28 ]

[Verwijderd]

Dan heb ik dus op een website met IE7 of hoger een mouse-over de ALT text ipv de Title text wat natuurlijk knap lastig is.

[Raynman]

Want onderstaande is geen optie?

Bosmonster schreef op woensdag 23 december 2009 @ 09:51:
[...]

Enige dat je betrouwbaar kunt doen is de title van de anchor ook toevoegen als title van de img.

Manuel schreef op woensdag 23 december 2009 @ 04:25:
[...]

Misschien is het makkelijker om je <img /> de title tag van je <a> element mee te geven, de title wordt dan sowieso weergegeven in IE / FF / andere browsers.

[R4gnax]

Bosmonster schreef op woensdag 23 december 2009 @ 13:13:
[...]


Het voorbeeld is juist precies de case waar het fout gaat. De alt-tag die door IE foutief gebruikt wordt als tooltip overschrijft de title van de omliggende anchor die _wel_ correct als tooltip weergegeven zou moeten worden.

Nu ik er nog eens naar kijk valt het kwartje, Je hebt helemaal gelijk. Waar zat ik met mijn gedachten zeg...

Enige oplossing lijkt dan idd. te zijn om het title attribuut op de img tag te dupliceren. Als je dan écht een piet lut bent wat betreft je HTML markup, kun je nog een javascript 'fix' schrijven en die specifiek aan IE < 8 serveren. In jQuery krijg je dan bijvoorbeeld:

JavaScript:

$("[title] img[alt]").each(function(){
  $(this).attr("title", $(this).closest("[title]").attr("title"))
});