Zerschossenes Layout bei IE 7 und 8 @ tutorials.de: Tutorials, Forum & Hilfe

Sprint · 19.06.10 10:20

Hallo zusammen,

der IE treibt mich mal wieder zum Wahnsinn. Der Designer meinte mal wieder, einen zweifarbigen Hintergrund bauen zu müssen. Mit zwei entsprechend eingefärbten Blöcken und einem überlagerten Bild funktioniert das eigentlich. Wenn da nicht der IE wäre, bei dem 2 x 50% > 100% sind. Wenn die beiden Blöcke je 50% haben, kann er die nicht nebeneinander stellen, sondern nur dann, wenn sie z.B. 49% haben. Damit kann man noch leben, auch wenn es mal wieder typisch ist.
Das als Vorgeschichte, warum der Kopfbereich so merkwürdig aufgebaut ist. Der eigentliche Content Bereich soll nun aber wiederum den Kopfbereich überlagern. auch das funktioniert in jedem normalen Browser (siehe Screenshot), außer dem IE. Die Überlagerung kriegt er ja noch hin, aber weder ist der Bereich zentriert, noch stimmen die darin eingebetteten Teile (siehe 2. Screenshot). Vielleicht habe ich es auch mal wieder viel zu kompliziert gemacht, aber irgendwie bin ich im Moment völlig ratlos, wo das Problem liegt.

Code css:

#wrapout { 
    background-image: url(../images/top.png); 
    background-repeat: no-repeat; background-position: center top; 
    position: absolute; width: 100%; height: 100%; margin-top: -255px; 
}
#wrapin { position: relative; width: 950px; margin-right: auto; margin-left: auto; height: auto; }
#btl { background-color: #2d2d2d; position: relative; width: 49%; height: 255px; float: left; }
#btr { background-color: #272727; position: relative; width: 49%; height: 255px; float: right; }
#btop { background-color: #191919; position: relative; width: 100%; height: 40px; }
#header { color: #333; font-size: 1.2em; background-color: #ececec; 
    position: relative; width: 878px; height: 167px; 
    float: none; padding: 15px 30px 8px; border: solid 6px white; 
}
#headtext { width: 476px; height: 167px; float: left; }
#headbutton { width: 180px; height: 167px; float: left; }
#domain { font-size: 2.5em; line-height: 3em; position: relative; left: 40px; width: auto; height: 40px; float: none; margin-bottom: 40px; }
#show { position: relative; top: 1px; width: 222px; height: 167px; float: right; }
pre { display:none }
.pics { position: relative; width: 222px; height: 160px; z-index: 5; margin: 0; padding: 0; }
.pics img { position: relative; top: 0; left: 0; margin: 0; padding: 0; width: 222px; height: 160px; z-index: 5; }
#socialwrap { margin-right: auto; margin-left: auto; position: relative; width: 950px; height: 32px; }
#socialwrap img { position: relative; top: 4px; float: right; margin-right: 40px; }
 
#cont { background-color: #272727; 
    position: relative; width: 938px; height: auto; z-index: 20; 
    border-left: 6px solid white; border-bottom: 6px solid white; border-right: 6px solid white; 
    -webkit-border-top-left-radius: 0px; 
    -webkit-border-top-right-radius: 0px; 
    -webkit-border-bottom-left-radius: 6px; 
    -webkit-border-bottom-right-radius: 6px; 
    -moz-border-radius-topleft: 0px; 
    -moz-border-radius-topright: 0px; 
    -moz-border-radius-bottomleft: 6px; 
    -moz-border-radius-bottomright: 6px; 
}
 
#menubox { background-color: #dedede; 
    position: relative; width: 938px; height: 38px; z-index: 50; 
    float: none; padding: 6px; 
    -webkit-border-top-left-radius: 6px; 
    -webkit-border-top-right-radius: 6px; 
    -webkit-border-bottom-left-radius: 0px; 
    -webkit-border-bottom-right-radius: 0px; 
    -moz-border-radius-topleft: 6px; 
    -moz-border-radius-topright: 6px; 
    -moz-border-radius-bottomleft: 0px; 
    -moz-border-radius-bottomright: 0px; 
}

HTML-Code:

<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
		<title>kleinanzeigen.de</title>
		<meta name="description" content="" />
		<meta name="keywords" content="" />
		<link href="css/css.css" rel="stylesheet" />
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">></script>
		<script type="text/javascript" src="http://malsup.github.com/chili-1.7.pack.js"></script>
		<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.2.72.js"></script>
		<script type="text/javascript">
			$.fn.cycle.defaults.speed   = 900;
			$.fn.cycle.defaults.timeout = 4000;
			$(function() {
			    // run the code in the markup!
			    $('#show pre code').each(function() {
			        eval($(this).text());
			    });
			});
		</script>
	</head>
	<body>
		<div id="btop">
			<div id="socialwrap">
				<div class="social"><img src="images/twittericon.png" alt="" height="32" width="32" /></div>
				<div class="social"><img src="images/rssicon.png" alt="" height="32" width="32" /></div>
			</div>
		</div>
		<div id="btl"></div>
		<div id="btr"></div>
		<div class="clear"></div>
		<div id="wrapout">
			<div id="wrapin">
				<div id="domain">Kleinanzeigen.de</div>
				<div id="menubox">
				</div>
				<div id="header">
					<div id="headtext">
						<h1>Hier ist ein bißchen bla bla</h1>
						und das hier ist noch etwas mehr bla bla.
					</div>
					<div id="headbutton">
						<div class="button orange" style="width: 80px;">Registrieren</div>
						<div class="button blue" style="width: 80px;">Anmelden</div>
					</div>
					<div id="show">
						<div id="fade" class="pics">
							<img src="images/anim1.jpg" width="222" height="167" alt="" />
							<img src="images/anim2.jpg" width="222" height="167" alt="" />
							<img src="images/anim3.jpg" width="222" height="167" alt="" />
						</div>
							<pre><code class="mix">$('#fade').cycle();</code></pre>
					</div>
				</div>
				<div id="cont">...</div>
				<div class="clear"></div>
			</div>
			<div id="footer">&copy; kleinanzeigen.de</div>
		</div>
	</body>
</html>

Maik · 19.06.10 10:30

Moin,

wenn ich in deinem (X)HTML-Code die fehlende Doctype-Deklaration ergänze, damit das Dokument den Browsern im standardkonformen Modus übergeben wird, und sie nicht in den "Quirks Mode" schalten, zerschiessen IE7 u. IE8 das Layout in keinster Weise.

Lediglich für IE7 wäre deinen CSS-Auszügen zufolge (CSS-Regel der Klasse .clear fehlt hier), scheinbar noch eine Anpassung der margin-top-Regel für #wrapout erforderlich, da er diesen DIV-Block im Viewport zu weit unten ausrichtet.

mfg Maik

Sprint · 19.06.10 13:37

Mahlzeit,

die doctype Deklaration war drin und ist nur beim Kopieren irgendwie verloren gegangen. War aber auch nur eine auf das wichtigste gekürzte Version, Im Original ist auch die .clear Klasse drin.
Dann liegt es doch wieder mal an der IE-Collection, die da so mies arbeitet. Na dann werde ich erst einmal so weitermachen und hoffen, daß er IE das dann auch irgendwie auf die Reihe bekommt bzw. ich irgendwo dann testen kann. Oder kennst du noch eine andere / bessere Möglichkeit, um mehrere IEs parallel zu nutzen?

Maik · 19.06.10 13:43

Ich hab mir mittels "VirtualBox" zusätzlich zwei virtuelle Maschinen eingerichtet, um in meiner Testumgebung auf die drei "Vollversionen" (6, 7, 8) zurückgreifen zu können, denn auch die "Standalone"-Versionen des IE6 und IE7 sind nur bedingt / beschränkt tauglich.

Dass die erwähnte fehlende Klasse in deinem lokalen CSS existiert, war mir schon klar, und hab sie vorhin beim Testen im Stylesheet mit clear:both aufgenommen. Wollte es hier nur erwähnt haben

mfg Maik

Sprint · 20.06.10 07:28

Moin,

nach Stunden völliger Verwirrung hab ich den Fehler gefunden. Ich hatte in der html Datei noch am Anfang eine kleine php Zeile und die hat das so verschoben wie auf dem Bild zu sehen.

Maik · 20.06.10 08:24

Moin,

laß mich raten, dieser PHP-Code wurde aus irgendeinem Grund nicht geparst, womit er vor der Doctype-Deklaration erhalten blieb:

PHP-Code:


<?php  // PHP-Code  ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
...

Mit Ausnahme eines möglichen XML-Prologs vor dem Doctype, der die Zeichenkodierung für das XHTML-Dokument angibt:

HTML-Code:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
...

schaltet der IE7 und IE8 umgehend in den "Quirks Mode", wenn davor jegliche Formen von Zeichenfolgen existieren (z.B.: HTML-Kommentar, BOM mit "ï»¿", nicht-geparster PHP-Code, u.v.m.). Ihre Vorgänger IE5/6 verhalten sich da genauso, und zusätzlich auch noch bei der XML-Deklaration. Diesen Bug haben die IE-Entwickler seinerzeit teilweise im IE7 behoben, sodass IE7 u. IE8 weiterhin in den "Quirks Mode" schalten würden, wenn vor der XML-Deklaration, oder zwischen ihr und der Doctype-Deklaration ein HTML-Kommentar steht.

Wozu die IE-Familie in diesem Darstellungsmodus gegenüber den anderen Browsern dann noch imstande ist, oder halt eben nicht mehr, um den offiziellen CSS-Spezifikationen zu folgen, und beispielsweise das W3C-Boxmodell korrekt zu interpretieren, hast du ja von ihnen eindrucksvoll demonstriert bekommen.

Für die Zukunft empfehle ich dir, im IE8 das integrierte Entwicklertool zu nutzen (Aufruf per "F12"), das dich u.a. über den Dokumentmodus informiert, in dem sich IE8 aktuell befindet ("Quirksmode", "IE7-Standards" oder "IE8-Standards"). Damit sollte dir eine stundenlange Recherche nach der Fehlerursache erspart bleiben, denn wenn er im "Quirksmode" läuft, ist dies ein unmißverständlicher Hinweis, dass da zu Beginn des (X)HTML-Codes mit der Doctype-Deklaration etwas nicht stimmt.

mfg Maik

Sprint · 20.06.10 09:47

Nun ja, eine .html Seite wird nun mal nicht auf php Anteile untersucht. Die hatte ich umbenannt, um lokal die Seite direkt im Browser ansehen zu können. Wenn die .php lautet, stellt er ja nur den Quelltext dar. Ich hatte ja vorher noch die Seite validieren lassen und ganz stolz darauf, daß sie auf Anhieb durch kam.

Maik · 20.06.10 09:54

Zitat von Sprint

Nun ja, eine .html Seite wird nun mal nicht auf php Anteile untersucht.

Das kann man so pauschal nicht sagen, denn es hängt davon ab, ob sie in der herkömmlichen (Windows-)Betriebssystemumgebung, oder über das "Hypertext Transfer Protocol" (http://...) aufgerufen wird, und ob der Webserver so konfiguriert ist, dass die angeforderten HTML-Dokumente zunächst an den PHP-Interpreter geschickt werden, bevor der Client sie zu Gesicht bekommt

Diese Zeile hab ich dafür in einer .htaccess-Datei auf dem Apache-Server hinterlegt:

Code :

1	AddType application/x-httpd-php .htm .html

mfg Maik

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

3-Spalten-Layout unter 2-Spalten-Layout setzen

Komplexes Tabellen Layout zu CSS Layout

Layout

SafeGuard Easy und zerschossenes Win XP

Frame Layout oder Table Layout?

E-Mail:

Abonnieren Abbestellen