"MouseOver"-Effekt mit CSS geht im Safari nicht

Micha1108

Aktives Mitglied
Thread Starter
Dabei seit
04.10.2004
Beiträge
342
Reaktionspunkte
1
Hallo Webdesigner,

ich habe ein Problem mit CSS unter Safari: Mit der Definition

a.nav_home {width:160px; height:20px;}
a.nav_home:hover {background: url(images/nav_home_on.jpg);}

a.nav_news {width:160px; height:24px;}
a.nav_news:hover {background: url(images/nav_news_on.jpg);}

a.nav_bio {width:160px; height:22px;}
a.nav_bio:hover {background: url(images/nav_bio_on.jpg);}

usw. definiere ich für jeden Button ein "MouseOver"-Bild, das erscheinen soll, wenn man mit der Maus über die Tabellenzelle fährt. Die html-Seite sieht so aus:

<tr>
<td width="80" height="20" background="images/nav_home.jpg">
<a href="home.htm" class="nav_home"></a>
</td>
</tr>
<tr>
<td width="80" height="24" background="images/nav_news.jpg">
<a href="news.htm" class="nav_news"></a>
</td>
</tr>
<tr>
<td width="80" height="22" background="images/nav_bio.jpg">
<a href="bio.htm" class="nav_bio"></a>
</td>
</tr>

Unter Windows IE funktioniert das problemlos. Unter Safari sieht man weder einen Link, noch erscheint das MouseOver-Bild. Was mache ich falsch? Kann es sein, dass Safari die CSS-Stile nicht versteht?

Ich war ursprünglich von der Lösung total begeistert, da man komplett auf JavaScript verzichten kann! Nur wenn man's unter MacOS nicht sieht, nutzt es wenig...

Vorab schonmal vielen Dank für Eure Hilfe,
Micha
 
CSS versteht Safari auf jeden Fall! Daran kanns also nischt liegen!
Warum bindest Du die Rollover Effekte denn nicht direkt in die Tabelle ein? Soviel Arbeit mehr ist das doch auch nicht...
 
natürlich versteht safari auch css. nimm das als beispiel:

quellcode:

Code:
<div class="nav">
<ul id="nav">
<li id="Link1"><a href="#" title="Link1">Link1</a></li>
<li id="Link2"><a href="#" title="Link2">Link2</a></li>
<li id="Link3"><a href="#" title="Link3">Link3</a></li>
<li id="Link4"><a href="#" title="Link4">Link4</a></li>
</ul>
</div>

CSS:

Code:
.nav 			{
	margin-left: 494px;
	position: relative;
	width: 260px;
	height: 30px;
}

 #nav 			{
	position: absolute;
	top: 26px;
	list-style: none;
	margin: 0;
	padding: 0;
	height: 20px;

 display: inline;
	overflow: hidden;
	width: 260px;
}

 
 #nav li 			{
	margin: 0; 
	padding: 0;
	display: inline;
	list-style-type: none;
	}

 #nav a 			{
	float: left;
	padding: 20px 0 0 0;	
	overflow: hidden;
	height: 0px !wichtig;  height /**/:20px; /* für IE5/Win */;

}

 #nav a:hover	{
	background-position: 0 -20px;
	}

 #nav a:active, #nav a.selected {
	background-position: 0 -40px;
	}


 #Link1 a 	{
	width: 65px;
	background: url(pixel/pixel1.gif) top left no-repeat;
	}

 #Link2 a  		{
	width: 65px;
	background: url(pixel/pixel2.gif) top left no-repeat;
	}

#Link3 a  		{
	width: 65px;
	background: url(pixel/pixel3.gif) top left no-repeat;
	}

#Link4 a  		{
	width: 65px;
	background: url(pixel/pixel4.gif) top left no-repeat;
	}
 
Hi,

vielen Dank für Eure Antworten. Leider habe ich gerade erst angefangen, mich mit CSS zu beschäftigen. In den Beispielen von HAL wird #link1, #link2 usw. verwendet und mit id's gearbeitet. Wie kann ich das in meinem Code umsetzen bzw. was bewirkt das? Bitte nochmal um Eure Hilfe :(

Micha
 
Zuletzt bearbeitet von einem Moderator:
Micha1108 schrieb:
Hi,

vielen Dank für Eure Antworten. Leider habe ich gerade erst angefangen, mich mit CSS zu beschäftigen. In den Beispielen von HAL wird #link1, #link2 usw. verwendet und mit id's gearbeitet. Wie kann ich das in meinem Code umsetzen bzw. was bewirkt das? Bitte nochmal um Eure Hilfe :(

Micha

Dr. Web sagt uns:

"Einfach ausgedrückt ist eine Klasse (.class) allgemeiner zu handhaben. Sie
kann auf einer Seite mehrfach angewendet werden und beliebig oft
vorkommen."

"IDs hingegen sind spezieller. Sie dürfen nur einmal auftauchen, gelten aber
in der CSS-Hierarchie als gewichtiger. Das heisst, im Notfall, wenn eine
Klasse nicht zur Geltung kommen will, hat man mit einer ID bessere
Chancen."

Mehr dazu auf dieser Seite. :)
 
Nochmal Danke für Eure Hilfeversuche. An den CSS-Fähigkeiten von Safari hab ich nie gezweifelt, eher an meinen :-(

Hab's jetzt mit id's probiert - geht immer noch nicht. Was ist falsch an:

#nav_bio a {width:160px; height:20px;}
#nav_bio a:hover {background: url(images/nav_bio_on.jpg);}

und im HTML-Code:

<tr><td width="160" height="22" background="images/nav_bio.jpg"><a href="bio.htm" id="nav_bio"></a></td></tr>

?
Micha, der Gefrustete
 
Ich habe schon eine ganze Weile nix mehr mit CSS gemacht, aber meiner bescheidenen Meinung nach müßte es nicht

a.nav_bio bzw. a.nav_bio:hover

heißen, statt

#nav_bio a bzw. #nav_bio a:hover

No.
 
Hi Norbi,

es geht weder mit classes noch mit id's - und das nur unter Safari. MS IE zeigt ausnahmsweise mal das gewünschte Ergebnis tadellos an :-(

Muss an etwas anderem liegen...
 
Micha1108 schrieb:
Nochmal Danke für Eure Hilfeversuche. An den CSS-Fähigkeiten von Safari hab ich nie gezweifelt, eher an meinen :-(

Hab's jetzt mit id's probiert - geht immer noch nicht. Was ist falsch an:

#nav_bio a {width:160px; height:20px;}
#nav_bio a:hover {background: url(images/nav_bio_on.jpg);}

und im HTML-Code:

<tr><td width="160" height="22" background="images/nav_bio.jpg"><a href="bio.htm" id="nav_bio"></a></td></tr>

?
Micha, der Gefrustete

Wenn man's raus hat ist es ganz einfach:

Die so genannten Selektoren funktionieren nur in der Reihenfolge der Nennung. Wenn Du also im CSS-Definitionsbereich sagst "#nav_bio a", dann muss auch im HTML-Quelltext die gleiche Reihenfolge wiederkehren, damit es geht.

Ich vereinfache Deinen Code mal ein wenig:
Code:
<style>
#nav_bio { background: url('images/nav_bio.jpg'); }
#nav_bio a { text-decoration: none; }
#nav_bio a:hover { background: url('images/nav_bio_on.jpg'); }
</style>
<div id="nav_bio">
    <a href="bio.htm">Wer hier klickt, kommt zu Bios Bahnhof</a>
</div>

Dies wird deshalb funktionieren, weil die Reihenfolge [nav]->[a] im Style-Sheet definiert wurdel, und nicht umgekehrt.

Ansonsten: Christopher Schmitt: CSS Kochbuch, O'Reilly, 32,-
 
Hi Hilarious,

tausend Dank für den Tipp!!! Ich hab's nochmal ein bisschen angeändert, weil ja kein Text im <a> Tag stehen soll (einfach display:block eingefügt, dann gings wieder). Also EIN Button tut's jetzt tatsächlich. Wenn ich mittlerweile keine Biers drin hätte, würde ich das für alle anderen Buttons plus Auslagern der CSS-Info zurück in meine css-Datei noch ausprobieren. Weil aber nicht, mach ich das morgen ;-)

Und ich kann es nur wieder wiederholen: Dieses Forum ist Spitze!!!! Danke an alle, die mir mit ihrer Antwort weitergeholfen haben.

Micha, nicht-mehr-frustriert-aber-blau
 
Prost!

Am besten fügst Du, selbst wenn in Deiner Tabellenzelle kein Text erscheinen soll, wenigsten ein "hartes" Leerzeichen ein, damit alle Browser diese Zelle klaglos anzeigen. Denn eigentlich müssen Browser leere Tabellenzellen nicht anzeigen (manche tun's trotzdem, aber müssen müssen die das nich). Also so:

<a href='#Lalelu'>&nbsp;</a>

Schlaf Dich aus... ;)
 
Bis noch wach, Hil...

dann klappt es aber mit der Anordnung der Zellen nicht mehr, warum auch immer. Also die zelle muss komplett leer sein, sonst verschieben sich die Bitmaps, trotz Größenangaben. Hmm, alles Dinge, die ich morgen angehen werde...

Dennoch Danke für den Hinweis. Werde mich darum kümmern. Vermutlich läuft's am Ende mit IE nicht mehr, gröhl :)

Micha und weg
 
Hilarious schrieb:
...Die so genannten Selektoren funktionieren nur in der Reihenfolge der Nennung. Wenn Du also im CSS-Definitionsbereich sagst "#nav_bio a", dann muss auch im HTML-Quelltext die gleiche Reihenfolge wiederkehren, damit es geht...

Das habe ich ja noch nie gehört. Und falls das wirklich so sein sollte, sind eigentlich alle Browser fehelertolerant genug das nicht zu machen.
Ich habe des öfteren CSS-Dateien (Einbindung per link) in denen zig IDs ziemlich wahllos, und mitnichten in der gleichen Reihenfolge der Referenzierung im HTML-Dokument stehen, und es werden trotzdem alle korrekt dargestellt.

Grüße,
Flo
 
Micha1108 schrieb:
Bis noch wach, Hil...

dann klappt es aber mit der Anordnung der Zellen nicht mehr, warum auch immer. Also die zelle muss komplett leer sein, sonst verschieben sich die Bitmaps, trotz Größenangaben. Hmm, alles Dinge, die ich morgen angehen werde...

Dennoch Danke für den Hinweis. Werde mich darum kümmern. Vermutlich läuft's am Ende mit IE nicht mehr, gröhl :)

Micha und weg

Ja, vermutlich :)

Schön, wenn's klappt!. Dein Zellenproblem könntest Du natürlich dadurch bearbeiten, dass Du die Zeilenhöhe (und damit die Zeilenhöhe des Leerzeichens) auf, sagen wir mal 2px setzt. ;) Nicht astrein aber vielleicht passt es.
 
Hi Hil,

habe mittlerweile die Navigation komplett. Funktioniert superklasse! Herzlichen Dank für die Hilfe! clap

Einziger Wehrmutstropfen bleibt das Gezucke der MouseOver-Buttons-Bilder. Die müsste man eigentlich preloaden. Um nicht wieder auf Jacascript zurückgreifen zu müssen, hab ich sie einfach alle mit Höhe und Breite gleich Null in die erste Seite gesetzt. Keine Ahnung, ob man das machen darf, aber das ist eine andere Geschichte und soll in einem anderen Fred erzählt werden... :D
 
Das könnte gehen, aber eine etwas stärkerer Effekt wird bei MSIEs bleiben. Der will solche Bilder nämlich gar nicht ohne weiteres cachen.

Wenn Du demnach auf JavaScript verzichten möchtest, könntest Du noch die Bilder zuvor auch anderen Klassen oder IDs zuweisen.

Im Beispiel:

- navi_li.gif
- navi_li_hi.gif

Diese beiden Bilder sollen für die a:hover-Effekte genutzt werden. Nach meiner Erfahrung hilft es ein wenig, diese Bilder am Anfang des StyleSheets zusätzlich zu referenzieren:
Code:
<style>
#navi
/* Erst die Bilder, die man im zweiten Schritt braucht */
#navi .eimer {background: url('navi_bilder/navi_li_hi.gif');}
#navi .eimer {background: url('navi_bilder/navi_re_hi.gif');}

/* Jetzt die Default-Bilder */
#navi .eimer {background: url('navi_bilder/navi_li.gif');}
#navi .eimer {background: url('navi_bilder/navi_re.gif');}

/* Jetzt der Rest */
#navi .eimer a { ....

Dadurch wird der Browser ein wenig in die Richtung getreten, die man sonst (früher) per JavaScript zuvor in einzelne Objekte gesteckt hat, damit diese schon mal im Speicher waren.

Beim MSIE 6 habe ich damit ganz gute Erfahrungen gemacht. Nichtsdestrotrotz solltest Du sämtlich Grafiken, die Du per a:hover austauscht sehr klein sein, um solche Effekte auch ohne "Pre-Loading" vermeiden zu können (Es soll ja auch Opera-Nutzer geben...).
 
Moin Hilarious,

wir bewegen uns hier zwar schon sehr offtopic, aber ich habe Deinen Rat wieder befolgt. Tausend Dank. Aus mir wird noch mal ein richtiger guter CSSer :D

Das Flackern ist völlig weg! Im IE hab ich's noch nicht probiert. Der Bildaufbau geht flüssiger als meine erste Lösung. Also ein echter Erfolg! Und auch viel sauberer gecoded als vorher. Danke!!! :)
 
Abschließend noch ein paar Tipps für die, die's auch so machen wollen:

1. Im Safari sind die Buttons nur anwählbar, wenn in der CSS-Datei "display:block" gesetzt ist. Beim IE ist das egal

2. Der legendäre IE kommt mit den Tabellenzeilen völlig durcheinander, wenn diese unterschiedlich hoch sind. Das merkt man dann am Springen der Buttons. Nachdem ich alle Buttons gleich hoch gemacht habe, gings wieder :rolleyes:

3. IE kommt auch dann völlig durcheinander mit den Höhen, wenn die Zellen, in denen die Buttons liegen, nicht vollständig leer sind :rolleyes: Selbst harte Leerzeichen zerstören das Bild

Falls es keinen interessiert, auch egal, aber ich habe jetzt ne neue Möglichkeit gefunden, den Bildwechsel von Buttons ganz ohne javascript hinzukriegen. Und das mach ich total oft und gerne... :D

Nochmals Danke an alle, die mir bis hierhin geholfen haben.
Micha
 
Micha1108 schrieb:
Abschließend noch ein paar Tipps für die, die's auch so machen wollen:

1. Im Safari sind die Buttons nur anwählbar, wenn in der CSS-Datei "display:block" gesetzt ist. Beim IE ist das egal

2. Der legendäre IE kommt mit den Tabellenzeilen völlig durcheinander, wenn diese unterschiedlich hoch sind. Das merkt man dann am Springen der Buttons. Nachdem ich alle Buttons gleich hoch gemacht habe, gings wieder :rolleyes:

3. IE kommt auch dann völlig durcheinander mit den Höhen, wenn die Zellen, in denen die Buttons liegen, nicht vollständig leer sind :rolleyes: Selbst harte Leerzeichen zerstören das Bild

Falls es keinen interessiert, auch egal, aber ich habe jetzt ne neue Möglichkeit gefunden, den Bildwechsel von Buttons ganz ohne javascript hinzukriegen. Und das mach ich total oft und gerne... :D

Nochmals Danke an alle, die mir bis hierhin geholfen haben.
Micha

Da schwör ich doch auch weiterhin auf klassischen HTML-Tabellensatz - dann klappt's auch mit dem Nachbarn ! ;)
 
Zurück
Oben Unten