calvindigital: infobox geht in safari nicht. warum?

hallo,

ich hoffe ich bin im richtigen themenbereich gelandet.
mein problem ist folgendes:
ich habe eine infobox gemacht die auch in firefox, opera und internet explorer
so angezeigt wird wie ich das will aber in safari geht es einfach nicht.

#nussbaumtisch {  
 position: absolute;  
 width: 120px;  
 height: 130px;  
 top: 0px;  
 left: 0px;  
}  
  
#nussbaumtischbox {  
 display:none;  
}  
  
#nussbaumtisch:hover + #nussbaumtischbox {  
 background-image: url(../nussbaum_tisch.jpg);  
 display:block;  
 width: 590px;  
 height: 440px;  
 position:absolute;  
 top:0px;  
 right:0px;  
 border:1px dashed black;  
 padding:0px;  
 font:normal 14px verdana, sans-serif;  
}

es scheint an dem teil

#nussbaumtisch:hover + #nussbaumtischbox {

zu liegen aber ich weiß nicht warum

ich hoffe ihr konntet die frage verstehen und habt eine antwort darauf

lg calvin

  1. Hi,

    ich habe eine infobox gemacht die auch in firefox, opera und internet explorer

    ab Version 7!

    es scheint an dem teil

    #nussbaumtisch:hover + #nussbaumtischbox {

    zu liegen aber ich weiß nicht warum

    folgen diese beiden Elemente wirklich unmittelbar aufinander?

    freundliche Grüße
    Ingo

    1. Die divs folgen unmittelbar aufeinander.

        
        
      <div id="nussbaumtisch">  
          <img src="./thumb/nussbaumtisch_tb.jpg" class="thumb" alt="Vorschau Nussbaumtisch" title="Nussbaumtisch"><br />Nussbaumtisch  
        </div>  
      <div id="nussbaumtischbox">Ein massiver Sofatisch aus Nussholz</div>
      
      1. Hi,

        Die divs folgen unmittelbar aufeinander.

        </div>
        <div id="nussbaumtischbox">Ein massiver Sofatisch aus Nussholz</div>

        nicht ganz... da ist noch Whitespace zwischen - aber sowas tangiert ja eigentlich, wenn überhaupt, nur den IE.  
        Aber warum setzt Du die nussbaumtischbox nicht einfach in die nussbaumtisch -Box? Das wäre auch logischer von der Struktur her.  
          
        freundliche Grüße  
        Ingo
        
        -- 
        [[barrierefrei Ingo Webdesign](http://www.1ngo.de/web/) » [Suchmaschinenoptimierung](http://www.1ngo.de/web/seo.html) | [em?](http://www.1ngo.de/web/em.html) | [IE7 - Bugs](http://www.1ngo.de/web/ie7.html)]
        
        1. Wenn ich die nussbaumtischbox in nussbaumtisch setzte dann kann ich sie doch nicht mehr unabhängig von einander positionieren?!
          oder kann ich die Positionierung von nussbaumtischbox auf den div beziehen in dem nussbaumtisch ist?

          1. Hi,

            Wenn ich die nussbaumtischbox in nussbaumtisch setzte dann kann ich sie doch nicht mehr unabhängig von einander positionieren?!

            kommt drauf an - aber warum solltest Du sie unabhängig voneinander positionieren wollen?

            oder kann ich die Positionierung von nussbaumtischbox auf den div beziehen in dem nussbaumtisch ist?

            natürlich. Gebe der äußeren Box position:relative und der inneren position:absolute.

            freundliche Grüße
            Ingo

            1. Danke jetzt passiert schon mal was,
              es ist zwar noch nicht das was ich will aber es wird schonmal etwas in safari angezeigt. Ich möchte eingentlich dass die nussbaumtischbox sich oben rechts an #content positioniert, im moment geht wird er an #nussbaumtisch positioniert

                <body>  
                 <div id="content">  
               <div id="nussbaumtisch">  
                     <img src="./thumb/nussbaumtisch_tb.jpg" class="thumb" alt="Vorschau Nussbaumtisch" title="Nussbaumtisch"><br />Nussbaumtisch  
                  <div id="nussbaumtischbox">Sofatisch aus Nussholz</div></div>...
              
                
                
              #content {  
               position: absolute;  
               width: 720px;  
               height: 520px;  
               left: 25%;  
               font-family: Arial, Helvetica, Geneva, Swiss, SunSans-Regular;  
               font-size: 10pt;  
                
              }  
                
              #nussbaumtisch {  
               position: relative;  
               width: 120px;  
               height: 130px;  
               top: 0px;  
               left: 0px;  
              }  
                
              #nussbaumtischbox {  
               display:none;  
              }  
                
              #nussbaumtisch:hover > #nussbaumtischbox {  
               background-image: url(../nussbaum_tisch.jpg);  
               display:block;  
               width: 590px;  
               height: 440px;  
               position:absolute;  
               top:0px;  
               right:0px;  
               border:1px dashed black;  
               padding:0px;  
               font:normal 14px verdana, sans-serif;  
              }  
              }
              

              wie kann ich jetzt #nussbaumtischbox an #content positionieren?

              1. Hi,

                Ich möchte eingentlich dass die nussbaumtischbox sich oben rechts an #content positioniert, im moment geht wird er an #nussbaumtisch positioniert

                #content {
                position: absolute;

                zwar nicht besonders sinnvoll (position:relative i.V. mit margin:auto wäre weniger problematisch), aber das schafft auch den Bezugsrahmen, wenn Du

                #nussbaumtisch {
                position: relative;

                entfernst.

                freundliche Grüße
                Ingo

                1. Danke für die Anworten ich habe jetzt selbst eine möglichkeit gefunden und zwar hab ich #nussbaumtischbox in #nussbaumtisch gemacht und die position mit einer negativen pixelangabe festgelegt.

                  Vielen Dank
                  calVin

  2. Wenn #nussbaumtischbox in #nussbaumtisch liegt, kannst du das "+" weglassen.