InternetExplorer und Css?! Was soll man ertwarten :|

calvin · 13. Januar 2011

Hallo liebe Community ich kann gar nicht viel erzählen nur das folgendes script ein Vokabel-Tester ist und ich ein riesiges Problem hab mit dem guten IE.

Ich denke mal das fast alle Schüler dieser Welt mit ihren kleinen süßen Laptops und dem lieben IE das internet durchstöbern und daher muss meine Seite, auf ihm gute auschauen, allerdings tut sie das nur auf Firefox, Opera, Safari und Chrome (Windows und Mac)

Folgender Code (der Vok test wird nicht funktionieren da ihr ja die DB nicht habt):

HTML

<!DOCTYPE html>
<html>
<head>
<title> Dein Vokabeltrainer - Medias in Res </title>
<meta name="description" content="Dein Vokabeltrainer für Medias in Res. Fragt dich alle Vokabel des Buches ab!!" />
<meta name="keywords" content="medias in res, latein, medias, vokabel, lernen, medias, in, res, vokabeltrainer, abfragen, modulsweise, module" />
<meta name="author" content="Calvin Claus">
<meta name="robots" content="index">
<meta name="robots" content="follow">
<meta name="robots" content="noarchive">
<link rel="stylesheet" type="text/css" href="design.css" />
 </head>
 
<body>
<div id="seitenbereich">
<header>
<hgroup>
<a href="index.php">
<h1> Dein Vokabeltrainer </h1>
<h3> -Vokabelabfragen ganz ohne Mama :) </h3>
</a>
</hgroup>
<nav>
                <ul>
                    <li><a href="index.php"> Home! </a></li>
                    <li> <a href="vokabeltrainer.php?ort=index"> Vokabeltrainer </a></li>
                    <li> <a href="kontakt.php"> Kontakt </a></li>
                </ul>
            </nav>




</header>




<article>
<h3> Ein herausragendes Tool! </h3>
<img src="pokal.jpeg"  width="270" height="200"/>
<p>
Du bist befindest dich auf der Webseite des am meist empfolenem Vokabeltrainers &uuml;berhaupt.
Denn hier werden Vokabel Lektionsweise nach dem Buch Medias in Res abgefragt.




</p>
</article>
<article>
<h3> Von Sch&uuml;ler f&uuml;r Sch&uuml;ler </h3>
<img src="handshake.jpeg"  width="270" height="200" />
<p>
Die Seite ist von echten Sch&uuml;lern erstellt worden und ist daher perfekt an eure W&uuml;nsche
angepasst worden. Auserdem wird eine st&auml;ndige weiterentwiklung gew&auml;rleistet.
</p>
</article>
<article>
<h3> Medias in Res </h3>
<img src="buch.jpeg" width="270" height="200">
<p>
Vorerst unterst&uuml;tzen wir nur das meistverwendete Buch 'Medias in Res'. Allerdings
arbeiten wir an der Einbindung auch Anderer. <br /> 
<a href="#"> Welches Buch sollte das sein? </a>
</p>
</article>













  <section><a href="vokabeltrainer.php?ort=index">Starten!</a></section>




 <footer>
    &copy; Copyright by Calvin Claus - 2011
  </footer>




</div>
</body>
</html>

Alles anzeigen

Code

* { 
	margin:0px;
	padding:0px;
}







#seitenbereich {
				width:1000px;
			    margin: 4px auto;
}




body { 
	text-align:center;
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
}




/*******************/




header
{
	display:block;
	height: 180px;
	margin-bottom: 40px;
	background: url(orangedot.png) left no-repeat;
	font-size:20px;

}




header a {
	text-decoration:none;
	color: black;
}




hgroup {
	display:block;
	padding: 30px 300px 5px 0px;
}




hgroup h3 {
	padding-left: 100px;
	font-size:19px;
}




nav {
	text-align:center;
	margin-top:10px;
	margin-bottom:15px;
	display: block;
	font-size:18px;
}




nav li {
	display: inline;
	margin: 15px;
	text-align:center;
	list-style-type:none;




}




nav li a {
	text-decoration:none;
	color: orange;
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	border-left: 2px #F93 solid;
	padding-left: 5px;


}




nav li a:hover { 
		color: #F63;
		border-left: 2px #F93 solid;
		padding-left:8px;


}




article img {
	float: none;
	background-size: 200px 50px;
	padding-left: 4px;


}




article {
	padding: 10px;
	margin: 10px;
	width: 280px;
	/*height: 350px;*/
	text-align:left;
	float:left;
	border: 1px solid silver;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	background: -webkit-gradient(linear, left top, left bottom,
    from( #D4D4D4 ), to(#C7C7C7));
	background-image: -moz-linear-gradient( #D4D4D4, #C7C7C7 );

}
article p {
	margin-top: 9px;
}
article h3 {
	padding: 0px 0px 6px 0px;
	color: black;
}




section {
	display:block;
	text-align:left;
	margin-top: 420px;
	margin-left: 160px;
}




article a {
	color: #4A4A4A;
	text-decoration: none;
}




article a:hover {
	text-decoration:underline;
}




section a {
	text-decoration:none;
	color: orange;
	font-size:18px;
	display:block;
}




section a:hover {
	padding-left: 4px;
}




cite {
	display:block;
	border-left: 2px solid silver;
	font-style:italic;
	width: 350px;
	float:none;
	margin-top: 448px;
	text-align:justify;
	padding-left: 5px;
	font-size:14px;





	
}








/*******************/




footer {
	margin-top:500px;
	background: -webkit-gradient(linear, left top, left bottom,
    from( #D4D4D4 ), to(  #BFBFBF ));
	background-image: -moz-linear-gradient( #D4D4D4, #BFBFBF);
	-webkit-border-radius: 5px 5px 5px 5px;
	-moz-border-radius: 5px 5px 5px 5px;
	color:black;
	display:block;
}
/*******************/




#vokabeltrainerwrapper {
	text-align: left;
	margin: 50px 0px 0px 150px;
}




#vokabeltrainerwrapper #loesung  {
	margin: -18px 0px 0px 200px;
	font-size:18px;
}










#vokabeltrainerwrapper #loesung h4 {
	float:left;

}




#vokabeltrainerwrapper #wort {
	margin: 50px 0px 30px 0px;
}







#vokabeltrainerwrapper a {
	color: #373737;
	text-decoration: none;
}




#vokabeltrainerwrapper a:hover {
	text-decoration:underline;
}




#vokabeltrainerwrapper #links .richtig {
	color: #090;
}




#vokabeltrainerwrapper #links .falsch {
	color: #F00;
}




#vokabeltrainerwrapper #weiter .richtig {
	margin: 10px 5px 5px 50px;
	display:block;
	color: #090; 

}




#links {
	margin: 0px 0px 6px 20px;
}




#vokabeltrainerwrapper .home  {
	margin-top: 20px;
	margin-left: 10px;
	display:block;
    color: #F90;
}




#beschreibung {
	text-align:left;
}
#beschreibun h2 {
	margin: 20px;
}




#beschreibung p {
	margin: 20px;
}




#kontakt {
	margin-left: 150px;
	text-align: left;

}
#kontakt .bug {
	background-image:url(bug.png);
	background-repeat:no-repeat;
	background-position:center;

}




#kontakt .kontakt {
	background-image: url(Telefon.gif);
	background-repeat:no-repeat;
	background-position:center;
	color:#FC3;




}




#kontakt .danke {
	background-image: url(danke.jpeg);
	background-repeat:no-repeat;
	background-position:center;
}

Alles anzeigen

Manche Sachen sind im CSS dokument sind für andere Seiten zb #konakt und #vokabeltrainerwrapper ignoriert das bitte einfach..
Wenn ihr ein Xampp und einen I-Net explorer habt wäre es total nett wenn ihr einfach nur mal kurz reinschauen könntet....wenn jeder einen Fehler findet schaffen wir's

Ich verstehe ja, dass HTML5 und CSS3 nicht ordentlich unterstütz wird allerdings sollten vielleicht schon die 'article' elemente so wie es aussehen sollte in einer Reihe stehen...Hier ein screenshot:

Ps: Die Texte sind Platzhalter und voller Fehler und Blödsinn und ich besitze keine Bildrechte ich weiß

Danke ;P

Sarkkan · 14. Januar 2011

Hey
Ich schaue mir deinen Code vielleicht morgen genauer an.. was mir aber jetzt schon auffällt:

Zitat

Ich verstehe ja, dass HTML5 und CSS3 nicht ordentlich unterstütz wird allerdings sollten vielleicht schon die 'article' elemente so wie es aussehen sollte in einer Reihe stehen...

Der IE unterstütz diese Elemente mit diesem JavaScript Code

Code

document.createElement("header");
document.createElement("nav");
document.createElement("section");
document.createElement("footer");

Lg
Sarkkan

InternetExplorer und Css?! Was soll man ertwarten :|

Jetzt mitmachen!

Teilen