Schrift für Ansicht ohne aktives CSS

[Jaskars]

Hallo,

ich habe ein List als Navi und lege da mit css Hintergrundbilder rein und einen MouseOver-Effect:

  
a#angebot { background:url(bilder/angebot.gif); display:block; width:89px; height:33px; }  
a:hover#angebot { background:url(bilder/angebot_a.gif); }  

Danach habe ich im HTML noch Schrift beim Link eingefügt, für die gewünschte Barrierefreiheit:

  
<li><a href="angebot.htm" id="angebot">angebot</a></li>  

So. Als nächste habe ich die Schrift für alle Links im CSS auf 0px gesetzt um sie verschwinden zu lassen, da sie ja sonst über den Bildern liegt:

  
a { text-decoration:none; font-size:0px; border:0px; }  

Ok, so weit is auch alles toll - wenn da nicht der IE wäre. Jetzt liegt im IE an der Stelle wo die Schrift mit 0px ist, ein kleiner blauer Strich über dem Bild, der auch mit "text-decoration:none" und "border:0px" nicht weg geht.

Was kann denn das nun wieder sein???

[ChrisB]

Hi,

Ok, so weit is auch alles toll - wenn da nicht der IE wäre. Jetzt liegt im IE an der Stelle wo die Schrift mit 0px ist, ein kleiner blauer Strich über dem Bild, der auch mit "text-decoration:none" und "border:0px" nicht weg geht.

Was du offenbar brauchst bzw. suchst, ist eine sog. image replacement Technik, die vorhandenen Textinhalt durch ein Hintergrundbild ersetzt. Dazu gibt es einige Ansaetze, die mit ihren jeweiligen Vor- und Nachteilen bspw. hier beschrieben werden: http://meiert.com/de/publications/articles/20050513/

Was das ganze jetzt eigentlich mit dem "ohne aktives CSS", dass du im Titel verwendet hast, zu tun haben soll, würde mich jetzt allerdings schon noch interessieren ...

MfG ChrisB

[Jaskars]

Was das ganze jetzt eigentlich mit dem "ohne aktives CSS", dass du im Titel verwendet hast, zu tun haben soll, würde mich jetzt allerdings schon noch interessieren ...

Danke für die Antwort. Die Replacement-Technik funktioniert ja soweit auch.
Die sache ist die: wenn ich jetzt im Link nur ein Hintergrundbild habe, das über CSS gewechselt wird und keinen Text in der HTML-Datei, gibt es ohne CSS kein Menü zum navigieren, da die Links im reinen HTML ja nichts enthalten. Das Bild wird ja im Hintergrund über CSS eingebunden. Deshalb würde ich gern Schrift in den Link der HTML-Datei mit einfügen, aber quasi versteckt - so dass ohne CSS dann einfach eine eine ganz normale Text-Navi erscheint und somit barrierefrei wird.

[Auge]

Hallo

Danke für die Antwort. Die Replacement-Technik funktioniert ja soweit auch.

Offensichtlich nicht, wie gewünscht.

Die sache ist die: wenn ich jetzt im Link nur ein Hintergrundbild habe, das über CSS gewechselt wird und keinen Text in der HTML-Datei, gibt es ohne CSS kein Menü zum navigieren, da die Links im reinen HTML ja nichts enthalten. Das Bild wird ja im Hintergrund über CSS eingebunden. Deshalb würde ich gern Schrift in den Link der HTML-Datei mit einfügen, aber quasi versteckt - so dass ohne CSS dann einfach eine eine ganz normale Text-Navi erscheint und somit barrierefrei wird.

Na denn mach das doch. Chris' Link beschreibt die funktionierenden Techniken.

Tschö, Auge

[Jaskars]

So, ich hab jetzt eine Möglichkeit gefunden.
Ich habe die Schrift in der Navi einfach in ein zusätzliches Span-Element gepackt:

  
<li><a href="angebot.htm" id="angebot"><span class="navtext">angebot</span></a></li>  

und diesem dann im CSS die Eigenschaft "visibility:hidden" verpasst:

  
a span.navtext { visibility:hidden; }  

Damit verschwindet der Text komplett mit CSS AUCH IM IE (!), und ohne CSS habe ich meine reinen Texte in der Navi stehen, und jeder Screenreader kann sie erkennen.

[Auge]

Hallo

So, ich hab jetzt eine Möglichkeit gefunden.
Ich habe die Schrift in der Navi einfach in ein zusätzliches Span-Element gepackt:

<li><a href="angebot.htm" id="angebot"><span class="navtext">angebot</span></a></li>

>   
> und diesem dann im CSS die Eigenschaft "visibility:hidden" verpasst:  
> ~~~css
  

> a span.navtext { visibility:hidden; }  
> 

Damit verschwindet der Text komplett mit CSS AUCH IM IE (!), und ohne CSS habe ich meine reinen Texte in der Navi stehen, und jeder Screenreader kann sie erkennen.

Nu guck einer schau. :-)

Tschö, Auge