IE7 - Text mit Querstreifen beim Scrollen

  • Hallo,

    auf der Seite gibt es ein Menü, welches über eine <ul> Liste dargestellt wird. Die <li> Elemente enthalten <div> Tags mit der Angabe float:left, damit die Listenelemente nebeneinander dargestellt werden. Die Liste befindet sich innerhalb eines <form> Tags.

    Wenn ich im IE7 unter XP oder Vista das Fenster so verkleinere, das ich vertikal scrolle muss und dann sehr langsam scrollen, dann werden die Listenelemente mit weißen Querstreifen (Schriftfarbe ist schwarz) dargestellt. Sieht so aus, als wenn der IE7 hier nicht richtig rendert. Ich habe auch schon geprüft, ob die Liste noch durch andere Elemente überlagert wird, dies ist aber nicht der Fall.

    Ist das ein Browserproblem oder könnte es am Aufbau der Seite/CSS liegen?

    Gruß
    Gunnar

  • Ok, hier mal ein Ausschnitt, unwichtiges habe ich mal weggelassen, die Struktur ist aber erhalten.

    Das ganze ist online unter http://shop.adidas.nl zu sehen, die CSS Files gibt es auch dort. Der hier eingefügte Code stellt nicht die Startseite dar, sondern die Seite nach dem Login.

    Den ganzen HTML Code habe ich nicht geschrieben, ich darf nur so ein paar Unschönheiten ausbügeln.

    Wenn Du noch mehr Infos brauchst, bitte fragen.

  • Hmm, also ich habe mir die Seite jetzt mehrmals im IE7 angesehen und kann beim besten Willen nicht entdecken. Ist dieser "Effekt", den Du beschreibst nur auf Deinem Rechner reproduzierbar oder hast Du es schon mal auf einem anderen Rechner gesehen. Bei mir tut sich jedenfalls nichts in dieser Richtung.
    Sorry:cry:

  • Hallo, hast Du Dir da einen Account angelegt, um in den Bereich My Account rein zu kommen?

    Wenn ja, konkret geht es um die Links Personal Information, Newsletter, Addressbook und Order History. Wenn Du das IE Fenster so klein machst, das Du scrollen musst, dann scrolle mal ganz langsam hoch und runter, so das die Links mal zu sehen sind und mal nicht. Der Effekt sollte dann auftreten.

    Habe es auf mehreren Rechnern reproduzieren können, leider.
    Ich stelle Morgen früh mal ein Bild rein, damit Du sehen kannst, was ich genau meine.

  • Nein ich habe keinen Account angelegt. Ich bin von dem Quellcode ausgegangen und habe mir die CSS-Dateien geholt und ein paar absolute Verweise zu den Grafiklinks gesetzt um etwas sehen zu können. Aber nix, nada.

  • ....yep, gesehen. Es handelt sich, nehme ich an um den gleichen Code

    HTML
    <form id="menuTab" name="menuTab" method="post" action="">
                          <div class="formGroup-lg-wide">
                                <ul>

    wie in dem HTML-Code, den Du gepostet hast. Die Seite ist nämlich nicht die gleiche!! Als erstes würde ich an Deiner Stelle mal die Fehler bereinigen (in Deinem geposteten Code). Da findest Du <div> -zu oft geschlossen vor usw. Die Formatierung deiner Formulareingaben sehe ich, vorsichtig ausgedrückt, als unglücklich und sehr unübersichtlich an.
    Hier einige Beispiele wie es besser gemacht wird:http://www.aspnetzone.de/blogs/peterbuc…lar-la-css.aspx
    oder http://www.style-sheets.de/guide/formular…er_css_layouten

    Es geht hier wohlgemerkt nur um den Aufbau/Formatierung der Formularteile. Maximal sollte ein Rahmen (div id="formaccount") zu Positionierung und der Festlegung der Grundeigenschaften vorhanden sein und der Rest wie in den Beispielen über die Elemente input, label usw. formatiert werden.

    Wenn das nicht hilft wirst Du schon mal die bewußte Seite (vom Screenshot) als Code zur Verfügung stellen müssen. Einen Account werde ich desshalb nicht anlegen.

  • Ja, der Code sollte der gleiche sein. Beim von mir geposteten Code habe ich einige Sachen heraus genommen, da das ganze mit JavaServerFaces gebaut ist und dort einiges, sagen wir mal suboptimal, umgesetzt wird.

    Du meinst also, es liegt am Aufbau des Formulars "menuTab" bzw. allgemein an den Formularen?

    Könntest Du das nochmal konkretisieren, damit ich gezielt nach einer Lösung suchen kann?

    Danke

  • Tja, ist halt nur eine Annahme, da hier etwas den Font überlagert. Ohne dem Code ist das eher wie Suppe mit dem Stäbchen essen. Einfacher Test wäre den Code per Drag and Drop auszutauschen. Wenn es dann immer noch genauso ist kollidiert etwas mit dem Font.

  • So, ich habe jetzt die Ursache für den Effekt gefunden.
    Es liegt daran, das für die Darstellung der "Links" Buttons verwendet werden, diese werden mittels CSS entsprechend designed, damit sie so aussehen, wie sie aussehen.
    Dabei wird background-color: transparent gesetzt, ich vermute, dass der IE7 hiermit ein Problem hat, zumindest beim langsamen Scrollen.

    Die eigentliche Ursache ist aber die Verwendung von Buttons anstatt von Links, ich weiß leider auch nicht, warum das so sein muss.