Internet Explorer 11 macht Murx (oder ich...)

hopsli · 23. Januar 2015

Hallo,
ich bin neu hier und mit hmtl5 bin ich es auch.
Ich habe ein Problem mit dem Internet Explorer 11. Bei einer Testdatei zeigt er mir alles so an, wie ich will:

HTML

<!doctype html>
<html lang="de">
<head>
 <meta charset="UTF-8">
 <style>
body { background-color:#1F5BA3;font-family:Arial;color:#fff; }
#logo  { position:absolute; top:20px; left:20px; width:184px; height:94px;}




#menue {position:absolute;top:130px;left:20px;width:220px;border:0px solid #84B4ED;font-face:Verdana;overflow:visible;}
#menue ul { margin:0;padding:0; list-style: none; }
#menue li.haupt    		{position:relative; float:left; margin-bottom:-1px; width:184px; background:#173D7B; }
#menue li.haupt_hi 		{position:relative; float:left; margin-bottom:-1px; width:184px; background:#173D7B; }
#menue li.haupt_hi_s   	{position:relative; float:left; width:184px; background:#173D7B; }
#menue li.haupt_subm	{position:relative; float:left; margin-bottom:-1px; width:184px; background:#173D7B;background-image:url(pf.gif); }
#menue li.haupt_hisubm  {position:relative; float:left; margin-bottom:-1px; width:184px; background:#102C59;background-image:url(pf_u.gif); }
#menue li.sub1 	{position:relative; float:left; margin-bottom:-1px; width:184px; background:#102C59; }
#menue li.sub1hi   {position:relative; float:left; margin-bottom:-1px; width:184px; background:#102C59; }
#menue li.sub2   {position:relative; float:left; margin-bottom:-1px; width:184px; background:#39465B; }
#menue li ul { margin-top:-1px;}
#menue li a {display:block; color:#fff; text-decoration:none; border:1px solid #84B4ED; }
#menue li.haupt a, li.haupt_hi a, li.haupt_subm a, li.haupt_hisubm a  {padding:3px 5px;font-weight:bold;font-size:10pt;}
#menue li.haupt_hi a {color:#84B4ED;}
#menue li.sub1 a  {padding:3px 5px 3px 15px;font-weight:bold;font-size:9pt;}
#menue li.sub1hi a  {padding:3px 5px 3px 15px;font-weight:bold;font-size:9pt;color:#84B4ED;}
#menue li.sub2 a {padding:3px 5px 3px 20px;font-size:8pt;}
#menue li a:hover {background-color:#84B4ED;color:#fff; }
#menue .startli {color:#B9D5F8;}




img { border:0px;}
 </style>
 <script type="text/javascript" src="js/scripts.js"></script>
<title>Titel</title>
</head>




<body>

	<header id="logo"><a href="index.php"><img src="images/logo.gif" width="184" height="95" alt="logo" /></a></header>
	<nav id="menue">

<ul>
 <li class="haupt_hi"><a href="index.php">Home</a></li>
 <li class="haupt_subm"><a href="link.php">link</a></li>
 <li class="haupt_subm"><a href="link.php">link</a></li>
 <li class="haupt_subm"><a href="link.php">link</a></li>




	</nav>




</body>
</html>

Alles anzeigen

In meinem Ernstfall macht er aber etwas anderes, falsches. Ich werde noch wahnsinnig!!!
Schaut her:

HTML

<!doctype html>
<html lang="de">
<head>
 <meta charset="UTF-8">




 <style>
 	body { background-color:#1F5BA3;font-family:Arial;color:#fff; }
/* Home */
#logo  { position:absolute; top:20px; left:20px; width:184px; height:94px;}




#menue {position:absolute;top:130px;left:20px;width:220px;border:0px solid #84B4ED;font-face:Verdana;overflow:visible;}
#menue ul { margin:0;padding:0; list-style: none; }




#menue li.haupt_hi     	{position:relative; float:left; margin-bottom:-1px; width:184px; background:#173D7B; }




#menue li.haupt_subm	{position:relative; float:left; margin-bottom:-1px; width:184px; background:#173D7B;background-image:url(pf.gif); }







#menue li ul { margin-top:-1px;}
#menue li a {display:block; color:#fff; text-decoration:none; border:1px solid #84B4ED; }
#menue li.haupt a, li.haupt_hi a, li.haupt_subm a, li.haupt_hisubm a  {padding:3px 5px;font-weight:bold;font-size:10pt;}
#menue li.haupt_hi a {color:#84B4ED;}
#menue li a:hover {background-color:#84B4ED;color:#fff; }
#menue .startli {color:#B9D5F8;}




img { border:0px;}
 </style>




<title>Titel</title>
</head>




<body>

	<div id="logo"><a href="index.php"><img src="logo.gif" width="184" height="95" alt="Logo" /></a></div>
<nav id="menue">
<ul>
 <li class="haupt_hi"><a href="index.php">Home</a></li>
 <li class="haupt_subm"><a href="link1.php">Link 1</a></li>
 <li class="haupt_subm"><a href="link2.php">Link 2</a></li>
 <li class="haupt_subm"><a href="link3.php">Link 3</a></li>
 <li class="haupt_subm"><a href="link4.php">Link 4</a></li>
 <li class="haupt_subm"><a href="link5.php">Link 5</a></li>
 <li class="haupt_subm"><a href="link6.php">Link 6</a></li>
</ul>
</nav>




</body>
</html>

Alles anzeigen

Ich finde den Fehler nicht! Und ich bin leider noch sehr neu in Sachen html5...

Basi · 23. Januar 2015

Was genau ist jetzt das Problem? Und wo liegt bei dir der Unterschied zwischen Testdatei und Ernstfall?

Du musst etwas mehr Informationen raus rücken was schief gelaufen ist, es handelt sich ja offenbar auch nicht um den gleichen Quellcode.

Wenn es dir um die Verschiebung im Quellcode geht: Das ist sicher ärgerlich aber völlig egal, zum Zeitpunkt der Ausgabe muss der Quellcode für den Menschen nicht mehr lesbar sein.

Nitamud · 23. Januar 2015

CSS

font-face:Verdana;

Zeile(9)

Das gibt es so nicht.
Das gibt es nur so:

@font-face {

font-family: Verdana;

}

http://www.w3.org/TR/css3-webfonts/#at-font-face-rule

Sonst sehe ich da gerade nichts

Was passiert bei dir denn im IE?

mfg

Edit:

War die falsche Stelle die ich zitiert habe.

Danke für den Hinweis Basiii

Basi · 23. Januar 2015

Wieso sollte man seine Schriftgröße nicht wie gewohnt durch font-size definieren und was hat das mit font-face zu tun?

hopsli · 25. Januar 2015

Hallo an Euch alle,
sorry, meine Fehlerbeschreibung war kryptisch. Der css-Fehler war nicht das Problem, aber stimmt, das muss ich in Ordnung bringen. Danke für den Hinweis.
Nachdem ich am Freitag einfach nur noch verzweifelt war, habe ich den Gegentest auch nicht mehr ordentlich gemacht, jetzt merke ich: Beide Quellcodes machen im IE das, was sie sollen.
Aber in dem deutlich komplexeren Quellcode, den ich Euch ersparen wollte, macht der Internet Explorer in dieser schmalen Beispielversion zwar alles richtig.
Wenn ich dann aber noch den kompletten Content mit hineingebe, macht der IE 11 den klassischen Fehler:

HTML

<nav id="menue"></nav>
<ul>...</ul>
</nav><//nav>

Und das, während im Quellcode alles richtig steht.

Das war, was ich einfach nicht verstehe. Irgendwo muss ein Fehler sein, offensichtlich nicht an dieser Stelle, aber ich weiß nicht, worauf ich achten muss, um das Problem in den Griff zu bekommen.

Vielleicht habt Ihr eine Idee, was hier falsch laufe könnte, auch ohne Euch mit den 150 Zeilen Quellcode beschäftigen zu müssen. Dass es mit dem, was zwischen <nav> und </nav> steht, zu tun hat, schließe ich eigentlich aus.
Bitte entschuldigt diesen chaotischen Thread, er ist der Verzeiflung zu verdanken.

wolf · 25. Januar 2015

Lade deinen Code mal hier https://gist.github.com/ oder sonstwo hoch ( komplett ) .. dann schauen wir mal weiter

hopsli · 26. Januar 2015

So, nun habe ich den Fehler gefunden. Zum Hintergrund: Ich arbeite hier im lokalen Intranet. So lange ich dort schaute, stellte sich der Internet Explorer auf dumm. So bald ich, und das habe ich heute dann gemacht, die Seite ins Internet gespielt habe und dort geschaut habe, war sie genauso hübsch und richtig wie im Firefox.
Dieses Phänomen - und ich bin einfach nicht darauf gekommen bzw. wusste davon nichts - hat etwas mit den IE-'Einstellungen der Kompatibilitätsansicht' zu tun. Lokal reagiert der Internet Explorer anders als online.
Hier habe ich dann den entscheidenden Hinweis erhalten, um das Problem auszuschalten: http://www.peterkropff.de/allg…ilitaetsmodus/problem.htm
Ich habe unter 'Extras'/Einstellungen der Kompatibiliätsansicht/ den Haken bei 'Intranetsites in Kompatibilitätsansicht anzeigen' herausgenommen. Dann hat alles bestens geklappt.
So. Das Problem ist gelöst.
Danke für Eure Hilfe, trotzdem! Ihr seid !!!

Internet Explorer 11 macht Murx (oder ich...)

Jetzt mitmachen!

Teilen