Mouseover-Effekt auf Tabellenzeilen

[André]

Hallo,

ich habe ein Problem mit dem Internet-Explorer.
Es handelt es sich um eine Navigationstabelle, in der auf jede Zeile ein Mouseover-Effekt gelegt wurde. Das Problem ist beim IE, dass wenn man auf den Bereich links neben dem Text kommt, dass er zwar den Hintergrund, nicht aber die Textfarbe ändert und der Text nicht mehr zu lesen ist.

Da könnt ihr Euch das angucken: www.juploen.de/beta

Eigenartiger Weise funktioniert das beim ersten Link noch, aber bei allen darunter nicht mehr.
Hat jemand eine Idee?

Viele Grüße und Danke schon jetzt,

André

[Thomas J.S.]

Hallo,

Das Problem ist beim IE, dass wenn man auf den Bereich links neben dem Text kommt, dass er zwar den Hintergrund, nicht aber die Textfarbe ändert und der Text nicht mehr zu lesen ist.

Eigenartiger Weise funktioniert das beim ersten Link noch, aber bei allen darunter nicht mehr.

Bei mir funktionierte nur der letzte Link nicht, wie gewünscht.
Du kannst das ganze aber auch ohne Javascript lösen:
----------------
.nav a {font-family:Verdana, Arial, Helvetica, sans-serif; font-size:0.8em; }

.nav a:link    { color:#ffffff; background-color:#004e80; text-decoration:none; font-weight:bold; display:block;}
.nav a:visited { color:#ffffff; background-color:#004e80; text-decoration:none; font-weight:bold; display:block;}
.nav a:hover   { color:#004e80; background-color:#ffffff; text-decoration:none; font-weight:bold; display:block;}
.nav a:active  { color:#004e80; background-color:#ffffff; text-decoration:none; font-weight:bold; display:block;}

---------------
          <td valign="top" bgcolor="#004E80" width="19%" height="2">
            <div align="right" class="nav">
    <a href="blubb">  Aktionen></a>
   </div>
          </td>

----------------

Und dabei kannst du deinen Kode auch um ein vielfaches vereinfachen.

Grüße
Thomas

[André]

Hallo Thomas,

danke erstmal für die schnelle Hilfe!
Ich hab damit echt ewig rumprobiert, aber es nicht zum Laufen bekommen.
So, wie es jetzt ist, bin ich eigentlich auch schon fast zufrieden, aber zwei Sachen sind im IE noch nicht ganz optimal, da du ja anscheinend sehr fit bist und ich mich schon die ganze Nacht damit rumschlage...vielleicht weisst du ja ne Lösung:

1. Im IE ist der Link jetzt nur der reine Text, das heisst der Teil der Spalte links neben dem Text dient (im IE) nicht als Link/Mouseover.
2. Wenn ich im IE auf einen Link klicke, und dann wieder zurückgehe, dann ist der zuletztgeklickte Link als "aktiv" gesetzt - aber deswegen leider unsichtbar...kann man das irgendwie verhindern?

Hier noch mal der Link dazu:
www.juploen.de/beta/

Grüße und nochmals Riesendank!!!

André

Und dabei kannst du deinen Kode auch um ein vielfaches vereinfachen.

Grüße
Thomas

[Jeena Paradies]

Hallo ,

1. Im IE ist der Link jetzt nur der reine Text, das heisst der Teil der Spalte links neben dem Text dient (im IE) nicht als Link/Mouseover.

Das funktioniert normalerweise im IE:

.menu a {
 display: block;
 width: 100%;
}

display: block muss sein, da man auf inline Elemente keine Breite anwenden darf.

Grüße
Jeena Paradies

[Thomas J.S.]

Hall André,

1. Im IE ist der Link jetzt nur der reine Text, das heisst der Teil der Spalte links neben dem Text dient (im IE) nicht als Link/Mouseover.
2. Wenn ich im IE auf einen Link klicke, und dann wieder zurückgehe, dann ist der zuletztgeklickte Link als "aktiv" gesetzt - aber deswegen leider unsichtbar...kann man das irgendwie verhindern?

So wie ich dir den Kode gepostet habe funktionierte es im IE 6 und Firbird (also auch im Mozilla).
Bevor ich mich jetzt weiter damit auseinandersetze, muss ich aber rückfragen:
Brauchst du diese Konstruktion aus <font><b><a>...  wirklich?
An sich würde schon reichen wenn du in der Tabellezelle eine eigene Klasse für die Links definieren würdest:
a.navintd:link {
display:block;
width:100%;
/* die andere eigenschaften für diese link-klasse */
}

<td ...>
<a class="navintd> ....</a>
</td>

Es ist eine ziemlich müsame Arbeit bei so einer Konstruktion die du jetzt hast (also mit <div><font><b><a> ..) alles zu Berücksichtigen, die Vererbungen, die sich wiedersprechende Formatierungen etc.
Wenn du keinen triffigen Grund dafür hast so einen kode zu verwenden, überlege dir meinen Vorschlag. Der würde dir wirklich viele Vorteile bringen: reduzierung der Kode (seite ladet schneller) womit er auch übersichtlicher wird, bei Änderungen brauchst du nur noch im CSS was ändern, könntest auf den Javascript verzichten, etc.

Grüße
Thomas

[André]

Hallo Thomas,

So wie ich dir den Kode gepostet habe funktionierte es im IE 6 und Firbird (also auch im Mozilla).
Bevor ich mich jetzt weiter damit auseinandersetze, muss ich aber rückfragen:
Brauchst du diese Konstruktion aus <font><b><a>...  wirklich?
An sich würde schon reichen wenn du in der Tabellezelle eine eigene Klasse für die Links definieren würdest:
a.navintd:link {
display:block;
width:100%;
/* die andere eigenschaften für diese link-klasse */
}

Habe ich das nicht heute Nacht schon geändert?
Ich glaube auch, dass es jetzt so ganz gut läuft, habe zwar ein bisschen mit Leerzeichen gepfuscht, aber mir scheint, dass der IE Probleme mit dem "display:block" hat, weil er es nur beim ersten bzw. zumindest uregelmäßig anwendet (wenn du sagst, bei dir ginge nur der letzte Link nicht).

Grüße,

André

[Thomas J.S.]

Hallo André,

Habe ich das nicht heute Nacht schon geändert?

Ja, doch. Es scheint irgendeiner Proxi noch dazwischengefunkt zu haben.

Ich glaube auch, dass es jetzt so ganz gut läuft, habe zwar ein bisschen mit Leerzeichen gepfuscht, aber mir scheint, dass der IE Probleme mit dem "display:block" hat, weil er es nur beim ersten bzw. zumindest uregelmäßig anwendet (wenn du sagst, bei dir ginge nur der letzte Link nicht).

Nein, das bezog sich auf dein Problem in deiner ersten Posting.
Also hier nochmal der Code, damit du auch nicht mit den Leerzeichen herumspieln musst (gestetet IE 6, Firebird 0.7 und Oper 7.11):

in den zellen kannst du auf width, height verzichten und die onmuse-sachen, solltest ud im <a> tun.

a.nav {font-family:Verdana, Arial, Helvetica, sans-serif; font-size:0.8em; text-decoration:none; font-weight:bold; display:block; width:100%; text-align:right; }
a.nav:link    { color:#ffffff; background-color:#004e80; }
a.nav:visited { color:#ffffff; background-color:#004e80; }
a.nav:hover   { color:#004e80; background-color:#ffffff; }
a.nav:active  { color:#004e80; background-color:#ffffff; }

<table width="100%" border="0" cellpadding="0" cellspacing="1" bordercolor="#336699" bgcolor="#336699">
  <tr bgcolor="#FFFFFF">
    <td valign="top" bgcolor="#004E80">
      <a class="nav" href="index.htm ">Aktionen ></a>
    </td>
  </tr>
  <tr bgcolor="#FFFFFF">
    <td valign="top" bgcolor="#004E80">
      <a class="nav" href="index.htm">Termine ></a>
    </td>
  </tr>
</table>

Grüße
Thomas

[André]

Hey super, jetzt funktioniert es wirklich perfekt - aber deine Lösung von heute nacht hatte hatte da noch nen kleinen Fehler. :-)

Ich hab da jetzt noch ein kleines anderes Problem, aber dafür mach ich mal nen neuen Thread auf, das wird sonst zu unübersichtlich... ;-)

Gibt es eigentlich ne Möglichkeit, innerhalb eines Threads "nach oben" zu kommen, ohne den "Zurück"-Button des Browsers zu bemühen?

Grüße,

-André

[Thomas J.S.]

Hallo André,

Gibt es eigentlich ne Möglichkeit, innerhalb eines Threads "nach oben" zu kommen, ohne den "Zurück"-Button des Browsers zu bemühen?

Stelle in deinen Usereinstellungen für das Forum ein, dass immer der gesamte Thread angezeigt wird.

Grüße
Thomas

[KD-one]

Hallo,

Ich glaube auch, dass es jetzt so ganz gut läuft, habe zwar ein bisschen mit Leerzeichen gepfuscht, aber mir scheint, dass der IE Probleme mit dem "display:block" hat, weil er es nur beim ersten bzw. zumindest uregelmäßig anwendet (wenn du sagst, bei dir ginge nur der letzte Link nicht).

Das Problem ist nicht nur auf den IE beschränkt, auch Mozilla spielt dabei teilweise verrückt.
Dieselbe Problematik hatte ich bei meinen Menüs und die konnte ich nach stundenlangem rumprobieren nur dadurch lösen, daß die Formate gemischt werden.
Bei width:xxxpx; height:xxxpx; spielt der IE mit, Mozilla zeigt aber obengenanntes Phänomen.
Bei width:inherit; height: inherit; spielt der IE verrückt, während es der Mozilla korrekt darstellt.
Irgendwann bin ich dann draufgekommen, daß das nur dann Browserübergreifend funktioniert, wenn die Formate gemischt werden, also so oder ähnlich: width:inherit;height:14px;
Warum dies auftritt und vor allem nicht immer, ist mir bis heute ein Rätsel.

Grüße,

André

Gruß

Kurt

[KD-one]

Hallo André,

ich habe ein Problem mit dem Internet-Explorer.

nicht nur du. :o)

Es handelt es sich um eine Navigationstabelle, in der auf jede Zeile ein Mouseover-Effekt gelegt wurde. Das Problem ist beim IE, dass wenn man auf den Bereich links neben dem Text kommt, dass er zwar den Hintergrund, nicht aber die Textfarbe ändert und der Text nicht mehr zu lesen ist.

Da könnt ihr Euch das angucken: www.juploen.de/beta

Hab ich und hat mich umgehauen...
Screenshot IE6.0 SP1:
<img src="http://faq.united-web.at/_test/andre.jpg" border="0" alt="">
Ich kann mir nicht vorstellen, daß du das so willst. :o)
Im Firebird ist die Schriftgröße normal, entsprechend der Überschrift "> Spiegelbild".

Zu deinem Hover-Problem: Einzige Möglichkeit, das zu verhindern, sehe ich darin, daß du a:active wie a:link definierst.

Gruß

Kurt

[André]

Hallo André,

Hab ich und hat mich umgehauen...
Screenshot IE6.0 SP1:
<img src="http://faq.united-web.at/_test/andre.jpg" border="0" alt="">
Ich kann mir nicht vorstellen, daß du das so willst. :o)
Im Firebird ist die Schriftgröße normal, entsprechend der Überschrift "> Spiegelbild".

Waaaaaas???
Also ich habe auch mit dem IE& SP1 getestet, bei mir ist es vollkommen in Ordnung. Hast du irgendwie die Schriftgrösse/Schriftgrad in deinem Internetexplorer verstellt?
Da fällt mir nämlich gerade auf, dass der IE nur teilweise die Schriftgrössen verstellt...

Ansonsten ist es bei mir bei normalem Schriftgrad usw. jetzt in allen Browsern eigentlic richtig...

Grüße,

-André

[KD-one]

Hallo,

Waaaaaas???
Also ich habe auch mit dem IE& SP1 getestet, bei mir ist es vollkommen in Ordnung. Hast du irgendwie die Schriftgrösse/Schriftgrad in deinem Internetexplorer verstellt?
Da fällt mir nämlich gerade auf, dass der IE nur teilweise die Schriftgrössen verstellt...

Ansonsten ist es bei mir bei normalem Schriftgrad usw. jetzt in allen Browsern eigentlic richtig...

Ja, du hattest recht. Aber DER Bug ist mir neu...

Gruß

Kurt