"MouseOver"-Effekt mit CSS geht im Safari nicht

  1. Micha1108

    Micha1108 Thread StarterMacUser Mitglied

    Mitglied seit:
    04.10.2004
    Beiträge:
    337
    Zustimmungen:
    0
    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
     
    Micha1108, 11.03.2005
  2. Alex18091982

    Alex18091982MacUser Mitglied

    Mitglied seit:
    28.07.2003
    Beiträge:
    323
    Zustimmungen:
    1
    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...
     
    Alex18091982, 11.03.2005
  3. HAL

    HAL

    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;
    	}
    
    
     
  4. Micha1108

    Micha1108 Thread StarterMacUser Mitglied

    Mitglied seit:
    04.10.2004
    Beiträge:
    337
    Zustimmungen:
    0
    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
     
    Micha1108, 11.03.2005
  5. Hilarious

    HilariousMacUser Mitglied

    Mitglied seit:
    25.11.2004
    Beiträge:
    2.161
    Zustimmungen:
    5
    Klar kann Safari das. Sogar besser als der MSIE, der die Hintergrundbilder häufig nicht cachen möchte und ständig nachladen muss. Zum Beispiel buch.de (Navigationsleiste), Apple (Navigation in der Mitte). Bei beiden finden sich sicher noch jede Menge weitere Beispiele.
     
    Hilarious, 11.03.2005
  6. HAL

    HAL

    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. :)
     
  7. Micha1108

    Micha1108 Thread StarterMacUser Mitglied

    Mitglied seit:
    04.10.2004
    Beiträge:
    337
    Zustimmungen:
    0
    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
     
    Micha1108, 11.03.2005
  8. norbi

    norbiMacUser Mitglied

    Mitglied seit:
    14.01.2003
    Beiträge:
    3.506
    Zustimmungen:
    22
    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.
     
    norbi, 11.03.2005
  9. Micha1108

    Micha1108 Thread StarterMacUser Mitglied

    Mitglied seit:
    04.10.2004
    Beiträge:
    337
    Zustimmungen:
    0
    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, 11.03.2005
  10. Hilarious

    HilariousMacUser Mitglied

    Mitglied seit:
    25.11.2004
    Beiträge:
    2.161
    Zustimmungen:
    5
    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,-
     
    Hilarious, 11.03.2005
Die Seite wird geladen...
Ähnliche Themen - MouseOver Effekt CSS
  1. Selket111
    Antworten:
    0
    Aufrufe:
    1.217
    Selket111
    08.01.2013
  2. BurnBjoern
    Antworten:
    5
    Aufrufe:
    1.453
    falkgottschalk
    15.07.2012
  3. jinpanse
    Antworten:
    1
    Aufrufe:
    1.682
    *MacHiLight*
    20.01.2009
  4. Limpi
    Antworten:
    0
    Aufrufe:
    705
  5. garraty47
    Antworten:
    9
    Aufrufe:
    551