Komisches Problem in einem JS Popup

[infernalshade]

Mal eine Design-Technische Frage....

Ich hab folgendes Menü:

<div class="naviitemholder">
<table width="240" border="0" cellspacing="0" cellpadding="0" style="background-color:transparent; border:none;">
  <tr>
    <td colspan="2" class="naviitem"><a href="javascript:SetLink1();"><div>&nbsp;Startseite</div></a></td>
  </tr>
  <tr>
    <td width="10">&nbsp;</td>
    <td width="230" class="navisubitem"><a href="javascript:SetLink2();">
      <div>&nbsp;Objekte anzeigen</div></a></td>
  </tr>
  <tr>
    <td width="10">&nbsp;</td>
    <td width="230" class="navisubitem"><a href="javascript:SetLink3();">
      <div>&nbsp;Objekte erfassen</div></a></td>
  </tr>
  <tr>
    <td width="10">&nbsp;</td>
    <td width="230" class="navisubitem"><a href="javascript:SetLink4();">
      <div>&nbsp;Objekte bearbeiten</div></a></td>
  </tr>
  <tr>
    <td width="10">&nbsp;</td>
    <td width="230" class="navisubitem"><a href="javascript:SetLink5();">
      <div>&nbsp;Objekte l&ouml;schen</div></a></td>
  </tr>
</table>
</div> 

und dazu folgendes CSS:

.naviitemholder { position:absolute; width:240px; left:5px; top:5px; }

.naviitem { left:5px; top:5px; width:240px; height:20px; font-family:Verdana, Arial, Helvetica, sans-serif;
color:#FFFFFF; background-image:url(../images/navi_bg.png); background-repeat:repeat-x; font-size:10px;
line-height:20px; font-weight:bold; text-decoration:none; }
.naviitem a { text-decoration:none; color:#FFFFFF; }
.naviitem:hover { background-image:url(../images/navi_bg_hover.png); }
.naviitem:hover a { text-decoration:none; color:#FFFFFF; }

.navisubitem { top:5px; width:90%; height:20px; font-family:Verdana, Arial, Helvetica, sans-serif; color:#FFFFFF;
background-image:url(../images/navi_bg_sub.png); background-repeat:repeat-x; font-size:10px; line-height:20px;
font-weight:bold; text-decoration:none; }
.navisubitem a { text-decoration:none; color:#FFFFFF; }
.navisubitem:hover { background-image:url(../images/navi_bg_sub_hover.png); }
.navisubitem:hover a { text-decoration:none; color:#FFFFFF; } 

so und wenn ich jetzt über die menüpunkte fahre ist zwischen dem wechsel von der nicht-hover-grafik zu der hover-grafik eine pause...also da zeigt er kurzzeitig mal gar kein bild an! woher kommt das?

[Kropff]

1. code umbrechen!
2. geschieht das nur im ie6?

wenn ja, dann liegt es daran, dass die bilder zu groß sind. der ie6 cached keine bilder, die über background eingebunden werden. nein, der lädt die jedesmal zur laufzeit. und wenn die dann eine bestimmte größe haben, dauert es halt ein klein wenig und das führt zu besagten effekt.

lösung: gibt es nicht, außer die hintergrundbilder von der größe her so lange eindampfen, bis der ruckler weg ist.

gruß
peter

[infernalshade]

der code so immer noch nicht ok? wenn nein müsste ich für 1024*768 umbrechen O.o

im ie6 hab ichs noch gar nichts probiert! nur im ie7!

hatte vorher auch ein komische phänomen...ich hab eine 1px breite und 20px hohe hintergrundgrafik hergenommen mit repeat-x...naja hat super ausgeschaut, ABER wenn ich das fenster minimiert und wieder maximiert hab waren ganz komische durchsichtige streifen im hintergrund der td's! aus diesem grund hab ich als grafiken dateien hergenommen die so breit sind wie der menüpunkt selber, also nix mit repeat-x oder so!

so sind jetzt die streifen weg ABER der beschriebene effekt taucht auf...

[Kropff]

EDIT:

---

ups, forum hatte schluckauf.

---

peter

[Kropff]

tds? du arbeitest noch immer mit layout-tabellen? da wird wohl auch dein erstes problem gelegen haben, den komplexe tabellen zu rendern ist bei allen browsers heikel.

ABER der beschriebene effekt taucht auf.

und wie ich schon sagte, kannst du dagegen nichts machen.
btw: ie7 macht den müll auch?

gruß
peter

[infernalshade]

ich hatte vorher div's keine angst, da hatte ich das gleiche problem!

und eine tabelle mit 5 zeilen und 2 spalten würd ich jetz alles andere als komplex bezeichnen auf der seite liegt ja nur diese eine tabelle drin, sonst nix!

wie gesagt im ie6 hab ichs noch nicht ausprobiert, nur im ie7! und der macht den müll wie du es sagst

EDIT: ausserdem liegt das komplette skript bei mir lokal in meinem xampp! da dürfte so ne mini-grafik pillepalle sein

[Kropff]

u.u. ein online-beispiel verfügbar?

gruß
peter

[infernalshade]

ne leider nicht ich werd morgen früh mal ein kurzes vid machen damit man sieht was ich mein!

[infernalshade]

So, vid gemacht aber sieht man leider nicht gut...ähm mir ist aufgefallen das das nur im ie7 auftritt, firefox, netscape,opera usw machen das nicht!

[tontechniker]

Du kannst das Problem umgehen indem du beide Zustände in einer Grafik ablegst und dann nur die Position variierst.

[infernalshade]

achso du meinst mit background-position?

[Kropff]

ja, stimmt, den hack hatte ich total vergessen. und das funktioniert sogar einwandfrei, wenn das bild sauber ist.

gruß
peter

[infernalshade]

cool, das muss ich gleich mal ausprobieren, dankeschön

mfg

[infernalshade]

so habs jetzt probiert und siehe da, funktioniert ohne probleme!

vielen dank!