nicht angemeldet
Opera, Links, display:block, underline
Gute Abend,
ich habe in einer Navigation mit HTML401/Trans und CSS2, beides zu 100% validiert, folgendes Problem:
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: inline;
cursor : pointer;
padding-bottom: 0px; padding-left: 2px; padding-right: 2px; padding-top: 0px;
margin-bottom : 2px; margin-left : 0px; margin-right : 0px; margin-top : 0px;
}
Es klappt im IE6, im NS6 einwandfrei. Opera klappt auch, mit nur einer Macke: Opera 6.01 macht die Links ÜBERstrichen statt UNTERstrichen.
Ich hab nun in der Dokomentation vom Opera gewühlt und ein bisserl gegockelt, und bin letztlich auf einen Links gestossen, der das als Fehler im Opera ausweisen:
http://ecoculture.com/styleguide/r/rollovers.html
Nun meine Frage(n): Kennt das jemand von Euch? Kann das jemand nachvollziehen? Gibt es einen nicht zu aufwendigen Workaround?
Danke :)
Thoralf
PS.: Ich hab jetzt 3h mit dem Sch*** zugebracht und das erste Mal ist das Vertrauen in meinen Opera erschüttert. ;)
-
Das kommt davon *seufz*
width: 135px;
display: inline;Hier steht natürlich display:block, das war ein C&P aus der Bastelei.
cursor : pointer;
a.navigation:hover {
color : #FFE000;
text-decoration : underline;
}
a.navigation:active {
color : #FF0000;
text-decoration : underline;
}Die beiden seien der Vollständigkeit nachgeliefert.
Nochmal danke fürs Lesen und Grübeln. ;)
-
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-
Hallo Orlando, wieder mal schnelle und kundige Hilfe, danke :)
Ja. Ja.
Gut, das beruhigt.
Gibt es einen nicht zu aufwendigen Workaround?
Ja.Nochmal gut. ;)
*räusper* Du kannst statt text-decoration:underline auch einen border-bottom definieren.
Werd ich mal probieren, wie das wirkt und was der Rest des Teams dazu sagt.
Übrigens lassen sich viele Angaben abkürzen (ich habe das oben gemacht):
Ist bekannt, hab aber mit Absicht wieder auseinander gefummelt, da mein Opera bei einigen margin-Angaben mit den 'Einzeilern' aus unerfindlichen Gründen Probleme hatte. Kleine verschobene Pixel, aber die stören meinen Perfektionismus. Mit margin-bottom etc. geht das problemlos.
Bei der border-Definition muss man die zusätzlichen Eigenschaften dann aufteilen. BTW, der Vali wird die fehlende Hintergrundfarbe bei hover/active bemängeln.
Hat er schon, die war da auch schon drin, ist beim Basteln wieder geflogen und kommt in der Endfassung wieder rein. Da geht das Ding eh nochmal durch den Vali. :)
... 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... ;)Ach menno, ich will aber! *stampf* ;) ;)
Gruss & Dank, Thoralf
-
Hi Orlando,
Übrigens lassen sich viele Angaben abkürzen (ich habe das oben gemacht):
bla { definition: oben rechts unten links ; }Du weißt aber, daß sich wiederholte gleiche Strings phantastisch
komprimieren lassen? ;-)Viele Grüße
<img src="http://www.schroepl.net/projekte/gzip_cnc/gzip_cnc.gif" border=0 alt=""> Michael-
Hi Michael,
bla { definition: oben rechts unten links ; }
Du weißt aber, daß sich wiederholte gleiche Strings phantastisch
komprimieren lassen? ;-)ja natürlich, aber die entpackte Information verbrät dann unnötig viele Register in meinem Kopf. Wann kommt denn gzip_brain? Dann sollten wir auch über beautifycode_cnc reden. ;)
LG Orlando
--
SELF-TREFFEN 2002
http://www.rtbg.de/selftreffen/
http://www.megpalffy.org/temp/penneninhh.html
-
-