✔ Komische Icons im IE

A

amatuer

Grünschnabel
Hallo zusammen,

ich habe gerade ein Problem, welches ich mir einfach nicht erklären kann, bzw. welches ich nicht mal richtig erklären kann.
Ich bin gerade dabei, eine Webseite aufzubauen und nur im IE (Version7 und 8) bekomme ich manchmal (ich habe noch keine Regelmäßigkeit feststellen können...) komische Icons vor Listeneinträgen angezeigt. Sowas habe ich bisher noch nicht gesehen und in anderen Browser gibt es das Problem nicht. Daher hoffe ich, dass mir hier zumindest ein Hinweis gegeben werden kann, wonach ich suchen muss, um dieses Problem zu lösen, denn bisher weiß ich nicht mal, wie ich Google danach befragen soll. "Komische Icons im IE" und dergleichen führte bisher nicht zum gewünschten Erfolg. Also falls jemand dieses Phänomen kennt, wäre ich dankbar für jeden Hinweis, wie es abzustellen sein könnte.

Hier mal ein Screenshot:
ie_error.jpg


Vielen Dank für eure Hilfe!

Grüße
Frank
 
Hey Frank,

das ist in der Tat sehr komisch. Habe ich nun in meinen langjaehrigen Zeit als Web-Developer auch noch nicht erlebt. Meinst Du mit "Listeneinträgen" <ol>, <ul> usw. ? Wie hast Du die Elemente gestyled? (Koenntest das CSS eventuell posten)
 
Hallo MArc,

vielen Dank für deine Antwort! Ich weiß halt auch nicht, wie ich diese Zeichen deuten soll. Ich kann sie auch nicht markieren oder dergleichen, daher bin ich auf die Idee gekommen, dass sie in irgendeiner Form vom Browser generiert werden. In Opera und Firefox gibt es dieses Problem nicht.

Ja, mit "Listeneinträgen" meine ich <ul>.

So habe ich das Menü gestyled:
CSS: 
.nav-menu ul li a, .nav-menu ul li a:link, .nav-menu ul li a:visited {
    background-image: url("img/icons.gif");
    background-position: 1px -684px;
    background-repeat: no-repeat;
    color: #888888;
    display: block;
    font-weight: normal;
    line-height: 15px;
    height: 12px;
    margin: 0 0 10px;
    padding: 0 0 0 13px;
    text-decoration: none;
    font-family: Verdana,Arial,sans-serif;
    font-size: 11px;
}

.nav-menu ul li a:focus, .nav-menu ul li a:hover, .nav-menu ul li a:active {
    background-color: #FFFFFF;
    background-image: url("img/icons.gif");
    background-position: 1px -935px;
    color: #000066;
}
Ich hoffe du kannst damit was anfangen. Die Menüpunkte bekommen als Hintergrundgrafik den Pfeil. Dieser kommt aus der Datei icons.gif. In dieser Datei sind so gut wie alle Icons drin, die innerhalb dieser Seite verwendet werden. Mein zweiter Verdacht war also, mal zu gucken, ob sich diese komischen Zeichen vielleicht in dieser Datei verbergen und ich unsauber gearbeitet habe. Aber nein, diese Zeichen sind auch nicht in dieser Datei vorhanden. Ich weiß halt einfach nicht, wie ich dem Herr werden soll...


Grüße
Frank
 
Zuletzt bearbeitet von einem Moderator:
Mh, da scheint nichts auffallendes drin zu sein. Kann daher auch nur in's Blaue schiessen. Kommt man von Aussen auf diese Seite drauf? Dann koennte man es sich live anschauen.
 
Nein, kommt man leider nicht. Ich habe jetzt noch gesehen, dass diese Zeichen MANCHMAL verschwinden, wenn man mit der Maus über das Menü hovert, manchmal aber nicht. Es ist echt zum verrückt werden!
 
Sind die Zeichen denn auch da, wenn du folgende Zeile auskommentierst?

Code: 
background-image: url("img/icons.gif");
In beiden Selektoren (default und hover/active)
 
Hallo amatuer,

wenn du wirklich Hilfe bei dem "Problem" brauchst, dann zeige bitte mal das zum o.g. Stylesheet zugehörige HTML. Ansonsten werden in diesem Thread nur noch weitere quiz-ähnliche Vermutungen zu finden sein, wie das Markup wohl aussehen könnte.
 
Also hier mal das komplett HTML einer Seite. Nicht wundern, dass es so komisch formatiert ist, das CMS spuckt es so aus...
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"
xml:lang="en-gb"
lang="en-gb" >
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
<title>Repair Pictures | Engine Parts & Accessories Repair</title>
 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" href="/epar/misc/favicon.ico" type="image/x-icon" />
<link type="text/css" rel="stylesheet" media="all" href="/epar/modules/cck/theme/content-module.css?g" />
<link type="text/css" rel="stylesheet" media="all" href="/epar/modules/filefield/filefield.css?g" />
<link type="text/css" rel="stylesheet" media="all" href="/epar/modules/imagefield/imagefield.css?g" />
<link type="text/css" rel="stylesheet" media="all" href="/epar/modules/node/node.css?g" />
<link type="text/css" rel="stylesheet" media="all" href="/epar/modules/slideshow_creator/slideshow_creator.css?g" />
<link type="text/css" rel="stylesheet" media="all" href="/epar/modules/system/defaults.css?g" />
<link type="text/css" rel="stylesheet" media="all" href="/epar/modules/system/system.css?g" />
<link type="text/css" rel="stylesheet" media="all" href="/epar/modules/system/system-menus.css?g" />
<link type="text/css" rel="stylesheet" media="all" href="/epar/modules/user/user.css?g" />
<link type="text/css" rel="stylesheet" media="all" href="/epar/modules/cck/modules/fieldgroup/fieldgroup.css?g" />
<link type="text/css" rel="stylesheet" media="all" href="/epar/sites/all/themes/epar/style.css?g" />
<script type="text/javascript" src="/epar/misc/jquery.js?g"></script>
<script type="text/javascript" src="/epar/misc/drupal.js?g"></script>
<script type="text/javascript" src="/epar/modules/slideshow_creator/slideshow_creator.js?g"></script>
<script type="text/javascript" src="/epar/modules/jquery_plugin/jquery.cycle.min.js?g"></script>
<script type="text/javascript" src="/epar/sites/all/themes/epar/epar.js?g"></script>
<script type="text/javascript" src="/epar/sites/all/themes/epar/jquery.color.js"?g"></script>
<script type="text/javascript">
<!--//--><![CDATA[//><!--
jQuery.extend(Drupal.settings, { "basePath": "/epar/" });
//--><!]]>
</script>
<script type="text/javascript">
 
 
	function fadingContent(url) {
		$(".content").fadeOut("slow", function() { location.href = url; });
	}
	
</script>
<script type="text/javascript" src="/epar/sites/all/themes/epar/swfobject.js"></script>
 
<!--[if gte IE 6]>
<style type="text/css">
div.content {overflow-x:hidden;}
</style>
<![endif]-->
 
</head>
 
<body oncontextmenu="return false" >
 
<div id="wrapper">
 
    <!-- Error Meldungen (Debug) -->
   
	<div id="stage">
		<div id="header">
						<ul class="secondary-links"><li class="menu-156 first"><a href="/epar/index.php?q=node/1" title="Welcome to the EPAR DVD 2012">Home</a></li>
<li class="menu-177"><a href="/epar/index.php?q=node/29" title="Sales">Sales Contacts</a></li>
<li class="menu-167"><a href="/epar/index.php?q=node/5" title="Support">Support</a></li>
<li class="menu-166 last"><a href="/epar/index.php?q=node/4" title="Impressum">Impressum</a></li>
</ul>						<div id="heading">
				
			</div>
		</div>
 
		<div id="navigation" class="sort-pages modify-pages mainNavigation"> 
			<ul class="menu"><li class="collapsed first active-trail"><a href="/epar/index.php?q=node/2" title="Engine Parts &amp; Accessories Repair">Engine Parts &amp; Accessories Repair</a></li>
<li class="collapsed"><a href="/epar/index.php?q=node/165" title="Company Profile">Lufthansa Technik AG</a></li>
<li class="leaf last"><a href='http://epar-test.ham.dlh.de/epar/sites/default/forwarding.html' title='Start DVD Price Catalog 2012' target='_blank'>Start DVD Price Catalog 2012</a></li>
</ul>		</div>
 
		<div id="breadCrumbNavigation">
			<ul class="breadcrumbs lfr-component">
				
			</ul>
		</div>
		
		<div id="content">
			<div id="main-content" class="columns-2" role="main">
				<div class="portlet-layout">
					<div id="column-1" class="aui-w30 portlet-column portlet-column-first">
						<div id="layout-column_column-1" class="portlet-dropzone portlet-column-content portlet-column-content-first">
							<div class="portlet-body">
								<div class="nav-menu nav-menu-style-">
									<h2>Engine Parts & Accessories Repair</h2>
									<ul class="menu"><li class="leaf first"><a href="/epar/index.php?q=node/28" title="Capabilities &amp; Prices 2012">Capabilities &amp; Prices 2012</a></li>
<li class="collapsed"><a href="/epar/index.php?q=node/9" title="Special Repairs">Special Repairs</a></li>
<li class="collapsed"><a href="/epar/index.php?q=node/10" title="EPAR - Industrial Services">Industrial Services</a></li>
<li class="collapsed"><a href="/epar/index.php?q=node/162" title="">Contacts</a></li>
<li class="leaf"><a href="/epar/index.php?q=node/32" title="Network &amp; Shipping Adresses">Network &amp; Shipping Adresses</a></li>
<li class="collapsed"><a href="/epar/index.php?q=node/11" title="Repair order status via Internet">Customer Status Report</a></li>
<li class="leaf"><a href="/epar/index.php?q=node/173" title="General Terms &amp; Conditions">General Terms &amp; Conditions</a></li>
<li class="leaf"><a href="/epar/index.php?q=node/38" title="Certificates">Certificates</a></li>
<li class="expanded last active-trail"><a href="/epar/index.php?q=node/39" title="Multimedia">Multimedia</a><ul class="menu"><li class="leaf first"><a href="/epar/index.php?q=node/175" title="Flyer">Flyer</a></li>
<li class="leaf"><a href="/epar/index.php?q=node/176" title="Product Videos">Product Videos</a></li>
<li class="leaf last active-trail"><a href="/epar/index.php?q=node/174" title="Repair Pictures" class="active">Repair Pictures</a></li>
</ul></li>
</ul>								</div>
							</div>
						</div>
					</div>
					<div id="column-2" class="aui-w70 portlet-column portlet-column-last">
						<h2>Repair Pictures</h2>
 
						<div id="node-174" class="node clear-block">
 
 
 
  <div class="meta">
  
    </div>
 
  <div class="content">
    <span class='ssc ' id='ssc-40891' style='width:400px;'>
<span id='ssc-content-40891' class='ssc-content' style="height:320px;width:400px;">
<span id='ssc-slide-40891-0'>
<span class='ssc-title'>CF6-80C Module 3 Rotor</span>
<span class="ssc-description"></span>
<span class='ssc-main'><img src="/epar/sites/default/slideshow/CF6-80C_Module_3_Rotor_01.jpg" alt="CF6-80C Module 3 Rotor" title="CF6-80C Module 3 Rotor"  />
</span>
</span>
<span id='ssc-slide-40891-1'>
<span class='ssc-title'>Plasmaspray</span>
<span class="ssc-description"></span>
<span class='ssc-main'><img src="/epar/sites/default/slideshow/Plasmaspray_01.jpg" alt="Plasmaspray" title="Plasmaspray"  />
</span>
</span>
<span id='ssc-slide-40891-2'>
<span class='ssc-title'>Drying Chamber NDT</span>
<span class="ssc-description"></span>
<span class='ssc-main'><img src="/epar/sites/default/slideshow/Rissprüfung_04.jpg" alt="Drying Chamber NDT" title="Drying Chamber NDT"  />
</span>
</span>
<span id='ssc-slide-40891-3'>
<span class='ssc-title'>Non Destructive Testing</span>
<span class="ssc-description"></span>
<span class='ssc-main'><img src="/epar/sites/default/slideshow/Rissprüfung_05.jpg" alt="Non Destructive Testing" title="Non Destructive Testing"  />
</span>
</span>
<span id='ssc-slide-40891-4'>
<span class='ssc-title'>Fireproof Blade Painting</span>
<span class="ssc-description"></span>
<span class='ssc-main'><img src="/epar/sites/default/slideshow/feuerfeste_Sockellackierung.jpg" alt="Fireproof Blade Painting" title="Fireproof Blade Painting"  />
</span>
</span>
<span id='ssc-slide-40891-5'>
<span class='ssc-title'>Fan Blades</span>
<span class="ssc-description"></span>
<span class='ssc-main'><img src="/epar/sites/default/slideshow/blades_01.jpg" alt="Fan Blades" title="Fan Blades"  />
</span>
</span>
<span id='ssc-slide-40891-6'>
<span class='ssc-title'>Accessory Testing</span>
<span class="ssc-description"></span>
<span class='ssc-main'><img src="/epar/sites/default/slideshow/Geraetewerkstatt_Pruefstand_03.jpg" alt="Accessory Testing" title="Accessory Testing"  />
</span>
</span>
<span id='ssc-slide-40891-7'>
<span class='ssc-title'>Ultrasonic Cleaning</span>
<span class="ssc-description"></span>
<span class='ssc-main'><img src="/epar/sites/default/slideshow/Geraetewerkstatt_Ultraschallbad_06.jpg" alt="Ultrasonic Cleaning" title="Ultrasonic Cleaning"  />
</span>
</span>
<span id='ssc-slide-40891-8'>
<span class='ssc-title'>PW4000 LPT Shaft Painting</span>
<span class="ssc-description"></span>
<span class='ssc-main'><img src="/epar/sites/default/slideshow/PW4000_LPT_Shaft_Lackieren_07.jpg" alt="PW4000 LPT Shaft Painting" title="PW4000 LPT Shaft Painting"  />
</span>
</span>
<span id='ssc-slide-40891-9'>
<span class='ssc-title'>Non Destructive Testing Fan Blade</span>
<span class="ssc-description"></span>
<span class='ssc-main'><img src="/epar/sites/default/slideshow/Rissprüfung_18.jpg" alt="Non Destructive Testing Fan Blade" title="Non Destructive Testing Fan Blade"  />
</span>
</span>
<span id='ssc-slide-40891-10'>
<span class='ssc-title'>HPT Nozzle Guide Vane braze-alloy application</span>
<span class="ssc-description"></span>
<span class='ssc-main'><img src="/epar/sites/default/slideshow/Loetmittelauftrag_02.jpg" alt="HPT Nozzle Guide Vane braze-alloy application" title="HPT Nozzle Guide Vane braze-alloy application"  />
</span>
</span>
<span id='ssc-slide-40891-11'>
<span class='ssc-title'>Combustor Brazing preparation</span>
<span class="ssc-description"></span>
<span class='ssc-main'><img src="/epar/sites/default/slideshow/Combustor_Loeten_05.jpg" alt="Combustor Brazing preparation" title="Combustor Brazing preparation"  />
</span>
</span>
<span id='ssc-slide-40891-12'>
<span class='ssc-title'>Piston honing</span>
<span class="ssc-description"></span>
<span class='ssc-main'><img src="/epar/sites/default/slideshow/Kolbenhonen_02.jpg" alt="Piston honing" title="Piston honing"  />
</span>
</span>
<span id='ssc-slide-40891-13'>
<span class='ssc-title'>Disassembled IDG</span>
<span class="ssc-description"></span>
<span class='ssc-main'><img src="/epar/sites/default/slideshow/IDG_demontiert.jpg" alt="Disassembled IDG" title="Disassembled IDG"  />
</span>
</span>
<span id='ssc-slide-40891-14'>
<span class='ssc-title'>Replacement of Abradable Seal</span>
<span class="ssc-description"></span>
<span class='ssc-main'><img src="/epar/sites/default/slideshow/Oil_Seal_Beschichtung_Teflon_02.jpg" alt="Replacement of Abradable Seal" title="Replacement of Abradable Seal"  />
</span>
</span>
<span id='ssc-slide-40891-15'>
<span class='ssc-title'>Spot Welding Honeycomb</span>
<span class="ssc-description"></span>
<span class='ssc-main'><img src="/epar/sites/default/slideshow/Spot_Welding_Honeycomb_02.jpg" alt="Spot Welding Honeycomb" title="Spot Welding Honeycomb"  />
</span>
</span>
<span id='ssc-slide-40891-16'>
<span class='ssc-title'>CF6-80 Bearing Inspection</span>
<span class="ssc-description"></span>
<span class='ssc-main'><img src="/epar/sites/default/slideshow/Kugellagerpruefung_CF6-80_Lager_1_01.jpg" alt="CF6-80 Bearing Inspection" title="CF6-80 Bearing Inspection"  />
</span>
</span>
<span id='ssc-slide-40891-17'>
<span class='ssc-title'>Trent 500 LPT Cooling Manifold Rework</span>
<span class="ssc-description"></span>
<span class='ssc-main'><img src="/epar/sites/default/slideshow/Trend_500_LPT_Cooling_Manifold_Nacharbeit_02.jpg" alt="Trent 500 LPT Cooling Manifold Rework" title="Trent 500 LPT Cooling Manifold Rework"  />
</span>
</span>
<span id='ssc-slide-40891-18'>
<span class='ssc-title'>PW4000 Cooling Welding</span>
<span class="ssc-description"></span>
<span class='ssc-main'><img src="/epar/sites/default/slideshow/PW4000_Cooling_Schweißen.jpg" alt="PW4000 Cooling Welding" title="PW4000 Cooling Welding"  />
</span>
</span>
<span id='ssc-slide-40891-19'>
<span class='ssc-title'>Non Destructive Testing</span>
<span class="ssc-description"></span>
<span class='ssc-main'><img src="/epar/sites/default/slideshow/Rissprüfung_20.jpg" alt="Non Destructive Testing" title="Non Destructive Testing"  />
</span>
</span>
<span id='ssc-slide-40891-20'>
<span class='ssc-title'>CFM56-5C LPT Tube Cooling Section Replacement</span>
<span class="ssc-description"></span>
<span class='ssc-main'><img src="/epar/sites/default/slideshow/CFM56-5C_LPT_Tube_Cooling_Sektionswechsel_02.jpg" alt="CFM56-5C LPT Tube Cooling Section Replacement" title="CFM56-5C LPT Tube Cooling Section Replacement"  />
</span>
</span>
</span>
<a href="/epar/index.php?q=node/174&amp;ssc=40891%2C21" id="ssc-previous-40891" class="Array active">Previous</a> <span class='ssc-index' id='ssc-index-40891'>Slide <span class='ssc-current' id='ssc-current-40891'>1</span>/21 </span><a href="/epar/index.php?q=node/174&amp;ssc=40891%2C2" id="ssc-next-40891" class="Array active">Next</a>
<SCRIPT TYPE="text/javascript"> 
if(typeof(window['ssc_settings'])=='undefined') { ssc_settings = new Object(); }
ssc_settings['40891'] = new Object();
ssc_settings['40891'].pause = true;
ssc_settings['40891'].next = '#ssc-next-40891';
ssc_settings['40891'].prev = '#ssc-previous-40891';
</script>
</span>
<div id="slideshow-text">Point mouse pointer on picture to stop the slideshow.</div>  </div>
 
  </div>					</div>
				</div>
			</div>
		</div>
		<div>
			<div id="footer">
				<div class="footer">
					<div id="footerNavigation">
						<span class="copyright"><a href="?q=node/4">&copy;</a> Lufthansa Technik AG</span>
					</div>
				</div>
			</div>
		</div>
		
			
						<div id="edit_navigation" class="navigation_block">
				<div class="sub_navigation_headline">Content-Admin</div>
				<div class="tabs"><li class="active" ><a href="/epar/index.php?q=node/174" class="active">View</a></li>
<li ><a href="/epar/index.php?q=node/174/edit">Edit</a></li>
</div>
			</div>
					
    </div>
</div>
</body>
</html>
Und so sieht das dann aus:
http://www.sound-of-havoc.de/ie_error_2.jpg
 
Zuletzt bearbeitet von einem Moderator:
Ok, ich glaube, den Bug kenn ich doch:

Versuch folgendes:
1. .nav-menu ul li { position: relative; }
2. lass bei
Code: 
.nav-menu ul li a:focus, .nav-menu ul li a:hover, .nav-menu ul li a:active {
das `background-image` weg.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück