"MouseOver"-Effekt mit CSS geht im Safari nicht

Dieses Thema im Forum "Web Page Design" wurde erstellt von Micha1108, 11.03.2005.

  1. Micha1108

    Micha1108 Thread Starter MacUser Mitglied

    Beiträge:
    336
    Zustimmungen:
    0
    MacUser seit:
    04.10.2004
    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
     
  2. Alex18091982

    Alex18091982 MacUser Mitglied

    Beiträge:
    320
    Zustimmungen:
    1
    MacUser seit:
    28.07.2003
    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...
     
  3. HAL

    HAL Gast

    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 Starter MacUser Mitglied

    Beiträge:
    336
    Zustimmungen:
    0
    MacUser seit:
    04.10.2004
    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
     
  5. Hilarious

    Hilarious MacUser Mitglied

    Beiträge:
    2.195
    Zustimmungen:
    5
    MacUser seit:
    25.11.2004
    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.
     
    Zuletzt von einem Moderator bearbeitet: 25.10.2015
  6. HAL

    HAL Gast

    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 Starter MacUser Mitglied

    Beiträge:
    336
    Zustimmungen:
    0
    MacUser seit:
    04.10.2004
    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
     
  8. norbi

    norbi MacUser Mitglied

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

    Micha1108 Thread Starter MacUser Mitglied

    Beiträge:
    336
    Zustimmungen:
    0
    MacUser seit:
    04.10.2004
    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...
     
  10. Hilarious

    Hilarious MacUser Mitglied

    Beiträge:
    2.195
    Zustimmungen:
    5
    MacUser seit:
    25.11.2004
    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,-
     
Die Seite wird geladen...

Diese Seite empfehlen