IE & Chrome zerschießen das Layout

Feninic · 31. August 2011

Hallo,

ich habe ein kleines Problem. Auf meiner Seite gibt es 4 Div Bereiche (heeder, navi, inhalt und footer). Unter FireFox, Konquerer wird das auch korrekt alles angezeigt, wo es sein soll. Heeder oben quer über die ganze Seite, navi links, rechts neben der navi der Inhalt. Unten quer unter der Seite der footer (mit clear:both) abgeschlossen. Soweit so gut. Selves Design funktioniert auf anderen Seiten auf all den genannten Browsern tadellos. Doch jetzt das Problem:

IE & Chrome setzen nur bei dieser Seite außer dem Heeder alle anderen Elemente in den Navi rein. Habe mittlerweile 3 mal die CSS neu gemacht und immer wieder das selbe. Habe selbst die CSS von einer andern Seite, die auch unter den beiden tadellos läuft tragedies eingesetzt. Doch auch hier das selbe Problem.

Im Html habe ich auch überprüft, ob alle div Elemente wieder geschlossen sind. Auch das ist der Fall.

Hat vielleicht jemand eine Idee wo ich noch suchen kann?

Vielen Dank schonmal im Voraus.

LG Feninic

lauras · 31. August 2011

Der Code wäre ganz nett für uns anzusehn, damit wir dir helfen können Vielleicht kannst dus auch irgendwo hochladen, dann kann ich z.B. mit meinem Chrome mal gucken

LG

Feninic · 1. September 2011

Hallo Lauras,

ups da war doch was, ich hole es jetzt aber mal nach :oops:

Da es sich um ein Programm für jemand anders handelt, habe ich Personenbezogene Sachen durch ein * ersetzt. Also nicht wundern, wenn auf einmal irgendwo sowas wie *.php oder so auftaucht . Im originalcode ist das natürlich mit den entsprechenden "richtigen" Namen versehen . Ich poste hier auch nur mal die Indexseite, weil auch hier das ganze zum ersten mal auftritt. Zieht sich allerdings durch alle Seiten durch.

Also der Code der html:

HTML

<html xmls="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv='content-type' content='text/html; charset=UTF-8' />
		<title>* hauptseite</title>
<!-- benoetigte Dateien -->
		<link href='reset.css' title='reset.css' type='text/css' rel='reset' />   
  		<link href='style.css' title='style.css' type='text/css' rel='stylesheet' />
   </head>




<body>
<!-- Seitenkopfbereich -->
	<div ID='heeder'>
		<h1> Datenbankinterface f&uuml;r * </h1>	
	</div>




<!-- Navigationsbereich -->
	<div ID='navi'>
		<ul>
		 <li> <a href=*1.php> Einloggen</a> </li>
		 <li> <a href=*2.php> Seite verlassen</a> </li>
		</ul
	</div>



<!-- Seiteninhalt -->	
   <div ID="inhalt">
   	<h2> herzlich willkommen beim Datenbankinterface von * </h2>
   	<p> Um Aktionen durchf&uuml;hren zu k&ouml;nnen, m&uuml;ssen Sie sich anmelden. </p>
   </div>
<!-- Linkliste -->      
 
 <!-- Fussbereich -->
	<div ID='footer'>
		<p class='pfooter'> &copy; by
		<a <a href="mailto:*@gmx.de?subject=DAS%20DATENBANK%20INTERFACE"><img src='*.jpg' width='54' height='30' border='0' alt='AnKo' align='middle'></a>  
		2011			
	</div>

</body>
</html>

Alles anzeigen

Und der Code der CSS:

Code

/* Linkveweise auf andere Dateien */
 @ink href='(reset.css' title='reset.css' type='text/css' rel='stylesheet')  




/* Broserreset */
	{ padding:0; margin:0; }
	{ font-size:100.1%; }   




/* Globale Formatierung */
	body{ 
		float: left; 
		font-family: Lucida Sans; 
		font-size: 1.1em; 
		font-style: normal; 
		text-align: justify;
	 	background-color: #458149;	
	}	 	

/* Kopfbereich */
	#heeder { 
		float: left;  
		width: 100%; 
		height: 10%;  
		font-family: Lucida Sans; 
		font-size: 1.1em; 
		font-style: normal; 
		text-align: justify; 
		background-color: #256E2A; 
		border: 0px solid	#4D4D4D;
					-webkit-border-top-right-radius: 30px 30px;
					-webkit-border-top-left-radius: 30px 30px;
					-webkit-border-bottom-right-radius: 30px 30px;
					-khtml-border-top-right-radius: 30px 30px;
					-khtml-border-top-left-radius: 30px 30px;
					-khtml-border-bottom-right-radius: 30px 30px;
					-moz-border-radius-topright: 30px 30px;
					-moz-border-radius-topleft: 30px 30px;
					-moz-border-radius-bottomright: 30px 30px;
					border-top-right-radius: 30px 30px;
					border-top-left-radius: 30px 30px;
					border-bottom-right-radius: 30px 30px;					
		background: #256E2A;				
		}




/* Navigationsbereich */
	#navi { 
		text-align: left; 
		float: left;
		right: 10px; 
		width: 19%; 
		height:80%; 
		background-color: #137F1A; 
		padding: 1%;
		border: 0px solid	#4D4D4D;
					-webkit-border-bottom-left-radius: 30px 30px;
					-webkit-border-bottom-right-radius: 30px 30px;
					-khtml-border-bottom-left-radius: 30px 30px;
					-khtml-border-bottom-right-radius: 30px 30px;
					-moz-border-radius-bottomleft: 30px 30px;
					-moz-border-radius-bottomright: 30px 30px;
					border-bottom-left-radius: 30px 30px;
					border-bottom-right-radius: 30px 30px;
		background: #137F1A;					
		}




	#navi a:hover {
		background-color: #E4E573; 
		}




/* Inhaltsbereich */
	#inhalt {	
		border: 0px solid	#4D4D4D;
				-webkit-border-top-right-radius: 30px 30px; 
				-khtml-border-top-right-radius: 30px 30px;
				-moz-border-radius-topright: 30px 30px;
				border-top-right-radius: 30px 30px;
		background-color: #458149;
		float: left; 
		left: 10px;
		margin-right: 1%;  
		width: 70%; 
		height: 80%; 
		padding: 2%;
		}

	#inhalt a:hover { 
		background-color: #E4E573; 
		}




	
/* Fussbereich */
	#footer { 
				clear: both; 
				float: left;  
				width: 100%; 
				height :10%;  
				font-family: Lucida Sans; 
				font-size: 1.1em; 
				font-style: normal; 
				text-align: justify; 
				background-color: #256E2A; 
				border: 0px solid	#4D4D4D;
							-webkit-border-top-left-radius: 30px 30px;
							-webkit-border-top-right-radius: 30px 30px;
							-webkit-border-bottom-right-radius: 30px 30px;
							-webkit-border-bottom-left-radius: 30px 30px;
							-khtml-border-top-left-radius: 30px 30px;
							-khtml-border-top-right-radius: 30px 30px;
							-khtml-border-bottom-right-radius: 30px 30px;
							-khtml-border-bottom-left-radius: 30px 30px;
							-moz-border-radius-topleft: 30px 30px;
							-moz-border-radius-topright: 30px 30px;
							-moz-border-radius-bottomright: 30px 30px;
							-moz-border-radius-bottomleft: 30px 30px;
							border-top-left-radius: 30px 30px;
							border-top-right-radius: 30px 30px;
							border-bottom-right-radius: 30px 30px;
							border-bottom-left-radius: 30px 30px;
				background: #256E2A;				
		}		




/* Ueberschriften */
	h1 { 
		text-align: center; 
		}




	h2 { 
		text-align: center; 
		}	




/* Absaetze */
	.pfooter { 
		text-align: center; 

/* Tabelle */
	table {
		empty-cells: show;
	}

	th { 
		border-style: none;
		border-color: #000000;
		text-align: center; 
		}




/* Links */
	a:hover { 
		background-color: #E4E573; 
		}

Alles anzeigen

LG Feninic

Feninic · 1. September 2011

Und hier im Anhang noch 2 Screenis

LG Feninic

lauras · 1. September 2011

Als allererstes machst du mal bitte folgendes:

HTML-Code validieren, und zwar hier: <a class="postlink" href="http://validator.w3.org/">http://validator.w3.org/</a>
CSS validieren, und zwar hier: <a class="postlink" href="http://jigsaw.w3.org/css-validator/">http://jigsaw.w3.org/css-validator/</a> (Die Fehler zu den abgerundeten Ecken kannst du ignorieren - auch wenn du das da sehr umständlich machst)

Dann behebst du mal alle Fehler, die er dir anzeigt (immer nachdem du einen behoben hast neu validieren, vielleicht hat sich dann ein anderer auch erledigt).
Falls danach der Fehler immer noch besteht, unterhalten wir uns weiter

Gruß

PS: Bitte Codes immer in den Code-BB-Code und keine Doppelposts, dafür gibts ne Edit-Funktion

NeoAramis · 1. September 2011

Hallo

Also erstens einmal: bevor du dich an den Inhalt und ein anspruchsvolles Design heranwagen willst, erstelle einfach mal ein Grundgerüst welches hinsichtlich Code und Spezifikationen sauber und ordentlich aufgebaut ist. Wenn man dann einmal ein solides Grundgerüst hat, muss man sich später, wenn man ein sauberes Design "herübergelegt" hat, nicht mit der Fehlersuche herumschlagen. Folgende Punkte sind also zu verbessern:

Warum nicht gleich HTML5 nutzen, CSS3 benutzt du ja auch schon? Auch wenn es immer noch im Entwurfstadium steckt kann man es ohne Bedenken benutzen (Google, Youtube etc. nutzen es auch schon)[/*]
Wie von lauras schon erwähnt, einfach mal den ganzen Code durch den Validator jagen lassen (ul-Tag der Navigation nicht korrekt geschlossen, a-Tag im footer falsch geschrieben etc.)[/*]
Einheitlichkeit ist das A und O der Fehlerbeseitigung: Verwende nur " und nicht noch '. Wenn du dem Kopfbereich einen englischen Begriff gibst (es heisst dann header und nicht heeder) kannst du gleich allen anderen Bereichen auch einen englischen Begriff zuweisen.[/*]
Bezüglich Gross- und Kleinschreibung: Bitte schreibe alles klein (id anstatt ID). Dann aber in Zukunft auch alle Dateien und Verzeichnise und sonst alles klein schreiben.[/*]
Moderne Websites erstrecken sich entweder über die ganze Bildschirmbreite oder sind zentriert (da muss man sich nicht über Geschmackssache streiten).[/*]
Ich würde die Reset-Angaben gleich auch in die style.css Datei reinstecken. Klar man sagt, dann ist die ganze Sache übersichtlicher, aber es sind ja nicht viele Angaben und da ist es Unsinn noch extra eine weitere CSS-Datei einzubinden.[/*]

Ich habe dir hier ein einfaches Beispiel gemacht wie man sauber und ordentlich ein solides Grundgerüst erstellt:

index.html

HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>title</title>
		<meta name="content-language" content="de" /> 
		<link href="style.css" title="style.css" type="text/css" rel="stylesheet" />
	</head>
	<body>
		<div id="header">
			<h1>header</h1>   
		</div>
		<div id="nav">
			<ul>
				<li><a href="#">Link</a></li>
				<li><a href="#">Link</a></li>
				<li><a href="#">Link</a></li>
				<li><a href="#">Link</a></li>
			</ul>
		</div>
		<div id="content">
			<h2>Titel h2</h2>
			<p>Lorem ipsum dolor sit amet.</p>
		</div>
		<div id="footer">
			<p>footer</p>        
		</div>
	</body>
</html>

Alles anzeigen

style.css

Code

/*	reset */
/*	---------------------------------------- */
	html, body, div, span, applet, object, iframe,
	h1, h2, h3, h4, h5, h6, p, blockquote, pre,
	a, abbr, acronym, address, big, cite, code,
	del, dfn, em, font, img, ins, kbd, q, s, samp,
	small, strike, strong, sub, sup, tt, var,
	dl, dt, dd, ol, ul, li,
	fieldset, form, label, legend,
	table, caption, tbody, tfoot, thead, tr, th, td {
		margin: 0;
		padding: 0;
		border: 0;
		outline: 0;
		font-weight: inherit;
		font-style: inherit;
		font-size: 100%;
		font-family: inherit;
		vertical-align: baseline;
		font-family: Arial, sans-serif;
	}

	:focus {
		outline: 0;
	}

	body {
		line-height: 1;
		color: black;
	}

	ol, ul {
		list-style: none;
	}

	table {
		border-collapse: separate;
		border-spacing: 0;
	}

	caption, th, td {
		text-align: left;
		font-weight: normal;
	}

	blockquote:before, blockquote:after, q:before, q:after {
		content: "";
	}

	blockquote, q {
		quotes: "" "";
	}

/*	basics */
/*	---------------------------------------- */
	html {
		text-align: center;
		min-width: 760px;	
	}

	body {
		width: 960px;
		margin: 0 auto;
		text-align: left;
	}

/*	header */
/*	---------------------------------------- */
	#header {
		background-color: #eee;
		margin-bottom: 20px;
	}

	#header h1 {
		padding: 10px;
		font-weight: bold;
	}




/*	nav */
/*	---------------------------------------- */
	#nav { 
		width: 30%;
		float: left;
		margin-bottom: 20px;
		background-color: #eee;             
	}

	#nav ul { 
		padding: 10px;             
	}

/*	content */
/*	---------------------------------------- */
	#content {
		width: 70%;
		float: right;
		margin-bottom: 20px;
	}

	#content h2 {
		padding: 0 0 0 10px;
	}

	#content p {
		padding: 0 0 0 10px;
	}

/*	footer */
/*	---------------------------------------- */
	#footer {
		clear: both;
		background-color: #eee;
	}

	#footer p {
		padding: 10px;
	}

Alles anzeigen

Feninic · 1. September 2011

Hallo ihr beiden,

als erstes mal einen ganz herzlichen Dank für die Hinweise. Habe gerade alles durchvalidieren lassen. Nun ist der html komplett konform (wie et ja eigentlich sein soll). Habe dabei auch wieder einiges gelernt.

Eines ist mir jedoch immer noch schleierhaft. Warum akzepteiert er ein klein geschriebenes id doch ein großgeschriebenes ID nicht?

Bei dem Grundgerüst muss ich noch mehr Wert auf die Ordnung legen, das ist schon richtig.

Die Anzeige haut nun auch komplett hin, wie Sie soll.

Eines habe ich jetzt nochmal ganz besonders erfahren, der FireFox scheint ein sehr toleranter Browser zu sein, während Chrome und Co da nicht so tolerant sind. Liege ich damit richtig?

Was das html5 angeht habe ich noch bischen davor zurückgeschreckt, weil ich mir nicht sicher war in wieweit das schon eraubt ist. Doch nun denke ich werde ich auch darauf zurückgreifen.

Die Vorschläge, die gepostet wurden werde ich mir in aller Ruhe zu Gemüter führen und versuchen so gut ich kann umzusetzen.

Ich denke ich bin auf einem ganz guten weg, dass alles gut wird.

Ich wünsche Euch noch einen schönen Abend.

LG Feninic

Sören · 1. September 2011

Nach xml-Standard (welcher XHTML zugrunden liegt), müssen alle Attribute (wie "id" und "href") und Tags (body, div, ...) kleingeschrieben werden.
Ein Browser kann sich an den Standard halten und bei großgeschriebene Attributen wie dein "ID" das komplette Attribut einfach ignorieren, wodurch dann die von CSS angesprochenene id in der HTML-Datei nicht existiert und somit auch nicht gestylt wird, oder dem Browser ist Groß- und Kleinschreibung egal.

Feninic · 2. September 2011

Guten Morgan,

jetzt verstehe ich das, also wenn der Browser die Sachen dann ignoriert, kann er sie ja logischerweise nicht ausführen und setzt dann z.B Inhalt von div's die als seperat geplant waren in den vorherigen, weil er einfach die großgeschriebene Anweisung ignoriert.

Der Euro fällt manchmal in Centstücken, aber ich glaube jetzt ist er komplett gefallen.

Dankeschön für die Erklärung.

LG Feninic

IE & Chrome zerschießen das Layout

Jetzt mitmachen!

Teilen