IE fabriziert Müll von Beat, 16.11.2010 13:57

IE fabriziert Müll

Thecamper 16.11.2010 13:48

Hi Leute. Ich habe für unser Jugendbistro eine Homepage geschrieben. Sie ist so in php geschrieben, dass zur Navigation passender html-Code erzeugt wird. Für die Darstellung ist eine css-Datei zuständig. Die Seite wird in allen Browsern (Firefox, Opera, Iron/Chrome) vernünftig dargestellt. Nur der IE zeigt sie nicht richtig an. Ich weiß ja, dass sich MS nicht an die Standards hält, aber ich hab mich nicht in dem Maße damit beschäftigt, jetzt sofort sagen zu können, woran das liegt. Hier brauche ich eure Hilfe.

Anbei zwei Screenshots, einmal von der funktionierenden Seite, einmal vom IE. Außerdem der generierte html- und der css-Code.

http://www.abload.de/image.php?img=selfmade-diner_1289910cakx.png http://www.abload.de/img/selfmade-diner-iecldu.png

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">


<html>

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


<body>
	
	<div id="container">
		<div id="head">
			<div id="headerLogo"></div>
			<div id="socialNetworks">
				<a target="_blank" href="http://www.facebook.com" id="Facebook" class="navTop"></a>
				<a target="_blank" href="http://www.myspace.com" id="MySpace" class="navTop"></a>
				<a target="_blank" href="http://www.schuelervz.net" id="SchuelerVZ" class="navTop"></a>
				<a target="_blank" href="http://www.meinvz.net" id="MeinVZ" class="navTop"></a>

			</div>
		</div>		
		<div id="abstandTop"></div>
		
		<div id="navigation">
			<div id="navigationContent">
				<div id="navLinks">
					<div id="navLinksTitle"></div>
					<div class="Seperator"></div>
					<a href="index.php?nav=news" id="NewsActivated" class="navLinks"></a>

					<div class="Seperator"></div>
					<a href="index.php?nav=angebote" id="Angebote" class="navLinks"></a>
					<div class="Seperator"></div>
					<a href="index.php?nav=events" id="Events" class="navLinks"></a>
					<div class="Seperator"></div>
					<a href="index.php?nav=presse" id="Presse" class="navLinks"></a>
					<div class="Seperator"></div>
					<a href="index.php?nav=uber" id="UeberUns" class="navLinks"></a>
					<div class="Seperator"></div>

				</div>				
				<div id="gallery">
					<div id="galleryTitle"></div>
					<!-- Gallerie!! -->
				</div>				
				<div id="interactive">
					<div id="interactiveTitle"></div>
					<div class="Seperator"></div>
					<a href="index.php?nav=gaestebuch" id="Gaestebuch" class="interactive"></a>
					<div class="Seperator"></div>

					<a href="index.php?nav=feedback" id="Feedback" class="interactive"></a>
					<div class="Seperator"></div>
					<a href="mailto:nina.deutschmann@gmx.de" id="Kontakt" class="interactive"></a>
					<div class="Seperator"></div>
				</div>				
				<div id="newsletter">
					<div id="newsletterTitle"></div>
					<div id="newsletterForm">
					</div>

				</div>	
			</div>
			
			<div id="navigationAbstandRechts"></div>
		</div>		
		<div id="content">
			<div id="contentAbstandTop"></div>
			<div id="contentMainArea">
<h1>Homepage eröffnet</h1>
<span class="datum">03.11.2010</span>
<p>

Heute wurde offiziell die Homepage des Selfmade-Diners, Lübbeckes Jugendbistro, eröffnet.
Hier könnt Ihr unsere Angebote, Events, Fotos von der letzten Party und vieles mehr sehen!

Viele liebe Grüße
Das Selfmade-Diner Team

P.S.: Da die Seite sich noch im Aufbau befindet, sind leider noch nicht alle Informationen und Inhalte vollständig.
Wir bitten das zu entschuldigen.
</p>
<hr><br>

<span class="contentLinks" style="float:left;"><a href="index.php?nav=news&amp;page=0">jüngere</a></span><span class="contentLinks" style="float:right;"><a href="index.php?nav=news&amp;page=2">ältere</a></span>
			</div>
			<div id="contentAbstandBottom"></div>
		</div>		
		<div id="Footer"></div>
	</div>
	

</body>

</html>

CSS:

@charset "utf-8";

html {
	margin: 0;
	padding: 0;
}

body {
	margin: 0;
	padding: 0;
	
	background: #470f02 url("images/bg.png") repeat-x;
}

p, h1, .datum, .contentLinks {
	padding: 10px;
}

h1 {
	display: inline;
}

hr {
	width: 95%;
}

.datum {
	float: right;
	font-size: 0.9em;
}

div {
	float: left;
}

a {
	float: left;
}

a:link {
	color:white;
	text-decoration:none;
}

a:visited {
	color:white;
	text-decoration:none;
}

a:focus {
	color:white;
	text-decoration:underline;
}

a:hover {
	color:white;
	text-decoration:underline;
}

a:active {
	color:white;
	text-decoration:none;
}

#container {

	width: 950px;
	
	margin: 0px auto;
}

#head {
	position: relative;
	
	width: 950px;
 	height: 190px;
}

#headerLogo {
	width: 503px;
	height: 190px;
	
	background: url("images/headerLogo.png");
}

#socialNetworks {
	position: absolute;
	right: 0;
	bottom: 0;
}

.navTop {
	width: 111px;
	height: 27px;
}

#Facebook {	
	background: url("images/Facebook.png");
}

#Facebook:hover {
	background: url("images/Facebook_Hover.png");
}

#MySpace {	
	background: url("images/MySpace.png");
}

#MySpace:hover {
	background: url("images/MySpace_Hover.png");
}

#SchuelerVZ {	
	background: url("images/SchuelerVZ.png");
}

#SchuelerVZ:hover {
	background: url("images/SchuelerVZ_Hover.png");
}

#MeinVZ {
	background: url("images/MeinVZ.png");
}

#MeinVZ:hover {
	background: url("images/MeinVZ_Hover.png");
}

#abstandTop {
	width: 950px;
	height: 50px;
}

#navigation {
	 width: 223px;
	
	 padding-left: 6px;
	 padding-right: 29px;
}

#navLinks {
	width: 204px;
	height: 240px;
	
	padding-top: 17px;
	padding-left: 19px;
	
	margin-bottom: 40px;
	
	background: #2f0803 url("images/navLinksBackground.png");
}

#navLinksTitle {
	width: 101px;
	height: 17px;
	
	margin-bottom: 21px;
	
	background: url("images/navLinksTitle.png");
}

.Seperator {
	width: 182px;
	height: 3px;
	
	background: url("images/Seperator.png");
}

.navLinks {
	width: 80px;
	height: 31px;
}

#News {
	background: url("images/News.png");
}

#Angebote {
	background: url("images/Angebote.png");
}

#Events {
	background: url("images/Events.png");
}

#Presse {
	background: url("images/Presse.png");
}

#UeberUns {
	background: url("images/UeberUns.png");
}

#NewsActivated {
	background: url("images/News_Hover.png");
}

#AngeboteActivated {
	background: url("images/Angebote_Hover.png");
}

#EventsActivated {
	background: url("images/Events_Hover.png");
}

#PresseActivated {
	background: url("images/Presse_Hover.png");
}

#UeberUnsActivated {
	background: url("images/UeberUns_Hover.png");
}

#News:Hover {
	background: url("images/News_Hover.png");
}

#Angebote:Hover {
	background: url("images/Angebote_Hover.png");
}

#Events:Hover {
	background: url("images/Events_Hover.png");
}

#Presse:Hover {
	background: url("images/Presse_Hover.png");
}

#UeberUns:Hover {
	background: url("images/UeberUns_Hover.png");
}

#gallery {
	width: 203px;
	height: 264px;
	
	padding-left: 20px;
	padding-top: 16px;
	
	margin-bottom: 40px;
	
	background: #2f0803 url("images/galleryBackground.png");
}

#galleryTitle {
	width: 106px;
	height: 18px;
	
	background: url("images/galleryTitle.png");
}

#interactive {
	width: 204px;
	height: 172px;
	
	padding-left: 19px;
	padding-top: 18px;
	
	margin-bottom: 39px;
	
	background: #2f0803 url("images/interactiveBackground.png");
}

#interactiveTitle {
	width: 82px;
	height: 15px;
	
	margin-bottom: 23px;
	
	background: url("images/interactiveTitle.png");
}

.interactive {
	width: 85px;
	height: 31px;
}

#Gaestebuch {
	background: url("images/Gaestebuch.png");
}

#Feedback {
	background: url("images/Feedback.png");
}

#Kontakt {
	background: url("images/Kontakt.png");
}

#GaestebuchActivated {
	background: url("images/Gaestebuch_Hover.png");
}

#FeedbackActivated {
	background: url("images/Feedback_Hover.png");
}

#Gaestebuch:Hover {
	background: url("images/Gaestebuch_Hover.png");
}

#Feedback:Hover {
	background: url("images/Feedback_Hover.png");
}

#Kontakt:Hover {
	background: url("images/Kontakt_Hover.png");
}

#newsletter {
	width: 202px;
	height: 89px;
	
	padding-left: 21px;
	padding-top: 16px;
	
	background: #2f0803 url("images/newsletterBackground.png");
}

#newsletterTitle {
	width: 91px;
	height: 15px;
	
	margin-bottom: 23px;
	
	background: url("images/newsletterTitle.png");
}

#content {
	width: 684px;
	min-height: 10px;
	
	font-family: Arial, Verdana, sans-serif;
	color: #ffffff;
	background: #2f0803
	
}

#contentAbstandTop {
	width: 684px;
	height: 6px;
	
	background: url("images/contentAbstandTop.png");
}

#contentAbstandBottom {
	width: 684px;
	height: 6px;
	
	background: url("images/contentAbstandBottom.png");
}

#navigationContent {
	width: 223px;
}

#Footer {
	width: 950px;
	height: 30px;
	
	background: url("images/Footer.png");
}

Beitrag melden

– Informationen zu den Bewertungsregeln

IE fabriziert Müll
Gunnar Bittersmann Homepage des Autors 16.11.2010 13:52

css
– Informationen zu den Bewertungsregeln
@@Thecamper:

nuqneH

[code lang=html]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Wenn du den IE in den Quirksmodus schickst, solltest du dich nicht wundern, dass er anders rendert.

Qapla'

--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)
Beitrag melden

–
Informationen zu den Bewertungsregeln
IE fabriziert Müll
suit Homepage des Autors 16.11.2010 13:56

css
– Informationen zu den Bewertungsregeln
Ich weiß ja, dass sich MS nicht an die Standards hält, aber ich hab mich nicht in dem Maße damit beschäftigt, jetzt sofort sagen zu können, woran das liegt. Hier brauche ich eure Hilfe.

Microsoft hält sich an Standards, zumindest an Mehr als man ihnen Allgemein zutraut - die am Markt befindlichen Browser sind allerdings so alt, dass sie diese nicht vollumfänglich oder nur sehr mangelhaft unterstützen.
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

[ref:self812;css/formate/box_modell.htm#doctype_switch@title=Quirksmode]. Ich gehe also prinzipiell davon aus, dass du schuld bist und nicht Microsoft ;) - zumindest bis das Gegenteil bewiesen ist.

btw: den Code ist grausam - das Menü z.B. solltest du als unsortierte Liste umsetzen ([link:http://css.maxdesign.com.au/listamatic/@title=Anregungen dazu hier]), Abstände oder Ramen werden mit padding/margin bzw border erzeugt - z.B. die gepunktete Linie zwischen deinen Menüpunkten: [code lang=css]border: 1px dotted white;
```
  
Deinen restlichen Code möchte ich aber garnicht weiter kommentieren, er ist wirklich grausam :) hier hast du noch viel zu lernen.
```
Beitrag melden

–
Informationen zu den Bewertungsregeln
1. IE fabriziert Müll
  
  Thecamper 16.11.2010 14:43
  
  css
  – Informationen zu den Bewertungsregeln
  Super danke. Mit strict gehts.
  
  Das mein Code grausam ist, weiß ich. Bin generell eher nicht so der Web-Designer. Habe nur die Page gemacht, weil ich gefragt wurde und HTML/CSS in Grundzügen kann (weiß, wie man es schreibt :P)
  Danke trotzdem für die Anregungen.
  
  Lg
  Beitrag melden
  
  –
  Informationen zu den Bewertungsregeln
  Übersicht
  
  alle Foren
  
  SELFHTML-Forum
  
  anmelden
  
  Benutzerkonto erstellen
  
  Beitrag im Thread-Baum
IE fabriziert Müll
Beat Homepage des Autors 16.11.2010 13:57

css
– Informationen zu den Bewertungsregeln
HTML:
[code lang=html]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Diesen Doctype solltest du überdenken und entweder die Variante strict verwenden oder die Variante mit Adress-Angabe.
Ersteres ist eindeutig vorzuziehen. strict akzeptiert aber keine target-Attribute, wobei aber sowieso zu fragen ist, wie notwendig diese sind.

Nach dieser Änderung sollten sich deine Probleme erstmal reduziert haben, valides HTML vorausgesetzt.
Anbei solltest du semantisches HTML produzieren.
Eine Navigation ist meist eine Liste.
Leere Elemente erweisen sich bei klügerer Anwendung von CSS als meist überflüssig.
```
  	<div id="navigationContent">  
  		<div id="navLinks">  
  			<div id="navLinksTitle"></div>  
  			<div class="Seperator"></div>  
  			<a href="index.php?nav=news" id="NewsActivated" class="navLinks"></a>  
```
...
```
  		</div>				  
```
mfg Beat

--
><o(((°> ><o(((°>
<°)))o>< ><o(((°>o
Der Valigator leibt diese Fische
Beitrag melden

–
Informationen zu den Bewertungsregeln

SELFHTML Forum - Ergänzung zur Dokumentation Übersicht

Thecamper: IE fabriziert Müll