IE7 - Text mit Querstreifen beim Scrollen

Gunnar

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

yeti66

Da braucht es schon mal ein praktisches (Code) Beispiel!!

Gunnar

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

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title></title>

	<meta http-equiv="cache-control" content="no-cache, must-revalidate" />
	<META HTTP-EQUIV="PRAGMA" CONTENT="NO-CACHE" />
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<meta http-equiv="Content-Style-Type" content="text/css" />
	<meta http-equiv="expires" content="-1" />


	<link rel="stylesheet" href="/css/new/estore.css" />
	<link rel="stylesheet" href="/css/new/nl/estore.css" />
</head>


<body style="">
<div id="pageWrapper">
  <div id="pagePosition">
    <div id="j_id9" class="pageBuffer">
      <div id="j_id10">
        <form id="topNavigationForm" name="topNavigationForm" method="post" action="">
          <input type="hidden" id="topNavigationForm:lastVisitedURLGlobal" name="topNavigationForm:lastVisitedURLGlobal" value="" />
          <input type="hidden" id="topNavigationForm:lastVisitedURLFromBean" name="topNavigationForm:lastVisitedURLFromBean" value="" />
          <div id="topNavigationForm:j_id11" class="globalMasthead">
            <div id="topNavigationForm:j_id12" class="brand"><a href="/index.jsf" hreflang="&amp;lid=Home&amp;lpos=topNav"><img src="/images/new/SHOPLOGO.jpg" alt="[]" /></a></div>
            <div id="topNavigationForm:j_id15" class="languageSelector">
              <ul id="topNavigationForm:j_id16">
                <li id="topNavigationForm:j_id17"><a>Sprache</a></li>
							</ul>
					  </div>
					  <div id="topNavigationForm:j_id21" class="globalNavigation">
					    <ul id="topNavigationForm:j_id22">
					      <li id="topNavigationForm:j_id23"><a href="/myaccount/detail.jsf" hreflang="&amp;lid=Account&amp;lpos=topNav">MY ACCOUNT</a></li>
					      <li id="topNavigationForm:j_id26"><a id="topNavigationForm:newslettersLink" class="commandLink" hreflang="&amp;lid=Newsletters&amp;lpos=topNav" href="#" onclick="">NEWSLETTER</a></li>
					      <li id="topNavigationForm:j_id28"><a href="/hygiene/detail.jsf" hreflang="&amp;lid=Help&amp;lpos=topNav">HELP</a></li>
					      <li id="topNavigationForm:j_id31" class="last"><span id="topNavigationForm:miniCartForm"><a id="topNavigationForm:j_id32" class="shoppingCart" hreflang="&amp;lid=Cart&amp;lpos=topNav" href="#" onclick="">CART (0)</a></span></li>
					    </ul>
					  </div>
    			  <div class="jqmWindow" id="ex2"></div>
    	    </div>
    		  <input type="hidden" name="topNavigationForm" value="topNavigationForm" />
    		  <input type="hidden" name="autoScroll" value="" />
    		  <input type="hidden" name="topNavigationForm:_link_hidden_" value="" />
      		<input type="hidden" name="topNavigationForm:_idcl" value="" />
        </form>
				<div id="j_id36" class="primaryNavigation"></div>
				<form id="newProductSearchForm" name="newProductSearchForm" method="post" action="">
				  <input id="newProductSearchForm:j_id156" name="newProductSearchForm:j_id156" type="text" value="" class="hiddenButton" />
	        <div class="search">
			      <div>
			        <input id="newProductSearchForm:search" name="newProductSearchForm:search" type="text" value="" maxlength="50" class="textInput" />
			        <input id="newProductSearchForm:productSearchButton" name="newProductSearchForm:productSearchButton" type="image" src="/images/new/btn-search.gif" />
			        <a id="newProductSearchForm:submitLink" class="hiddenButton" href="#" onclick=""></a>
			      </div>
        	</div>
        	<input type="hidden" name="newProductSearchForm" value="newProductSearchForm" />
        	<input type="hidden" name="autoScroll" value="" />
        	<input type="hidden" name="newProductSearchForm:_idcl" value="" />
        	<input type="hidden" name="newProductSearchForm:_link_hidden_" value="" />
        </form>
      </div>
    </div>
    <div class="content2">
      <div id="j_id160" class="xlgContainer">
			  <div class="xlgContainer-top"></div>
			  <div class="xlgBuffer">			
				  <div class="lg-header" style="">
					  <h3>My Account</h3>
					  <form id="logoutForm" name="logoutForm" method="post" action=""><a id="logoutForm:logoutCommand" class="commandLink" href="#" onclick="">Logout</a>
					    <input type="hidden" name="logoutForm" value="logoutForm" />
					    <input type="hidden" name="autoScroll" value="" />
					    <input type="hidden" name="logoutForm:_idcl" value="" />
					    <input type="hidden" name="logoutForm:_link_hidden_" value="" />
            </form>				
				  </div>
				  <form id="backToHistoryForm" name="backToHistoryForm" method="post" action="">
					  <div class="rightLink"></div>
					  <input type="hidden" name="backToHistoryForm" value="backToHistoryForm" />
					  <input type="hidden" name="autoScroll" value="" />
					  <input type="hidden" name="backToHistoryForm:_idcl" value="" />
					  <input type="hidden" name="backToHistoryForm:_link_hidden_" value="" />
          </form>
          <form id="menuTab" name="menuTab" method="post" action="">
					  <div class="formGroup-lg-wide">
							<ul>
								<li class="left">
									<div class="menuTab"><input id="menuTab:linkToPersonalInfo" name="menuTab:linkToPersonalInfo" type="submit" value="Personal Information" onclick="" class="commandButtonAsUnderlinedLinkLeft" />
                    <a href="#" id="menuTab:linkToPersonalInfoLink" type="submit" class="hiddenButton"></a>
                    <input id="menuTab:linkToPersonalInfoMock" name="menuTab:linkToPersonalInfoMock" type="submit" value="Personal Information" onclick="clikcOnMenuElement('menuTab:linkToPersonalInfo','Do you want to proceed without saving your changes?'); return false;;" class="hiddenButton" /><span class="left"> | </span>
									</div>
								</li>
								<li class="left">
									<div class="menuTab"><input id="menuTab:linkToNewsletters" name="menuTab:linkToNewsletters" type="submit" value="Newsletter" onclick="if (!disableLinkInHitboxForm(this, 'abandon')) return false;;" class="commandButtonAsUnderlinedLinkLeft" /><a href="#" onclick="return oamSubmitForm('menuTab','menuTab:linkToNewslettersLink');" id="menuTab:linkToNewslettersLink" type="submit" class="hiddenButton"></a><input id="menuTab:linkToNewslettersMock" name="menuTab:linkToNewslettersMock" type="submit" value="Newsletter" onclick="clikcOnMenuElement('menuTab:linkToNewsletters','Do you want to proceed without saving your changes?'); return false;;" class="hiddenButton" /><span class="left"> | </span></div>
								</li>
								<li class="left">
									<div class="menuTab"><input id="menuTab:linkToAddressBook" name="menuTab:linkToAddressBook" type="submit" value="Address Book" onclick="if (!disableLinkInHitboxForm(this, 'abandon')) return false;;" class="commandButtonAsUnderlinedLinkLeft" /><a href="#" onclick="return oamSubmitForm('menuTab','menuTab:linkToAddressBookLink');" id="menuTab:linkToAddressBookLink" type="submit" class="hiddenButton"></a><input id="menuTab:linkToAddressBookMock" name="menuTab:linkToAddressBookMock" type="submit" value="Address Book" onclick="clikcOnMenuElement('menuTab:linkToAddressBook','Do you want to proceed without saving your changes?'); return false;;" class="hiddenButton" /><span class="left"> | </span></div>
								</li>
								<li class="left">
									<div class="menuTab"><input id="menuTab:linkToOrderHistory" name="menuTab:linkToOrderHistory" type="submit" value="Order History" onclick="if (!disableLinkInHitboxForm(this, 'abandon')) return false;;" class="commandButtonAsUnderlinedLinkLeftActive" disabled="disabled" /><a href="#" onclick="return oamSubmitForm('menuTab','menuTab:linkToOrderHistoryLink');" id="menuTab:linkToOrderHistoryLink" type="submit" class="hiddenButton"></a><input id="menuTab:linkToOrderHistoryMock" name="menuTab:linkToOrderHistoryMock" type="submit" value="Order History" onclick="clikcOnMenuElement('menuTab:linkToOrderHistory','Do you want to proceed without saving your changes?'); return false;;" class="hiddenButton" /></div>
								</li>
							</ul>										
							<div class="clear"></div>
						</div>
						<input type="hidden" name="menuTab" value="menuTab" />
						<input type="hidden" name="autoScroll" value="" />
						<input type="hidden" name="menuTab:_link_hidden_" value="" />
						<input type="hidden" name="menuTab:_idcl" value="" />
          </form>
			  </div>	
     		<div class="brdrB"></div>
			  <div class="xlgBuffer">
		      <h3 class="smMargL2">OrderHistory - Overview</h3>
	      </div>
	      <div id="j_id211" class="xlgContainer-bottom"></div>
	    </div>
	  </div>
	  <div id="j_id213">
	    <div class="footer">
		    <a target="_self"> <div class="company"><p id="footer:j_id217">©2008</p></div> </a>
		    <div class="links">
		      <ul id="footer:j_id221">
				    <li><a href="#">link</a></li>
				    <li><a href="#">Corporate Information</a></li>
    				<li><a href="#" hreflang="&amp;lid=ContactUs&amp;lpos=bottomNav" target="_self">Contact Us</a></li>
		    		<li><a href="#" hreflang="&amp;lid=PrivacyPolicy&amp;lpos=bottomNav" target="_self">Privacy Policy</a></li>
				    <li><a href="#" hreflang="&amp;lid=TermsOfUse&amp;lpos=bottomNav" target="_self">Terms of Use</a></li>
				  </ul>
		    </div>
	    </div>
	  </div>
	</div>	
	<div class="clear"></div>
</div>
</div>
</body>
</html>

Alles anzeigen

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.

Gunnar

Mit "Login" meine ich den Link "My Account", nur als Hinweis

yeti66

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

Gunnar

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.

yeti66

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.

Gunnar

So, hier mal ein Bild.

[Blockierte Grafik: http://www.bilder-space.de/thumb/zAMYKNxwfIlF0dj.gif]

Es geht um die Links ganz oben.

yeti66

....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.

Gunnar

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

yeti66

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.

Gunnar

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.