✔ Bild :mouseovereffekt wird bei IE anderst angezeigt

Status
Nicht offen für weitere Antworten.
disear

disear

Erfahrenes Mitglied
Hallo zusammen,
ich habe heute gerade damit begonnen meine Seite auf verschiedene Browser zu testen: alles ist ok bis auf ein detail. Ich habe so eine kleine Bildergalerie zuunterst und immer wenn ich mit der Maus darüberfahre erscheint ein grösseres Bild, dass sich über jede tabelle erstrecken sollte.
Bei firefox, Safari, Opera tut dies auch ziemlich gut, nur der sch***** Internet Explorer spielt da wieder mal nicht mit...

hier kurz einen Ausschnitt aus meinem Code:(manches ist PHP-Code aber für hier unrevelant)
Code: 
<td>
<div style='position:absolute; top:260px; left:20px; z-index:999;'>
<img src=pics/mini/$seite[bild_kl]1.jpg onMouseOver=this.src='pics/gross/$seite[bild_kl]1.jpg'  onMouseOut=this.src='pics/mini/$seite[bild_kl]1.jpg'></div>
</td>
mmh kann mir jemand nen tipp geben wie auch der Internet Explorer die Bilder über alle Ebenen legt?!
In der Anlage sind die Unterschiede (Bild1.jpg ist im Firefox Bild2.jpg mit Internet Explorer)

[EDIT:] Was ich noch vergessen habe zu sagen: Die ganze Seite ist mit tabellen organisiert.
 

Anhänge

  • bild1.jpg
    bild1.jpg
    21,4 KB · Aufrufe: 114
  • bild2.jpg
    bild2.jpg
    15,9 KB · Aufrufe: 112
Zuletzt bearbeitet:
Was macht eigentlich der div-Tag? hier ein kleiner Auszug aus SelfHTML:

Sie können mehrere Elemente wie Text, Grafiken, Tabellen usw., in einen gemeinsamen Bereich mit dem div-Tag einschließen. Dieses allgemeine Element bewirkt nichts weiter als dass es in einer neuen Zeile beginnt. Ansonsten hat es keine Eigenschaften. Es ist dazu gedacht, um mit Hilfe von CSS formatiert zu werden.

Noch ne Frage zu den Bildern:

ist das für PHP? Ich sehe $ Zeichen und [] Klammern. Falls das keine PHP eigenen Elemente sind save die Pics mal ohne diese Zusätze ab und versuchs nochmal!

cu thecamillo

ÄÄHHH Übrigens: Im IE isses wichtig bei allen Verweisen nach dem =Zeichen das Folgende in Hochkommas zu setzen! - Ich weis es geht auch ohne - aber W3C hat es so als Standard festgelegt und so viel Mehraufwand ist das auch nicht!
 
Zuletzt bearbeitet von einem Moderator:
Das <div> element formatiert mir meine Bilder und possitioniert sie auf der Page. ich hab dies so gemacht, damit der Mousover Effekt über den restlichen Text gelegt wird und somit wird ein scrollen unterdrückt. Dies klappt aber mit Safari/Firefox/Opera, doch nur nicht mit IE. Der IE macht einen Scrollbalken... und das will ich nicht
(übrigens der <div>-Code hab ich von Selfhtml)

der PHP-Teil kann man ignorieren. Die Bilderpfade befinden sich in einer Datenbank und dies funktioniert!
 
hey war ja kein Angriff auf dich, bleib mal locker oder mach Urlaub!

Du kannst eigentlich alle Tags mit style belegen und div würd ich eben net nehmen warum weil der mir immer ne Zeile macht!

Immer locker bleiben!

cu ich mach Feierabend!

thecamillo
 
Wo Angrif ich sehe keinen Angriff *sichfragen*
ich habs nur näher erklären wollen. Sorry wenns zu schräg rübergekommen ist...
greetz
disear
 
Seltsam ..., bei mir verhalten sich FireFox (1.0.2) und IE (6.0) genau entgegengesetzt deiner Beschreibung mit dem Scrollbalken :confused:

Es wundert mich auch, dass dein Tabellenkonstrukt (Seitenlayout) überhaupt funktioniert, denn die Postionierung des DIVs innerhalb der Tabellenzelle bezieht sich (in Wirklichkeit) auf das <body> -Element :suspekt:

In diesem Fall sollte das DIV mit einem Innenabstand margin in der Tabellenzelle 'positioniert' werden:

Code: 
div
{
margin: 260px 0 0 20px;
}
Diese Technik lässt sich aber auch direkt auf das <img> -Element anwenden, und macht das DIV überflüssig.

Code: 
img
{
margin: 260px 0 0 20px;
}
HTML: 
<td>
<img src="pics/mini/$seite[bild_kl]1.jpg" onmouseover="this.src='pics/gross/$seite[bild_kl]1.jpg'" onmouseout="this.src='pics/mini/$seite[bild_kl]1.jpg'">
</td>
 
danke michealsinterface für deine Antwort!
Das mit den Divs klappt so auch, laut selfhtml :rolleyes: :Klick
Ich habe es nun mal nach deiner Methode geschrieben:
Code: 
<img src=pics/mini/$seite[bild_kl]2.jpg onMouseOver=this.src='pics/gross/$seite[bild_kl]2.jpg'  onMouseOut=this.src='pics/mini/$seite[bild_kl]2.jpg' style='position:absolute; top:260px; left:130px; z-index:198;'>
Doch der Fehler ist immer noch derselbe, bringt mich also nicht weiter... :(
ist wohl am Besten ich lad die Page mal hoch und so kannst du dir selber ein Bild machen (musst zuerst mit Firefox drauf, danach mit IE) Link zu Homepage --> Mit der Maus über die Bilder fahren, dann siehst du den Unterschied

Grüsse
Disear
 
Zuletzt bearbeitet:
Wie gesagt, die Positionierung der DIVs bezieht sich nicht auf die Grenzen der Tabellenzelle, sondern auf das <body> -Element, und somit auf den Fensterrand des Browsers. Kannst du ja mal überprüfen / nachmessen ;-]
 
na Ok danke für deinen Beitrag. Irgendwie komme ich nicht weiter...
das mit der Positionierung ist schon Ok das stimmt soweit auch! Nur mein Problem ist, das Firefox/Safari etc den Mouseovereffekt über die Tabelle legt (so wie ich es mir wünsche) und der IE klappt es einfach nach unten raus... und baut dabei Scrollbalken ein...
hast du dir mal die Seite angeschaut

Grüsse
disear
 
Ja, im FireFox richten sich die Positionsangaben für die DIVs am Browserfensterrand aus.

Einen Lösungvorschlag für den unterschiedlichen 'mouseover'-Effekt habe ich leider nicht parat.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück