🌶

Gearchiveerde post van float.be

CSS tip: negatieve text-indent in links

Firefox gebruikers weten vast en zeker dat bij het aanklikken van een link er een dotted border rond de link verschijnt.

Als je image-replacement toepast op een link, aan de hand van een negatieve text-indent (Phark methode), dan zie je zo’n border verschijnen over de hele negatieve breedte, zoals op volgende websites:

Dit is echter heel simpel te vermijden:

  h1 a {
    text-indent: -999em;
    overflow: hidden;
  }

De overflow: hidden; zorgt ervoor dat die border slechts beperkt blijft tot het gewenste klikbare gedeelte.

Gerelateerde artikels

Reacties

  • Dieter

    Heeft zo’n dotted border eigenlijk wel een meerwaarde vraag ik mij af? Ik vind persoonlijk dat het beter en vooral mooier is om die volledig te verbergen aan de hand van outline: 0;. Of zondig ik hier tegen enkele toegankelijkheidsprincipes?

  • Davy

    Je kan hem inderdaad verbergen via outline: none;, maar ik heb dat niet vermeld omdat het nu eenmaal standaard Firefox behavior is, en de gebruiker vaak dan zo’n dingen verwacht. Het heeft dan waarschijnlijk ook consequenties voor toegankelijkheid, omdat die border ook getoond wordt wanneer je met de tab van de ene link naar de andere springt.

  • Dieter

    Ik geef je volledig gelijk, outline: 0; is dan uit den boze. ;-)

  • Arjan

    Inderdaad, de outline verwijderen zorgt voor een slechtere toegankelijkheid voor toetsenbordgebruikers. Let er wel op dat, als je afbeeldingen uitschakelt, er niets meer te zien is? Dit kan je oplossen door een betere image replacement methode te gebruiken. Sowieso voor logo’s zou ik deze gewoon met een img-element in de pagina opnemen.