CSS Identischer Code - unterschiedliche Anzeige

[Mr. Snoot]

--- Problem gelöst ---



Hio,

ich habe hier in der Tabelle die Spalten Bild und Trend.

Bei hover der Icons (

/

) soll ein Vorschaubild bzw. ein Diagramm in einem span angezeigt werden. Bei dem Bild funktioniert alles einwandfrei, in jedem Browser wird das Bild beim Hovern eingeblendet.

Bei dem Diagramm funktioniert das ganze aber nicht in Chrome und Safari. Dort wird das Diagramm immer angezeigt und nicht absolut über der Tabelle, sondern in der Zelle wo auch das Icon

sitzt.

IE/FF/Opera: . . . . . . . . . . Chrome/Safari: ​

Der CSS-Code für Bild und Diagramm ist identisch (bis auf die genaue Position).

CSS:

a.bild, a.trend
{
  position:relative;
  z-index:2;
}

a.bild:hover, a.trend:hover
{
  z-index:3;
}

a.bild span, a.trend span
{
  display:none;
}

a.bild:hover span
{
  display:block;
  position:absolute;
  top:-50px;
  left:-500px;
  padding:5px;
  border:1px solid black;
  background-color:#FFF;
}

a.trend:hover span
{
  display:block;
  position:absolute;
  top:50%;
  left:50%;
  margin-left:-520px;
  padding:5px;
  border:1px solid black;
  background-color:#FFF;
}

Der HTML-Code unterscheidet sich etwas. Beim Diagramm habe ich innerhalb des span noch ein <div id="1">, und daran scheint es zu hängen (das div muss vorhanden sein, sonst funktioniert das Diagramm nicht). Ich hab schon alles möglich mit position: abolute etc. probiert, aber ich bekomme es in Chrome/Safari nicht hin. Hat vielleicht jemand eine Idee, was man da ändern müsste?

<!-- Code für das Bild -->
<td nowrap class="main" style="text-align:center;">

  <a class="bild" href="#" onmouseover="document.getElementById('thumb444063').src = 'http://p.gzhls.at/444063.jpg'">
    <span>
      <img id="thumb444063" style="width:300; height:187" src="/bilder/load.gif">
    </span>
    <img src="/bilder/picture.png">
  </a>

</td>

<!-- Code für das Diagramm -->
<td nowrap class="main" style="text-align:center;">

  <a class="trend" href="#"><img src="/bilder/trend.png">
    <span>
      <script type="text/javascript" src="/amline/swfobject.js"></script>
      <div id="1">
        <span style="color:#900">...</span>
      </div>
      <script type="text/javascript">
        <!-- Diagramm -->
      </script>
    </span>
  </a>
</td>

 

[QXARE]

Also <div> in <span> geht garnicht. Wieso brauchst du das da drinnen?

Außerdem bin ich mir jetzt nicht sicher ob der ID-Bezeichner 1 ungültig ist.

EDIT: Hab mir grad die Seite im Chrome angeschaut. Geh auf Entwickler Tools und öffne die JavaScript Konsole. Die spuckt genau dort Fehler aus, außerdem ist da auch noch ein <a>-Tag im <span>. So geht das nicht :>

 

[Mr. Snoot]

Das div ist von dem Flash-Chart, das muss sein, sonst läuft das Ding nicht (haben die Entwickler sich so ausgedacht ^^).

ID hab ich mal in chart_x geändert; wo ist denn bei dir ein <a> im <span>? Ich seh da nichts; die konsole sagt mir nur, dass irgendwelche Tags nicht abgeschlossen sein sollen .. die seh ich aber auch nicht


edit: ach da ist noch ein <a> im Chart - hab ich nicht gesehen. Hab's mal gelöscht und siehe da, es scheint zu laufen.

Wunderbar, vielen Dank. Da wäre ich ja im Leben nicht drauf gekommen

 

[QXARE]

Wenn du eh schon Flash und JavaScript nutzt, dann vergiss das Verschachteln in dem a, zumal du da divs und was weiss ich noch drinnen hast. Das ist nicht konform und Chrome hat damit anscheinend irgendwelche Parsing Probleme. Lass das Popup doch einfach per onclick, mouseover oder sonst was anzeigen.

EDIT: Btw. du scheinst es geschafft zu haben, bei mir funktioniert es jetzt.

 

[Mr. Snoot]

Jep, siehe edit oben.

Die JS-Variante muss ich mir mal überlegen; das <div> innerhalb von <span> ist schon unschön