✔ Hintergrundbilder (Buttons) verschwinden mit text-decoration:none

[Sumisu]

Hintergrundbild (Button) verschwindet mit text-decoration:none :-(

Hallo ihr!

Bin noch nicht gerade lang bei CSS, vorsichtig ausgedrückt.

Habe eine ganz einfache HTML-Site geschrieben mit externer CSS-Datei.
Habe in einer stinknormalen Tabelle *seufz - ich lerne noch* Bilder eingefügt.
Habe als Buttons Hintergrundbilder verwendet mit RollOver-Effekt durch CSS.
Nun wird, auf jedem Bild eine kurze Linie dargestellt. Um das auszustellen,
setze ich in der CSS-Datei bei a dann text-decoration:none ein, die Linien
verschwinden zwar, aber dafür auch (bis auf einen kleinen Ausschnitt) die
Hintergrundbilder, die dort als Links platziert sind. Es funktioniert auch, aber
die Bilder sind eben so gut wie nicht mehr zu sehen.
Im IE funktioniert´s, wie ich will, aber was nützt das mir, wenn sonst in keinem
anderen Browser die Links dargestellt sind...?! Nicht in Opera, nicht in
Netscape, nicht in Firefox.
___________________________________________________________________

CSS-Datei:
°°°°°°°°°°°°°

  a {   text-decoration:none;
  	 height:67px;
         width:84px;
         }



  a.kreativ {
 	background:url(bilder/kreativ_xs_sw.gif) no-repeat;
         }

  a.kreativ:hover {
	background:url(bilder/kreativ_xs_rollov.gif) no-repeat;
         }



  a.lupe {
  	background:url(bilder/lupe_xs_sw.gif) no-repeat;
         }

  a.lupe:hover {
  	background:url(bilder/lupe_xs_rollov.gif) no-repeat;
         }



  a.aktiv {
  	background:url(bilder/aktiv_xs_sw.gif) no-repeat;
         }

  a.aktiv:hover {
  	background:url(bilder/aktiv_xs_rollov.gif) no-repeat;
         }



  a.mich {
  	background:url(bilder/mich_xs_sw.gif) no-repeat;
         }

  a.mich:hover {
  	background:url(bilder/mich_xs_rollov.gif) no-repeat;
         }



  a.pfeile {
  	background:url(bilder/pfeile.gif) no-repeat;
         height:32px;
         width:95px;
         }

  a.pfeile:hover {
  	background:url(bilder/pfeile_rollov.gif) no-repeat;
         }

___________________________________________________________________

Kann sein, dass das alles hier für Euch ziemlich laienhaft klingt , aber
ich habe keine Ahnung, wie ich diese Bilder sonst wieder sichtbar bekomme.

Habe hier übrigens alles schon durchgegrast, aber nichts gefunden, was mir
weiterhelfen könnte...

Ich fände es klasse, wenn mir jemand von Euch weiterhelfen kann...

 

[Dr Dau]

Hallo!

Versuch es mal so:

a { text-decoration:none; 
	 height:67px; 
	 width:84px; 
	 } 
 
.kreativ a { 
	 background:url(bilder/kreativ_xs_sw.gif) no-repeat; 
	 } 
 
.kreativ a:hover { 
	 background:url(bilder/kreativ_xs_rollov.gif) no-repeat; 
	 } 
 
.lupe a { 
	 background:url(bilder/lupe_xs_sw.gif) no-repeat; 
	 } 
 
.lupe a:hover { 
	 background:url(bilder/lupe_xs_rollov.gif) no-repeat; 
	 } 
 
.aktiv a { 
	 background:url(bilder/aktiv_xs_sw.gif) no-repeat; 
	 } 
 
.aktiv a:hover { 
	 background:url(bilder/aktiv_xs_rollov.gif) no-repeat; 
	 } 
 
.mich a { 
	 background:url(bilder/mich_xs_sw.gif) no-repeat; 
	 } 
 
.mich a:hover { 
	 background:url(bilder/mich_xs_rollov.gif) no-repeat; 
	 } 
 
.pfeile a { 
	 background:url(bilder/pfeile.gif) no-repeat; 
	 height:32px; 
	 width:95px; 
	 } 
 
.pfeile a:hover { 
	 background:url(bilder/pfeile_rollov.gif) no-repeat; 
	 }

Könnte aber auch so sein:

a { text-decoration:none; 
	 height:67px; 
	 width:84px; 
	 } 
 
.kreativ:link { 
	 background:url(bilder/kreativ_xs_sw.gif) no-repeat; 
	 } 
 
.kreativ:hover { 
	 background:url(bilder/kreativ_xs_rollov.gif) no-repeat; 
	 } 
 
.lupe:link { 
	 background:url(bilder/lupe_xs_sw.gif) no-repeat; 
	 } 
 
.lupe:hover { 
	 background:url(bilder/lupe_xs_rollov.gif) no-repeat; 
	 } 
 
.aktiv:link { 
	 background:url(bilder/aktiv_xs_sw.gif) no-repeat; 
	 } 
 
.aktiv:hover { 
	 background:url(bilder/aktiv_xs_rollov.gif) no-repeat; 
	 } 
 
.mich:link { 
	 background:url(bilder/mich_xs_sw.gif) no-repeat; 
	 } 
 
.mich:hover { 
	 background:url(bilder/mich_xs_rollov.gif) no-repeat; 
	 } 
 
.pfeile:link { 
	 background:url(bilder/pfeile.gif) no-repeat; 
	 height:32px; 
	 width:95px; 
	 } 
 
.pfeile:hover { 
	 background:url(bilder/pfeile_rollov.gif) no-repeat; 
	 }

Gruss Dr Dau

 

[Maik]

Du musst die Weiten- und Höhenangabe den Links mit Hintergrundbild zuordnen:

a.kreativ
{ 
background:url(bilder/kreativ_xs_sw.gif) no-repeat; 
height:67px; 
width:84px; 
} 

a.lupe
{ 
background:url(bilder/lupe_xs_sw.gif) no-repeat; 
height:67px; 
width:84px; 
} 

a.aktiv
{ 
background:url(bilder/aktiv_xs_sw.gif) no-repeat; 
height:67px; 
width:84px; 
} 

a.mich
{ 
background:url(bilder/mich_xs_sw.gif) no-repeat; 
height:67px; 
width:84px; 
}

 

[Sumisu]

... Mittlerweile habe ich rausgefunden, dass das Problem
doch nicht mit dem text-decoration:none zu tun hat ...
sorry, mein Fehler ...

Trotzdem bleibt es weiter bestehen, von den Links wird nach wie
vor nur ein Bruchteil dargestellt.
Habe das HTML und CSS validiert, alles okay. Habe es mit
Höhenangaben zum a versucht, auch die anderen Sachen,
die ihr mir geraten habt, aber nichts funktioniert.



Mein Freund macht das im Grunde genau gleich, macht a's mit
Hintergrundbildern und gibt Höhe und Breite an. Bei ihm geht's
komischerweise.



Habe mal 'ne Testseite hochgeladen - könnt ihr die mal
anschauen? Im IE geht sie, da kann man sehen, wie's aussehen
soll. Firefox + Opera wollen einfach nicht ... *nerv*

Wäre toll wenn mal jemand drüberschaut - hält mich ziemlich
auf das Ganze.

 

[Dr Dau]

CSS

a {
text-decoration: none;
display: block;
}

Wirkt sich dann aber auf alle Links aus, oder Du setzt das display:block bei der Klasse zu dem Bildlink.

 

[Maik]

Noch ein Tip zu deinem HTML-Source: das schliessende </link> -TAG gibt es nicht.

<link rel="stylesheet" type="text/css" href="bewerbung_01.css" />

Wie Dr Dau schon richtig erwähnte, musst du display:block für die Links notieren.

 

[Dr Dau]

Noch ein Tip zu deinem HTML-Source: das schliessende </link> -TAG gibt es nicht.

Ups, dass ist mir so garnicht aufgefallen, ich hatte mich nur auf Link beschränkt (dass war ja das eigentliche Problem).... aber die Seite ist ja eh nur ein minimierter Beispielcode gewesen.
Spätestens beim validieren währe es ja aufgefallen.

 

[Maik]

Ups, dass ist mir so garnicht aufgefallen, ich hatte mich nur auf Link beschränkt (dass war ja das eigentliche Problem)....

Wie heisst es doch: vier Augen sehen mehr, als zwei ;-]

 

[Sumisu]

KLASSE !

Danke für die Info - jetzt funktioniert´s überall!

Mit <link></link> (also mit End-Tag) validiert
es aber nach W3 ohne Probleme...

Hatte ja vorher wie gesagt schon validieren lassen.

 

[Dr Dau]

Wie Michael schon geschrieben hat müsste es trotzdem

<link rel="stylesheet" type="text/css" href="bewerbung_01.css" />

heissen und nicht

<link rel="stylesheet" type="text/css" href="bewerbung_01.css"></link>

Schau mal auf das Ende.

[edit] Irgendwie ist auf den Validator eh kein Verlass, so macht er z.b. aus:

table.overview td {
border:2px;
border-style:solid;
border-color:#444444;
background-color:#EFEFEF;
}

dieses hier:

table.overview td {
border : 2px none inherit; 
border-style : solid; 
border-color : #444444; 
background-color : #efefef; 
}

[/edit]