Ergebnis 1 bis 9 von 9

Thema: Problem: Tabelle - MouseOver - Layoutfehler

  1. #1
    Kaiserliche Hoheit
    Registriert seit
    22.02.2005
    Beiträge
    1.558
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard Problem: Tabelle - MouseOver - Layoutfehler

    Hallo,
    ich habe folgendes Problem:
    * habe ein Layout auf Tabellenbasis mit Mouseover für Tabellenfelder erstellt
    * halte mich (soweit möglich) an W3-Standards
    * im IE wird das Layout richtig erzeugt und bleibt stabil
    * im FF wird das Layout richtig erzeugt, bleibt aber nicht stabil

    Was bedeutet nun stabil?
    Im FF wird das Layout, so wie es sein soll erzeugt. Die MouseOver funktionieren ebenfalls. Wenn ich jedoch einen der neuen
    Menüpunkte (innerhalb der Seite) anwähle, wodurch das gleiche Layout erzeugt wird, bricht das MouseOver der Tabellenzellen ein.
    Das Menü als solches kann vernachlässig werden. Mit einem Klick auf einen der Menüpunkte wechselt nur die Tabellenzelle die einen
    andersfarbigen Hintergrund bekommt.

    Diese Erklärung ist vermutlich etwas zu verwirrend. Wichtig ist aber nur das eigentlich Problem. Das folgt jetzt.

    Das konkrete Problem:
    Für mich stellt sich das Problem somit als sehr willkürlich dar. Das so genannte Highlighting der Tabellenzelle funktioniert nach dem
    Neuladen der Seite. Klickt man - also die Seite baut sich erneut auf - wird nichtmehr die ganze Zeile, sondern nur noch vom Anfang der
    Zelle bis zum Ende des Textes hinterlegt. Das sieht dann natürlich blöd aus.

    Der Code:
    Den kompletten Code schenk ich mir mal. Poste erstmal nur die Zeilen für die eigentliche Zelle.
    Code:
    <style type="text/css">
    <!--
     ... 
     .subitemselect   &#123; background-color&#58;#555555; &#125;
     .subitemshadow	&#123; background-color&#58;#999999; &#125;
     .subitemdeselect &#123; background-color&#58;#CCCCCC; &#125;
     .submenuarrow    &#123; color&#58;#FFAA00; &#125;
     ...
    -->
    </style>
    ...
    <script language="javascript" type="text/javascript">
    
    function subMenuHighlighting&#40;id, flag&#41; &#123;
      // steuert das Highligting in den Submenüs
      var tdid = "td"+id;
      var subRef = document.getElementById&#40;tdid&#41;;
      activeID = getMenuID&#40;menu, subMenu&#41;;        // subMenu entspricht $sel in der URL
    
      switch &#40;flag&#41; &#123;
        case 'on'&#58;       // Submenuitem selectieren
                           subRef.className = "subitemselect";		
                           break;
        case 'shadow'&#58;   // Submenuitem selectieren
                           subRef.className = "subitemshadow";	
                           break;
        case 'off'&#58;      // Submenuitem deselectieren
                           if&#40;activeID != id&#41;
                             subRef.className = "subitemdeselect";
                           else
                             subRef.className = "subitemshadow";		
                           break;
      &#125;	
    &#125;
    
    </script>
    ...
      <td id="td401" width="100%" align="LEFT"
          onMouseOver="subMenuHighlighting&#40;401,'on'&#41;"
          onMouseOut="subMenuHighlighting&#40;401,'off'&#41;"
          onClick="self.location.href='index_ie.php?menu=4&sel=1'">
        <span class="submenuarrow">»</span>
        Fotografie
      </td>
    ...
    Die JS-Funktion dient dazu, den momentan aktiven Menüpunkt nicht komplett vom Highlighting zu befreien, sondern einen
    Zwischenton "stehen zu lassen". Das funktioniert auch so.

    Naja, ich hoffe ich konnte mich verständlich machen. Notfalls stell ich mal eine Bsp.seite online. Dazu fehlt mir zur Minute jedoch
    die Zeit.

    Schaut mal ob ihr damit hier auch klar kommt. Über ein paar Anregungen würde ich mich freuen.

    see yaah
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!
    "Carpe Diem" powered by positiv Feelings

  2. #2
    Fortgeschrittene/r
    Registriert seit
    05.01.2005
    Ort
    Schwanstetten
    Beiträge
    181
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Hi,

    also ich habs etz 4 mal durchgelesen und verstehs immer noch nicht, kann aber sein dass ich zu blöd bin

    vielleicht doch mal ein beispiel ?

    gruß

    vv
    no pain no gain
    meine seite

  3. #3
    Kaiserliche Hoheit
    Themenstarter

    Registriert seit
    22.02.2005
    Beiträge
    1.558
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Ok, klar ...

    Das normale Tabellenlayout (der betroffenen Stelle)


    Das gebrochene Tabellenlayout (der betroffenen Stelle)


    Die normale Darstellung zeigt sich nach dem die Seite aufgebaut ist. Wenn ich dann oben auf den Menüpunkt KREATIV klicke, baut sich
    die Seite neu auf und es zeigt sich das gebrochene Layout. Klicke ich jedoch auf Fotografie, hier ändert sich an den URL-Parametern garnichts,
    entsteht der Fehler nicht.

    Es scheint, so, als ob dieser Fehler mit dem Klassentausch der Tabellenzelle auf dem Firefox etwas zu tun hat. Sprich: der FF mag das nicht.

    Ich bin n' bissel ratlos...
    "Carpe Diem" powered by positiv Feelings

  4. #4
    topfblume
    Gast

    Standard

    Moin ...

    Der gepostete Quelltext besteht fast nur aus javascript-geschichten.

    Warum postest Du bei Einsteiger & html und nicht HIER????

    Was Deine Grafik-im-Forum-Bastel-Geschichte betrifft...
    Warum machst Du Dir soviel Mühe mit dem Screens von Deinem Desktop??

    Poste die URL
    Gruß

  5. #5
    Kaiserliche Hoheit
    Themenstarter

    Registriert seit
    22.02.2005
    Beiträge
    1.558
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Ich habe den Beitrag in das HTML-Forum gepostet, weil es meiner Meinung nach mit HTML und nicht mit JS oder PHP zu tun hat.
    Der JS-Code hinterlegt die Tabellenzelle nur mit nem anderen Hintergrund.

    Die Bildchen poste ich weil es das Problem genau zeigt und die vollständige Seite nichts zur Sache tut.

    ABER:
    Ich bin jetzt durch einen Versuch darauf gekommen wo das Problem liegt. Und hier muss ich sagen, kann niemand behaupten das das
    regelkonform ist und der FireFox immer alles richtig anzeigt!

    Firefox-Eigenart:
    Ich hatte die Tabelle, die das Untermenü (Fotografie, Design, usw.) erzeugt mit der Angabe width="100%" eröffnet.
    Genau damit scheint der FF aber Probleme zu haben. Er interpretiert dann seltsamerweise den Inhalt der einzelnen Zellen als 100%
    und hinterlegt nur diesen Bereich (siehe 2.Pic).
    Nun bin ich hingegangen und habe diese Angabe durch einen Zahlenwert ersetzt. width="183"
    Und siehe da, der Fehler taucht nichtmehr auf. Hier liegt der Hase im Pfeffer und es ist eindeutig die FF-Engine (Geko genannt), die
    den 100%-Wert falsch umsetzt. Schade.

    Ok, also Problem hat sich somit geklärt.
    "Carpe Diem" powered by positiv Feelings

  6. #6
    Forum Guru
    Registriert seit
    14.06.2004
    Ort
    Schleswig-Holstein
    Beiträge
    5.439
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Moin!

    Aus dem von dir geposteten Quelltext ist nicht zu erkennen, daß der Firefox etwas falsch interpretiert und erhlich gesagt fehlt mich auch der Glaube daran.

    Ich vermute vielmehr, daß deine Tabelle gar nicht richtig eingestellt ist und/oder du keine oder falsche Angaben zum Dokumententyp machst.
    Es ist auch einiger Unfug in deinem Quelltext drinnen, z.B. das fettgedruckte nicht sichtbare Zeichen, welchen Sinn soll so etwas machen?

    Im übrigen hättest du das gleiche Ziel viel einfacher ohne Javascript erreichen können, indem du die Zellen ganz einfach nur mit CSS richtig formatierst. Hat nämlich ein Besucher deiner HP Javascript deaktiviert, dann geht gar nichts mehr.

    G.a.d.M.

    Ronald

  7. #7
    Kaiserliche Hoheit
    Themenstarter

    Registriert seit
    22.02.2005
    Beiträge
    1.558
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Moment!

    Der Reihe nach:
    * meine Seite besitzt folgenden DOCTYPE
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                          "http&#58;//www.w3.org/TR/html4/loose.dtd">
    Dies bedeutet auch, dass sich der Browser nicht im Quirks-Mode befindet, sondern den HTML-Code standardtreu ausführen müsste.
    * meine Tabellen sind 100% in Ordnung. spricht: alle Attribute sind angegeben - stehen alle in "" usw. usf.
    * Quellcode ist auch durch den Validator gejagt worden. -> Tabelle i.O.
    * dass das noch innerhalb des b-Tags steht ist doch egal - es geht darum, dass das Pfeilchen fett gezeigt wird
    * und das mit dem JavaScript ist notwendig(!), da der momentan aktive Untermenüpunkt hinterlegt bleiben soll (siehe Pics)

    Ich sehe dass du schon eine Menge zu diesem Forum beigetragen hast, aber wie du siehst gibt es immer wieder Dinge die man
    nicht auf den ersten Blick sieht. ;-P

    Zudem liegt es eindeutig an der Angabe 100%, denn ich habe diesen Wert nun mit dem passenden Festwert (Pixelwert) ersetzt und
    nun macht FF den Fehler nicht. Deshalb denke ich schon, dass FF hier ein Problem hat. Auch wenn diesem Browser die bessere
    Engine nachgesagt wird...

    Problem hat sich ja nun erledigt.
    "Carpe Diem" powered by positiv Feelings

  8. #8
    Forum Guru
    Registriert seit
    14.06.2004
    Ort
    Schleswig-Holstein
    Beiträge
    5.439
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Zitat Zitat von Torty
    Ich sehe dass du schon eine Menge zu diesem Forum beigetragen hast, aber wie du siehst gibt es immer wieder Dinge die man
    nicht auf den ersten Blick sieht. ;-P
    Wie soll man das auch sehen, wenn du keine URL angibst und den Quelltext nur auszugsweise postest.

    Ich bleibe dabei: Ich glaube nicht, daß Firefox etwas verkehrt macht. Die meisten Computerfehler entstehen zwischen den Ohren des Users (hier besser des Webmasters).

    Ronald

  9. #9
    Kaiserliche Hoheit
    Themenstarter

    Registriert seit
    22.02.2005
    Beiträge
    1.558
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Zitat Zitat von Ronald
    Die meisten Computerfehler entstehen zwischen den Ohren des Users
    Unbestritten. Wobei gerade in Hinsicht auf Kompatibilität und "Code-Verständnis" der einzelnen Browser, es gerade auf
    diesem Gebiet reichlich andere Fehlerquellen gibt. Aber das weißt du sicher besser als ich. Meine Lehrzeit hat erst vor 1 Jahr begonnen.

    Ich werde sicher nicht den ganzen Code meiner Seite hier posten, denn das würde der Übersichtlichkeit nicht zuträglich sein. Stattdessen
    poste ich nur den Quellcode des Untermenüs, welches oben auf den Pics zu sehen ist. Ich denke das sollte ausreichen um zu sehen,
    dass mit der Tabelle schon alles i.O. ist:
    Code:
      
      <div class="submenu" style="width&#58;184px; height&#58;538px;">
      <table width="184" cellspacing="0" cellpadding="0" border="0" class="menutext">
    	    <tr style="height&#58;25px;"><td></td></tr>
          <tr class="submenuln">
    
    			  <td id="td401"
                width="100%" align="LEFT"
                onMouseOver="subMenuHighlighting&#40;401,'on'&#41;"
                onMouseOut="subMenuHighlighting&#40;401,'off'&#41;"
                onClick="self.location.href='index_moz.php?menu=4&sel=1'">
                    <span class="submenuarrow">»</span>
            Fotografie      </td>
          </tr>
              <tr class="submenuln">
    			  <td id="td402"
                width="100%" align="LEFT"
                onMouseOver="subMenuHighlighting&#40;402,'on'&#41;"
                onMouseOut="subMenuHighlighting&#40;402,'off'&#41;"
                onClick="self.location.href='index_moz.php?menu=4&sel=2'">
                    <span class="submenuarrow">»</span>
    
            Design      </td>
          </tr>
              <tr class="submenuln">
    			  <td id="td403"
                width="100%" align="LEFT"
                onMouseOver="subMenuHighlighting&#40;403,'on'&#41;"
                onMouseOut="subMenuHighlighting&#40;403,'off'&#41;"
                onClick="self.location.href='index_moz.php?menu=4&sel=3'">
                    <span class="submenuarrow">»</span>
            Illustration      </td>
          </tr>
    
              <tr class="submenuln">
    			  <td id="td404"
                width="100%" align="LEFT"
                onMouseOver="subMenuHighlighting&#40;404,'on'&#41;"
                onMouseOut="subMenuHighlighting&#40;404,'off'&#41;"
                onClick="self.location.href='index_moz.php?menu=4&sel=4'">
                    <span class="submenuarrow">»</span>
            Bildbearbeitung      </td>
          </tr>
              <tr class="submenuln">
    			  <td id="td405"
                width="100%" align="LEFT"
                onMouseOver="subMenuHighlighting&#40;405,'on'&#41;"
                onMouseOut="subMenuHighlighting&#40;405,'off'&#41;"
                onClick="self.location.href='index_moz.php?menu=4&sel=5'">
                    <span class="submenuarrow">»</span>
    
            Text      </td>
          </tr>
              <tr class="submenuln">
    			  <td id="td406"
                width="100%" align="LEFT"
                onMouseOver="subMenuHighlighting&#40;406,'on'&#41;"
                onMouseOut="subMenuHighlighting&#40;406,'off'&#41;"
                onClick="self.location.href='index_moz.php?menu=4&sel=6'">
                    <span class="submenuarrow">»</span>
            Druck      </td>
          </tr>
    
              <tr class="submenuln">
    			  <td id="td407"
                width="100%" align="LEFT"
                onMouseOver="subMenuHighlighting&#40;407,'on'&#41;"
                onMouseOut="subMenuHighlighting&#40;407,'off'&#41;"
                onClick="self.location.href='index_moz.php?menu=4&sel=7'">
                    <span class="submenuarrow">»</span>
            Film      </td>
          </tr>
              <tr class="submenuln">
    			  <td id="td408"
                width="100%" align="LEFT"
                onMouseOver="subMenuHighlighting&#40;408,'on'&#41;"
                onMouseOut="subMenuHighlighting&#40;408,'off'&#41;"
                onClick="self.location.href='index_moz.php?menu=4&sel=8'">
                    <span class="submenuarrow">»</span>
    
            Programmierung      </td>
          </tr>
          <script language="javascript" type="text/javascript">subMenuHighlighting&#40;getMenuID&#40;menu, subMenu&#41;,'shadow'&#41;;</script>
      </table>
      </div>
    Die verwendeten Klassen lauten:
    Code:
     .menutext        &#123; font-size&#58;14px; &#125; 
     .submenu         &#123; background-color&#58;#B9B9B9; color&#58;#303040; line-height&#58;24px; &#125;
     .submenuln       &#123; height&#58;24px; &#125;
     .submenuarrow    &#123; color&#58;#B5772F; &#125;
    Bezeichnenderweise stimmte die Darstellung wieder, wenn ich das Fenster maximierte. In diesem Fall wurde das Fenster wieder auf seine
    "feste" Größe von 1024*768 gebracht. Die FF-Engine berechnete dann wohl alles nochmal neu und diesmal richtig.

    Ob es nun ein FF-Bug ist oder nicht, spielt in meinem Fall keine Rolle mehr. Blöd wäre es natürlich, wenn ich auf die 100%-Funktionalität
    angewiesen wäre. Dann hätte ich wirklich ein Problem. Aber so ...

    Trotzdem Danke für deine Anregungen...
    "Carpe Diem" powered by positiv Feelings

Ähnliche Themen

  1. Mouseover Problem
    Von Freddylein im Forum HTML & CSS Forum
    Antworten: 0
    Letzter Beitrag: 04.05.2007, 17:00
  2. mouseover problem
    Von Aranja im Forum HTML & CSS Forum
    Antworten: 9
    Letzter Beitrag: 26.02.2007, 11:02
  3. Problem mit mouseover!!! :(
    Von Cthulhu im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 28.09.2006, 09:19
  4. Bei "mouseover"soll andere Fläche in Tabelle aktiv
    Von raffaelo im Forum HTML & CSS Forum
    Antworten: 7
    Letzter Beitrag: 26.03.2006, 22:10
  5. MouseOver in Tabelle
    Von zipfu im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 22.02.2005, 10:11

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •