Probleme mit DIVs bei Mozilla

Status
Nicht offen für weitere Antworten.
M

mimip

Grünschnabel
Hallo,

ich möchte per MouseOver Divs öffnen bzw schließen. Das funktioniert soweit auch gut.
Im INternetexplorer läuft es hervorragend.
Aber bei Mozilla und Firefox werden die DIVs nicht an den Stellen angezeigt, an denen ich sie positioniert haben möchte.

Hier der Quelltext:

HTML: 
<div style="z-index:1;position:absolute; top:100px; left:160px; height:600px">

<div onMouseOut="showmenu(1);" onMouseOver="showmenu(1);" id="menu1" style="display:none; background-color:none; width:150px; height:120px; position:absolute; top:89px; left:30px;z-index:2;">
<TABLE BGCOLOR="#000000" CELLPADDING="1" CELLSPACING="0" BORDER="0">
 <TR>
  <TD>
   <TABLE BGCOLOR="#EBEBE9" CELLPADDING="2" CELLSPACING="2" BORDER="0">
    <TR>
     <TD CLASS="schrift1" onMouseOver="showlayer('editPage1')">
      <a CLASS="schrift1">Seitentyp ausw&auml;hlen</a>
      <div id="editPage1" style="position:absolute; z-index:1; display:none; left: 72%;">
       <TABLE BGCOLOR="#000000" CELLPADDING="1" CELLSPACING="0" BORDER="0">
        <TR>
         <TD>
          <TABLE BGCOLOR="#EBEBE9" CELLPADDING="2" CELLSPACING="2" BORDER="0">
          
           <TR>
            <TD CLASS="schrift1" nowrap>
             <a CLASS="schrift1" href="index.php?todo=uebersicht&navi=1&modpid=1&modul=HTML">Standardseite</a>
            </TD>
           </TR>
           <TR>
            <TD CLASS="schrift1" nowrap>
             <a CLASS="schrift1" href="index.php?todo=uebersicht&navi=1&modpid=1&modul=GBOOK">Gästebuch</a>
            </TD>
           </TR>
           <TR>
            <TD CLASS="schrift1" nowrap>
             <a CLASS="schrift1" href="index.php?todo=uebersicht&navi=1&modpid=1&modul=GALERIE">Fotogalerie</a>
            </TD>
           </TR>
           <TR>
            <TD CLASS="schrift1" nowrap>
             <a CLASS="schrift1" href="index.php?todo=uebersicht&navi=1&modpid=1&modul=SHOP"><b>Online Shop</b></a>
            </TD>
           </TR>
          </TABLE>
         </TD>
        </TR>
       </TABLE>
      </div>
     </TD>
    </TR>
    
    <TR>
     <TD CLASS="schrift1">
      <a CLASS="schrift1" href="index.php?todo=editpage&editpid=1">Seite bearbeiten</a>
     </TD>
    </TR>
    <TR>
     <TD CLASS="schrift1">
      <a CLASS="schrift1" href="index.php?todo=label&labelpid=1">Titel bearbeiten</a>
     </TD>
    </TR>
    <TR>
     <TD CLASS="schrift1">
      <a CLASS="schrift1" href="index.php?todo=uebersicht&navi=1&offpid=1">Seite sperren</a>
     </TD>
    </TR>
    <TR>
     <TD CLASS="schrift1">
      <a CLASS="schrift1" href="index.php?todo=uebersicht&navi=1&delpid=1">Seite löschen</a>
     </TD>
    </TR>
   </TABLE>
  </TD>
 </TR>
</TABLE>
</div>

<div onMouseOut="showmenu(2);" onMouseOver="showmenu(2);" id="menu2" style="display:none;  background-color:none; width:150px; height:120px; position:absolute; top:89px; left:167px;z-index:2;">
<TABLE BGCOLOR="#000000" CELLPADDING="1" CELLSPACING="0" BORDER="0">
 <TR>
  <TD>
   <TABLE BGCOLOR="#EBEBE9" CELLPADDING="2" CELLSPACING="2" BORDER="0">
    <TR>
     <TD CLASS="schrift1" onMouseOver="showlayer('editPage2')">
      <a CLASS="schrift1">Seitentyp ausw&auml;hlen</a>
      <div id="editPage2" style="position:absolute; z-index:1; display:none; left: 72%;">
       <TABLE BGCOLOR="#000000" CELLPADDING="1" CELLSPACING="0" BORDER="0">
        <TR>
         <TD>
          <TABLE BGCOLOR="#EBEBE9" CELLPADDING="2" CELLSPACING="2" BORDER="0">
          
           <TR>
            <TD CLASS="schrift1" nowrap>
             <a CLASS="schrift1" href="index.php?todo=uebersicht&navi=1&modpid=2&modul=HTML">Standardseite</a>
            </TD>
           </TR>
           <TR>
            <TD CLASS="schrift1" nowrap>
             <a CLASS="schrift1" href="index.php?todo=uebersicht&navi=1&modpid=2&modul=GBOOK"><b>Gästebuch</b></a>
            </TD>
           </TR>
           <TR>
            <TD CLASS="schrift1" nowrap>
             <a CLASS="schrift1" href="index.php?todo=uebersicht&navi=1&modpid=2&modul=GALERIE">Fotogalerie</a>
            </TD>
           </TR>
           <TR>
            <TD CLASS="schrift1" nowrap>
             <a CLASS="schrift1" href="index.php?todo=uebersicht&navi=1&modpid=2&modul=SHOP">Online Shop</a>
            </TD>
           </TR>
          </TABLE>
         </TD>
        </TR>
       </TABLE>
      </div>
     </TD>
    </TR>
    
    <TR>
     <TD CLASS="schrift1">
      <a CLASS="schrift1" href="index.php?todo=editpage&editpid=2">Seite bearbeiten</a>
     </TD>
    </TR>
    <TR>
     <TD CLASS="schrift1">
      <a CLASS="schrift1" href="index.php?todo=label&labelpid=2">Titel bearbeiten</a>
     </TD>
    </TR>
    <TR>
     <TD CLASS="schrift1">
      <a CLASS="schrift1" href="index.php?todo=uebersicht&navi=1&offpid=2">Seite sperren</a>
     </TD>
    </TR>
    <TR>
     <TD CLASS="schrift1">
      <a CLASS="schrift1" href="index.php?todo=uebersicht&navi=1&delpid=2">Seite löschen</a>
     </TD>
    </TR>
   </TABLE>
  </TD>
 </TR>
</TABLE>
</div>

<div onMouseOut="showmenu(3);" onMouseOver="showmenu(3);" id="menu3" style="display:none; background-color:none; width:150px; height:120px; position:absolute; top:89px; left:304px;z-index:2;">
<TABLE BGCOLOR="#000000" CELLPADDING="1" CELLSPACING="0" BORDER="0">
 <TR>
  <TD>
   <TABLE BGCOLOR="#EBEBE9" CELLPADDING="2" CELLSPACING="2" BORDER="0">
    <TR>
     <TD CLASS="schrift1" onMouseOver="showlayer('editPage3')">
      <a CLASS="schrift1">Seitentyp ausw&auml;hlen</a>
      <div id="editPage3" style="position:absolute; z-index:1; display:none; left: 72%;">
       <TABLE BGCOLOR="#000000" CELLPADDING="1" CELLSPACING="0" BORDER="0">
        <TR>
         <TD>
          <TABLE BGCOLOR="#EBEBE9" CELLPADDING="2" CELLSPACING="2" BORDER="0">
          
           <TR>
            <TD CLASS="schrift1" nowrap>
             <a CLASS="schrift1" href="index.php?todo=uebersicht&navi=1&modpid=3&modul=HTML"><b>Standardseite</b></a>
            </TD>
           </TR>
           <TR>
            <TD CLASS="schrift1" nowrap>
             <a CLASS="schrift1" href="index.php?todo=uebersicht&navi=1&modpid=3&modul=GBOOK">Gästebuch</a>
            </TD>
           </TR>
           <TR>
            <TD CLASS="schrift1" nowrap>
             <a CLASS="schrift1" href="index.php?todo=uebersicht&navi=1&modpid=3&modul=GALERIE">Fotogalerie</a>
            </TD>
           </TR>
           <TR>
            <TD CLASS="schrift1" nowrap>
             <a CLASS="schrift1" href="index.php?todo=uebersicht&navi=1&modpid=3&modul=SHOP">Online Shop</a>
            </TD>
           </TR>
          </TABLE>
         </TD>
        </TR>
       </TABLE>
      </div>
     </TD>
    </TR>   
    <TR>
     <TD CLASS="schrift1">
      <a CLASS="schrift1" href="index.php?todo=editpage&editpid=3">Seite bearbeiten</a>
     </TD>
    </TR>
    <TR>
     <TD CLASS="schrift1">
      <a CLASS="schrift1" href="index.php?todo=label&labelpid=3">Titel bearbeiten</a>
     </TD>
    </TR>
    <TR>
     <TD CLASS="schrift1">
      <a CLASS="schrift1" href="index.php?todo=uebersicht&navi=1&offpid=3">Seite sperren</a>
     </TD>
    </TR>
    <TR>
     <TD CLASS="schrift1">
      <a CLASS="schrift1" href="index.php?todo=uebersicht&navi=1&delpid=3">Seite löschen</a>
     </TD>
    </TR>
   </TABLE>
  </TD>
 </TR>
</TABLE>
</div>

<table cellpaddin="0" cellspacing="0">

<tr>
 <td id="left"><img onMouseOut="showmenu(1);" onMouseOver="showmenu(1);" id="pic5" src="layout_thumb_SHOP-ONLINE.png?1110543168"></td>
 <td id="center"><img onMouseOut="showmenu(2);" onMouseOver="showmenu(2);" id="pic5" src="layout_thumb_GBOOK-ONLINE.png?1110543168"></td>
 <td id="right"><img onMouseOut="showmenu(3);" onMouseOver="showmenu(3);" id="pic5" src="layout_thumb_HTML-ONLINE.png?1110543168"></td>
</tr>
<tr>
 <td CLASS="schrift1" id="center" style="height:20px">Shop</TD></td>
 <td CLASS="schrift1" id="center">- Kein Titel -</td>
 <td CLASS="schrift1" id="center">-Ohne Titel-</td>
</tr>
</table>
</div>

Hoffe, mir kann noch geholfen werden :confused:
Gruß,
Miriam
 
Hi,

also ich würd Dir gern helfen, aber ich kann mit dem bissl Code nicht wirklich testen. Kannst Du die Seite nicht mal kurz online stellen? dann kann man sich mal überzeugen, wie es mit dem IE klappen soll und dann kann man anpassungen für Geckos vornehmen...

Gruß, C]-[aoZ
 
Hi,

das Projekt läuft unter http://www.webseitenbaukasten.de´. Das Problem findet sich in dem Bereich, den man erst nach einem Login sehen kann. Dort war es unter Seitenübersicht.
Per Mouse-Over wurde ein Menü für die einzelnen Bilder eingeblendet. Unter Mozilla etc funktuionierte das leider nicht. Habe aber eine Lösung bzw. einen Umweg gefunden und lasse das Menü jetzt per onClick einblenden. So läuft es mit allen Browsern.

Gruß,
Miriam
 
Hi,

also arbeite selbst gerade an diversen Web-Projekten, die massiv gebrauch von verschiedenen Positionierungen und dynamischen Inhalten machen. Dabei ist mir aufgefallen, dass die Gecko-Engine (also Mozilla, Netscape, Firefox...) prozentuale Positionierung von div's nicht wirklich mag.

Desweiteren arbeite ich an vielen Stellen mit Weichen in JavaScript, die je nach Browser verschiedenes tun:

z.B.:
Code: 
var documentWidth = (document.all) ? document.body.offsetWidth : window.innerWidth;

letztendlich bin ich bei vielen Problemen auf Lösungen gestoßen, bei denen ich mich nicht mehr mit der Browser-Kompatibilität herumärgern muss:

Cross-Browser

Weiterhin ist der Event-Handler eigentlich nicht entscheident, sondern das Script selbst. Zu beachten ist auch, wenn Du die CSS-Egenschaft "display" benutzt, dass ein solches Element nicht modifiziert oder davon Eigenschaften ausgelesen werden sollten, solange es auf "none" steht. Das liegt daran, dass ein Element mit "display:none;" laut W3C nicht berechnet werden soll, und damit auch keine Rechenleistung benötigt. Erst wenn es auf "display:block;" geschaltet wird, fließt es in die Berechnungen mit ein und auch erst dann sollte man damit arbeiten.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück