✔ Volle Seitenhöhe will im IE nicht

Status
Nicht offen für weitere Antworten.
zempsit

zempsit

Erfahrenes Mitglied
Ich bin gerade meine Seite http://www.zeme.ch etwas am redesignen.
Nun will ich, dass der Layer immer über die volle Seitenhöhe geht. Im Firefox klappt das ganz. Der IE zeigt aber immer noch einen recht dicken Rand, bei Opera ist er etwas kleiner. Ich habe nun schon einiges probiert, aber irgendwie will das nicht klappen.
Hier der entscheidende CSS-Code:

Code: 
html, body {
	padding:0px;
	margin:0px;
	height:100%;
	}

body {
	background-image:url(../img/background.gif);
	background-repeat:repeat-y;
	background-position:top center;
	width:100%;
	font-family:Arial, Helvetica, sans-serif;
	font-size:13px;
	}
		
#bgheight {
	background-image:url(../img/background_riesig.gif);
	background-repeat:repeat-y;
	background-position:top center;
	width:100%;
	margin:0px;
	padding:0px;
	min-height:100%;
	height:auto;
	text-align:center;
	}			

* html #bgheight {
	height:100%;
	}

#top, #bottom {
	width:780px;
	height:3px;
	background-color:#000000;
	margin:0px auto;
	padding:0px;
	font-size:0px;
	}
	
#bottom {
	background-color:#273115;
	}	

#navi {
	width:780px;
	margin:0px auto;
	padding:0px;
	border:0px;
	white-space:nowrap;
	text-align:left;
	background-image:url(../img/backtop_gross.jpg);
	background-repeat:no-repeat;
	height:155px;
	overflow:hidden;
	}

#contenter {
	width:780px;
	background-color:#FFFFFF;
	margin:0px auto;
	padding:0px;
	overflow:hidden;
	border-left:1px solid #D2691E;
	border-right:1px solid #D2691E;
	voice-family: "\"}\"";
	voice-family:inherit;
	width:778px;
	}		

#leftcol {
	position:static;
	width:580px;
	float:left;
	padding:0px 0px 25px 0px;
	}

#rightcol {
	position:static;
	width:178px;
	float:left;
	padding:0px 0px 25px 0px;
	margin:0px 0px 0px 20px;
	text-align:right;
	}

#foooter {
	clear:both;
	width:778px;
	background-color:#D2691E;
	height:5px;
	font-size:0px;
	padding:0px;
	margin:0px;
	}

#preload {
	display:none;
	}

Ich bin für jede Hilfe dankbar.
 
Hi,

ich kann dir leider nicht den genauen Grund nennen, aber es hängt auf irgendeine Weise mit den beiden Javascripts mootools.js und slimbox.js zusammen, denn als ich eben die Seite lokal auf meinem PC ohne die beiden eingebundenen Scripts im IE betrachtet habe, war die Lücke zum unteren Fensterrand verschwunden.

Wenn ich jeweils nur eines der beiden Scripts in das Dokument lade, erscheint die Lücke ebenfalls nicht.
 
Hi Maik

Vielen Dank für deinen Tipp. Jetzt weiss ich zumindest, wo ich suchen muss. Aber finden werde ich so schnell wohl nichts.
 
Was mir soeben auch noch aufgefallen ist:
Sobald ich einaml ein Bild vergrössert habe, also das Slimbox-Script gestartet wurde, existiert der Fehler im IE nicht mehr.
 
Ich konnte das Problem jetzt lösen. Den Fehler im IE bzw. in den .js-Files konnte ich zwar nicht finden.
Stattdessen habe ich einfach mein Stylesheet etwas verändert. Bei der vorigen Variante war sowieso ein Layer unnötig. Er war noch ein Überbleibsel aus einer älteren Version.
Ich schreibe hier noch kurz das neue CSS rein:

Code: 
html, body {
	padding:0px;
	margin:0px;
	height:100%;
	}

body {
	background-image:url(../img/background_riesig.gif);
	background-repeat:repeat-y;
	background-position:top center;
	font-family:Arial, Helvetica, sans-serif;
	font-size:13px;
	}

#top {
	width:780px;
	height:3px;
	background-color:#000000;
	margin:0px auto;
	padding:0px;
	font-size:0px;
	}	

#navi {
	width:780px;
	margin:0px auto;
	padding:0px;
	border:0px;
	white-space:nowrap;
	text-align:left;
	background-image:url(../img/backtop_gross.jpg);
	background-repeat:no-repeat;
	height:155px;
	overflow:hidden;
	}

#contenter {
	width:780px;
	background-color:#FFFFFF;
	margin:0px auto;
	padding:0px;
	overflow:hidden;
	border-left:1px solid #D2691E;
	border-right:1px solid #D2691E;
	voice-family: "\"}\"";
	voice-family:inherit;
	width:778px;
	}		

#leftcol {
	position:static;
	width:580px;
	float:left;
	padding:0px 0px 0px 0px;
	}

#rightcol {
	position:static;
	width:178px;
	float:left;
	padding:0px 0px 0px 0px;
	margin:0px 0px 0px 20px;
	text-align:right;
	}

/* floats aufheben mit clear */
#foooter {
	clear:both;
	width:778px;
	background-color:#D2691E;
	height:5px;
	font-size:0px;
	padding:0px;
	margin:0px;
	}

#preload {
	display:none;
	}

Die Seite wird jetzt im Firefox, Opera, Konqueror und auch IE richtig angezeigt. Beim IE verbleibt zwar unten etwas mehr Lehrraum, aber das stört mich nicht so gross.
 
TS-JC hat gesagt.:
Ist der Fehler behoben?
Denn bei mir im FF und IE (6 oder 7) sehen die Seiten identisch aus.

Ausser das im IE6 das Menü nicht geht, daran solltest evt nochmal arbeiten :)
http://www.cssplay.co.uk/menus/flyoutt.html
^^ der Link sollte helfen, das hab ich vor paar Tagen auch erst genutzt für Anpassung an IE6
Zum Vergrößern anklicken....

Hi TS-JC

Da haben sich unsere Beiträge wohl überschnitten :). Also bei mir geht das Menü im IE 6. Ich arbeite mit Linux und so starte ich ihn über Wine, aber das sollte ja eigentlich keinen Unterschied machen.
Was funktioniert denn bei dir nicht und mit welcher genauen Version hast du es ausprobiert?
Danke und mfg
 
Ja Linux hat manchmal so seine Unterschiede, das hab ich schon beim FF festgestellt das der dort manchmal ganz anders reagiert.

Also ich nutze den IE6 von MultipleIE unter Windows.

Die Menüs gehen nicht auf.
Dafür ist allerdings ein Leerraum unter den Teilen wo sonst ein Menü rauskommt.


Habe mir grade nochmal einen Screenshot von http://ipinfo.info/netrenderer/index.php geholt... da sieht auch alles richtig aus.
Dann is da wohl ein Fehler bei mir.. aber keine Ahnung warum, dachte eigentlich die IE6 Version wäre auch ok.
 
Und teile bitte mal mit wie das da dann aussieht.
Ich frage auch mal wen der nur den 6er drauf hat.

Weil is ja blöd wenn mein nachträglich installierter IE6 das falsch anzeigt, dann kann ich den in punkto IE6 Optimierung ja nicht nutzen.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück