Mein Code wird in Firefox anders dargestellt als im IE6

marneu

Ich möchte die Anzeige wie im IE6 erreichen bzw. in beiden Browsern das gleiche Ergebnis. Kann mir jemand helfen, oder den entscheidenen Hinweis geben, wie ich gleiche Ergebinise erzielen kann?

Code

<head>
  <title>Explorer6 vs. Firefox</title>
<script language="JavaScript">
 function mouseOver(src,clrOver) {
     src.style.cursor = 'hand';
         src.style.backgroundColor = clrOver;
 }
 function mouseOut(src,clrIn) {
     src.style.cursor = 'default';
     src.style.backgroundColor = clrIn;
 }
 function mouseClick(src) {
     if(event.srcElement.tagName=='TD'){
         src.children.tags('A')[0].click();
     }
}
</script>
</head>
<body><B>Explorer6 vs. Firefox</B>
<table border="2" cellpadding="10">
    <tr>
      <td bgcolor="#E8FFE8"
	onclick="mouseClick(this);"
	onmouseout="mouseOut(this,'#E8FFE8');"
	onmouseover="mouseOver(this,'#D4D0C8');"
 bordercolorlight="#666666" bordercolordark="#E0E0E0">
      <h2><a href="#top">Explorer</a>


      </h2>
      </td>
      <td bgcolor="#FFFFE5"
	onclick="mouseClick(this);"
	onmouseout="mouseOut(this,'#FFFFE5');"
	onmouseover="mouseOver(this,'#D4D0C8');"
 bordercolorlight="#666666" bordercolordark="#E0E0E0">
      <h2><a href="#top">Firefox</a> </h2>
      </td>
    </tr>
</table>
</body>
</html>

Alles anzeigen

[/code]

bejot

Hallo marneu,
versuche es mal so:

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>Explorer6 vs. Firefox</title>
<script language="JavaScript" type="text/javascript">
function mouseOver(src,clrOver) {
src.style.cursor = 'hand';
src.style.backgroundColor = clrOver;
}
function mouseOut(src,clrIn) {
src.style.cursor = 'default';
src.style.backgroundColor = clrIn;
}
function mouseClick(src) {
if(event.srcElement.tagName=='TD'){
src.children.tags('A')[0].click();
}
}
</script>
  </head>
  <body>
    <B>Explorer6 vs. Firefox</B>
    <table  summary="Darstellung der Unterschiede" style="border:1px solid #000; border:collapse:collapse;" cellpadding="10">


      <tr>
        <td bgcolor="#E8FFE8"   onclick="mouseClick(this);"onmouseout="mouseOut(this,'#E8FFE8');"onmouseover="mouseOver(this,'#D4D0C8');" style="border:1px solid #A9A9A9;">
          <h2>
            <a href="#top">Explorer</a>

</h2>
        </td>
        <td bgcolor="#FFFFE5"onclick="mouseClick(this);" onmouseout="mouseOut(this,'#FFFFE5');"onmouseover="mouseOver(this,'#D4D0C8');"style="border:1px solid #A9A9A9;">
          <h2>


            <a href="#top">Firefox</a></h2>
        </td>
      </tr>
    </table>
  </body>
</html>

Alles anzeigen

marneu

Hallo Bejot,

das löst mein Problem leider nicht.

Bitte schau Dir den Code im IE6 an, dort wird der Cursor zur Hand wenn man das Tabellenfeld betritt und wieder zum Pointer wenn man es verläßt. Man kann auch einfach auf das Tebellenelement klicken um die Funktion "Link geklickt" auszulösen.
Dort erziehlt der Code optisch den Eindruck es handelt sich um flache Schaltflächen (dunkle Kanten unten und rechts, und helle oben und links) im Tabellen Element, beim Firefox ist es genau umgekehrt. Das einzige was hierbei gleich ist, ist das Wechseln des Huntergrudes bei dem Element.

Der Vorteil Deines Codes ist allerdings der, dass er, bis auf die Pointerfunktion, gleich aussieht. Aber das Verhalten ist es auch nicht.

lg .:Mark

bugcatcher

"hand" ist kein gültiger Wert. Hier weicht IE wieder vom Webstandard ab. Der richtige Wert dafür wäre "pointer" (den IE ab Version 6.0 gelernt hat), den Firefox auch richtig darstellt.

Ebenfalls ist der IE was eigen, was die Darstellung von inset & outset beim Rahmenstyle angeht. Wenn man IE inset sagt (in -> "eingelassen"), dann zeigt er es als herausgehobenes Element an. Benutzt man outset (also out -> heraus), dann stellt er es wie gedrückt dar. Also falschrum. Firefox machts logisch richtig, aber halt damit andersrum wie der IE. Da bleibt nur eine Browserweiche, bzw. ein CSS-Hack (z.B. per class einen passenden zustand für gedrückt und einen für herausstehent über die verwendung von border-left/right/top/bottom-color).

marneu

Das hat sehr geholfen!

Der Pointer wird jetzt richtig angezeigt und die Ergänzung um

Code

style="border-style: outset;"

brachte den richtigen Look.

Allerdings ist der Pointer jetzt irritierend, da die gewünschte Funktion "klicken auf das Tabellenelement" (oder auf den Link) nichts auslöst und immer die Schift/der Link gewählt werden muß. Hat hier noch jemand den entscheidenden Tipp für mich.

Danke inzwischen
.:Mark

MT4Life

Zitat von marneu

Allerdings ist der Pointer jetzt irritierend, da die gewünschte Funktion "klicken auf das Tabellenelement" (oder auf den Link) nichts auslöst und immer die Schift/der Link gewählt werden muß. Hat hier noch jemand den entscheidenden Tipp für mich.

Dies sollte mit Padding funktionieren. Schau dir mal folgende Webseite bzw. das angebotene Skript an: http://www.phpmyfaq.de/
Vielleicht hilfts dir weiter..

marneu

YEP! padding löst auch das Problem zufriedenstellend.

Danke an alle - Problemchen gelöst!