celluid
Goto Top

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

Content-Key: 279545

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

Printed on: April 19, 2024 at 01:04 o'clock

Member: rudxDE
rudxDE Aug 07, 2015 at 11:30:16 (UTC)
Goto Top
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.
Member: Celluid
Celluid Aug 07, 2015 at 11:48:52 (UTC)
Goto Top
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...
Member: rudxDE
rudxDE Aug 07, 2015 at 12:28:06 (UTC)
Goto Top
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
Member: rudxDE
rudxDE Aug 07, 2015 at 12:39:23 (UTC)
Goto Top
geht dann auch unter EDGE