div als link / hover etc. funktioniert nicht in safari

[vivo]

Ich bastle eine bandwebseite. Die Navigation besteht aus einem div container in welchem andere divcontainer positioniert sind, die wiederum die Grafiken enthalten und eindeutig benannt sind.
Auszug:

  
<div id="menu">  
<a href="news.php" target="mainframe"><div id="menunews"></div></a>  
<a href="media.html" target="mainframe"><div id="menumedia"></div></a>  
</div>  

dazu gibts eine layout.css, die an den relevanten stellen so aussieht:

  
#menu {  
  top:127px; left:787px;  
  height:377px;  
  width:126px;  
  position:absolute;  
  z-index:4;  
  border:0px;  }  
  
#menunews {  
         width:126px;  
         height:52px;  
         background: url(../bilder/layout/menu_buttons/news_active.png);  
         top:0px; left:0px;  
         position:absolute;  
         display: block;  
}  
#menunews:hover  
{        width:126px;  
         height:52px;  
         background:url(../bilder/layout/menu_buttons/news_hover.png);  
         top:0px; left:0px;  
         position:absolute;  
         display: block;  
}  
#menunews:active, #menunews:focus  
{        width:126px;  
         height:52px;  
         background:url(../bilder/layout/menu_buttons/news_inactive.png);  
         top:0px; left:0px;  
         position:absolute;  
         display: block;  
}  

für den gesamteindruck:
http://roughandfunky.alfahosting.org/eastboundclikk/main.html

die css datei
http://roughandfunky.alfahosting.org/eastboundclikk/css/layout.css

nun zum Problem: Safari möchte die divs einfach nicht als links anerkennen, außerdem setzt es die :hover, focus etc anweisungen nicht um, sondern zeigt nur das div #menunews an. Da ich immer dachte safari und firefox machen vieles ähnlich hab ich mich nur auf firefox konzentriert. im explorer funktionieren die links, aber der background wird nicht angezeigt (is aber nebensache, mir gehts ums menu)
In opera funktioniert alles, genau wie in Firefox. Nach stundenlangem google durchforsten (von :visited/:hover müssen in der css in der richtigen Reihenfolge kommen bis es darf nur relativ/absolut positioniert sein etc. -- funktioniert alles nicht), hoff ich dass ich hier eine Antwort finde.

mfg vivo

[Klawischnigg]

Hi there,

Auszug:

<a href="news.php" target="mainframe"><div id="menunews"></div></a>
</div>

  

> nun zum Problem: Safari möchte die divs einfach nicht als links anerkennen [...]  
  
  
Da hat der Safari recht. Du müsstest Dich eher darüber wundern, daß es in anderen Browsern funktioniert. Ein div-Element kann nicht als Linkbeschreibung eines a-Elementes verwendet werden. Du solltest Dir da etwas Neues einfallen lassen, gut möglich, daß das irgendwann auch andere Browser nicht mehr verstehen werden, abgesehen davon, daß Du so ein Dokument nie valide bekommst...  
  
  
  

[vivo]

vielen dank für die schnelle antwort. nach deklaration als transitional und ersetzen von div mit span funktionierts.
manchmal ist der validator gar nich so schlecht. (und ich sah den wald vor bäumen nicht)

mfg vivo
(closed)

[molily]

<div id="menu">
<a href="news.php" target="mainframe"><div id="menunews"></div></a>
<a href="media.html" target="mainframe"><div id="menumedia"></div></a>
</div>

Listen solltest du mit ul oder ol auszeichnen, dann hast du auch gleich genug Elemente, die du formatieren kannst.

Links sollten, um zugänglich zu sein, nicht leer sein, sondern einen Linktext haben. Den kannst du dann mit CSS verstecken, wenn du ihn durch eine Grafik ersetzen willst. Stichwort dazu: CSS Image Replacement.

#menunews {
         width:126px;
         height:52px;
         background: url(../bilder/layout/menu_buttons/news_active.png);
         top:0px; left:0px;
         position:absolute;
         display: block;
}
#menunews:hover
{        width:126px;
         height:52px;
         background:url(../bilder/layout/menu_buttons/news_hover.png);
         top:0px; left:0px;
         position:absolute;
         display: block;
}
#menunews:active, #menunews:focus
{        width:126px;
         height:52px;
         background:url(../bilder/layout/menu_buttons/news_inactive.png);
         top:0px; left:0px;
         position:absolute;
         display: block;
}

Warum wiederholst du die ganzen Eigenschaften immer wieder für jedes Menüelement und dann auch noch für jeden Status?

:hover, :active und :focus sind Unterzustände, die du nicht separat formatieren musst. Sie »erben« vom Normalzustand und du brauchst nur abweichende Formatierungen angeben.

:hover gibt es bei vielen Elementen, :active und :focus machen für ein div (oder span) keinen Sinn.

Wozu brauchst du diese divs bzw. spans überhaupt? Warum formatierst du nicht das a-Element direkt? Auch ein a kann display:block bekommen, falls nötig.

Warum positionierst du die Elemente innerhalb des Menüs noch einmal absolut? Wieso lässt du sie nicht im normalen Fluss, sodass sie untereinander angezeigt werden? Abstände kannst du auch mit margin und padding umsetzen. Du bist anscheinend einer »alles absolut positionieren«-Idee verfallen.

Nutze ein Selektor wie »#menu a«, um allen a-Elemente im Menü gleiche Basis-Formatierungen zu geben. Dann brauchst du ein Zehntel des jetzigen Quellcodes.

Ferner wären für dich CSS-Sprites interessant. Da fasst man die verschiedenen Status-Grafiken (Normal und Highlighted) in einer zusammen und verschiebt diese beim :hover bloß mit background-position. Das sorgt für ein schnelleren Wechsel beim Mouseover, weil der zweite Status bereits von Anfang an geladen ist.

Mathias

[vivo]

Warum wiederholst du die ganzen Eigenschaften immer wieder für jedes Menüelement und dann auch noch für jeden Status?

:hover, :active und :focus sind Unterzustände, die du nicht separat formatieren musst. Sie »erben« vom Normalzustand und du brauchst nur abweichende Formatierungen angeben.

:hover gibt es bei vielen Elementen, :active und :focus machen für ein div (oder span) keinen Sinn.

umgesetzt, danke.

Wozu brauchst du diese divs bzw. spans überhaupt? Warum formatierst du nicht das a-Element direkt? Auch ein a kann display:block bekommen, falls nötig.

»»
tatsächlich...ok, auch umgesetzt

Warum positionierst du die Elemente innerhalb des Menüs noch einmal absolut? Wieso lässt du sie nicht im normalen Fluss, sodass sie untereinander angezeigt werden? Abstände kannst du auch mit margin und padding umsetzen. Du bist anscheinend einer »alles absolut positionieren«-Idee verfallen.

»»

jup, das hatte ich zuerst, dann ging ich auf fehlersuche und habs absolut positioniert. Ist wieder geändert auf relativ.

Nutze ein Selektor wie »#menu a«, um allen a-Elemente im Menü gleiche Basis-Formatierungen zu geben. Dann brauchst du ein Zehntel des jetzigen Quellcodes.

»»
getan!

Ferner wären für dich CSS-Sprites interessant. Da fasst man die verschiedenen Status-Grafiken (Normal und Highlighted) in einer zusammen und verschiebt diese beim :hover bloß mit background-position. Das sorgt für ein schnelleren Wechsel beim Mouseover, weil der zweite Status bereits von Anfang an geladen ist.

Mathias

das schau ich mir nochmal genauer an. cool, super antwort.