Orlando: Opera, Links, display:block, underline

Beitrag lesen

Hi Thoralf,

ich habe in einer Navigation mit HTML401/Trans und CSS2, beides zu 100% validiert, folgendes Problem:

Opera 6.01 macht die Links ÜBERstrichen statt UNTERstrichen.
Nun meine Frage(n): Kennt das jemand von Euch? Kann das jemand nachvollziehen?

Ja. Ja.

Gibt es einen nicht zu aufwendigen Workaround?

Ja.

*räusper* Du kannst statt text-decoration:underline auch einen border-bottom definieren.

<style type="text/css">
<!--
a.navigation, a.navigation:link, a.navigation:visited {
  font-size:12px;
  color: #ff8000;
  background-image: url(/grafiken/hintergrund_orange.gif);
  background-repeat: repeat;
  background-color: #631800;
  text-decoration: none;
  width: 135px;
  display: block;
  cursor: pointer;
  padding: 0 2px 0 2px;
  margin: 0 0 2px 0;
  border-width: 0 0 1px 0;   /* hier der Rahmen */
  border-color: #631800;
  border-style: solid;
}

a.navigation:hover {
  color: #ffe000;
  border-width: 0 0 1px 0;   /* hier der Rahmen */
  border-color: #ffe000;
  border-style: solid;
}
a.navigation:active {
  color: #f00;
  border-width: 0 0 1px 0;   /* hier der Rahmen */
  border-color: #f00;
  border-style: solid;
}
-->
</style>

Nicht gerade die feine englische Art, aber es wirkt. Der einzige Unterschied besteht darin, dass jetzt die gesamte Breite der Navigation beim hovern unterstrichen wird. Allerdings kannst du das Aussehen des Rahmens anpassen, text-decoration nicht.

Übrigens lassen sich viele Angaben abkürzen (ich habe das oben gemacht):

bla { definition: oben rechts unten links ; }

Bei der border-Definition muss man die zusätzlichen Eigenschaften dann aufteilen. BTW, der Vali wird die fehlende Hintergrundfarbe bei hover/active bemängeln.

... und das erste Mal ist das Vertrauen in meinen Opera erschüttert. ;)

That's life, das kommt in den Untiefen der CSS-Spezifikationen gelegentlich vor... ;)

LG Orlando

--
SELF-TREFFEN 2002
http://www.rtbg.de/selftreffen/
http://www.megpalffy.org/temp/penneninhh.html