HTML Darstellungsproblem im IE

Hi,

ich bin gerade dabei eine Website mit html zu erstellen. Leider hab ich aktuell das Problem das der Google Chrome Browser sowie der Firefox die Website wie gewünscht darstellen, der IE aber nicht. Ich hab jetzt schon eine weile rumprobiert, komme aber nicht auf die Lösung.
Dies ist mein erstes Websiteprojekt, daher kenn ich mich auch nicht so gut mit HTML aus. vielleicht kann mir einer von euch helfen, ich denke, dass der Fehler so einfach wie gravierend ist ;)

hier die CSS die ich erstellt habe:

body {
	background-color: #FFFAFA;
}
h1.headline{
	color: #FFFFFF;
}
h1{
	color: #1E90FF;
}
}
h2{
	color: #1874cd;
}
h2{
	color: #1c86ee;
}

/* Links */
A.class1 { color: white;text-decoration: none;}
A.class2 { color: #EE7600; text-decoration: none; }
A.class3 {color: #000000;}
A.class4 {color:#0000FF}
/* Links Ende*/

/*Navigation bar*/




/*Entfernen der listenpumkte und des Abstandes*/



.navbar ul{
	list-style: none;
	margin:0px;
	padding:0px;
	background-color: black;

	
}
/*Anordnen der Menüpunkte nebeneinander*/
.navbar > ul > li {
	float:left;
	margin-left: 20px;

}
/*Ausblenden der unteren Ebenen im Normalzustand*/
.navbar > ul > li > ul {
	display: none;
}
/*Styleeigenschaften der oberen Ebene*/

.navbar ul a.class1 {
	width: 220px;
	display: block;
	white-space: nowrap;
	padding: 0px;
	background-color: black;
	color: white;
	text-decoration: none;
	box-shadow: 3px 3px 3px rgba(black);
	font-size: 30px;

}
.navbar ul a.class2 {
	width: 220px;
	display: block;
	white-space: nowrap;
	padding: 0px;
	background-color: black;
	color: #EE7600;
	text-decoration: none;
	box-shadow: 3px 3px 3px rgba(black);
	font-size: 30px;

}

/*Styleeigenschaften der oberen Ebene*/
.navbar > ul {
	float: left;
	overflow: hidden;
	padding: 0 10px 0 10px;
	color: black;
	box-shadow: 3px 3px 3px rgba(black);
}

/*Styleeigenschaften untere Ebene*/
.navbar ul > li > ul > li a {
	background: black;
	color: white;
	font-size: 22px;
	text-decoration: none;

}

.navbar ul > li > ul > li  {
	box-shadow: 3px 3px 3px black;
	width: 220px;
}


/*Auslöser für Mausbewegung über das Element*/
.navbar > ul > li:hover > ul {
	display: block;
	position: absolute;

}

.navbar > ul > li > ul > li {
	position: relative; 
}

.navbar a.class1:hover {
	color:#EE7600;
}

.navbar a:hover {
	color:#EE7600;
}


/*Navigation Bar Ende*/


#leftbar{
	position:absolute;
	top: 60px;
	  margin-top: 2px;
	  margin-right: 1500px;
	  margin-bottom: 100px;
	  margin-left: 5px;	
	  width: 200px;
	  height: 100%;
	  padding: 10px;
	  border: 3px;
	background-color: #eee;
	box-shadow: 3px 3px 3px grey;
}

#Mainpage{
	position: static;
	top: 52px;
	margin-left: 300px;
	margin-right: 200px;
	padding-right: 400px;
	
}

und so hab ich das Ganze dann in den HTML Code eingebunden (das ist jetzt nur der obere Teil, die stelle an der es auch hängt):

<html>

	<head>
	<meta http-equiv=Content-Type content="text/html; charset=utf-8">  
		<title>Web</title>
		<link rel="stylesheet" type="text/css" href="style.css" />  
	</head>

	<body>
		<div>
		<nav class="navbar">  
	
			<ul>
			<li><a href="web1.html" class="class2">Home</a></li>  
			<li><a href="..." class="class1">Richtlinien</a></li>  
			<li><a href="...l" class="class1">Leitfaden</a></li>  
			<li><a href="" class="class1">Applikationen</a>  
				<ul>
					<li><a href="a.html">App1</a></li>  
					<li><a href="b.html">App2</a></li>  
				</ul>
			<li><a href="bla" class="class1">RB</a></li>  
			</ul>
	
	
			
		</nav>
		</div>

....

vielen Dank vorab für die Unterstützung

Bitte markiere auch die Kommentare, die zur Lösung des Beitrags beigetragen haben

Content-ID: 279545

Url: https://administrator.de/contentid/279545

Ausgedruckt am: 13.11.2024 um 06:11 Uhr

4 Kommentare

Neuester Kommentar

Könntest du vielleicht etwas genauer beschreiben, was falsch dargestellt wird?

Guck das es unter Microsoft EDGE geht, der Internetexplorer ist mehr oder weniger tot.

Danke schon mal für die Antwort!

Ich habe eine Navigationsleiste oben auf der Seite angelegt, und in der CSS die Einstellungen dafür angelegt. Hier ist definiert das die Elemente nebeneinander liegen und das eine Dropdown navigation aufgeht wenn man mit der maus darüber fährt. Offensichtlich zieht sich der IE aber keine dieser Einstellungen. Denn wenn man die Site mit dem öffnet werden die Inhalte formlos in der Ecke links oben dargestellt

Den Edge werd ich dann mal testen, aber es währe dennoch nice wenn es mit dem IE auch gehen würde, der röchelt sicherlich noch ne weile bevor er endgültig den löffel abgibt...

Hi,
gib die Farben des Schattens in Hexadecimalzahlen an. also nicht gray sondern #A0A0A0. die farben kannst du online beziehen, google einfach mal nach HTML Farben oder Hex Farben.

Kleiner Tipp: Wenn du Rechs klick auf die Seite machst und auf Element Untersuchen gehst, kannst du das Element raussuchen, auswählen und an der Seite siehst du Sie CSS Eigenschaften. Die fehlerhaften oder nicht unterstützten werden Rot unterstrichen.

LG RudxDE