✔ IE - Height: 100%

-Raid- · 2. Dezember 2008

Hi,
ich bin's nochmal

Im Firefox läuft jetzt soweit alles wie gewollt, jetzt beginnt die Kriese mit dem IE.
Zuerst wollte der IE die Seite nicht mittig anzeigen, dieses Problem konnte ich bereits lösen. Jetzt steck ich jedoch, leider, bei der Höhenangabe. Der IE will nicht, wie so oft, wie ich will. Und noch ein Problem kosmetischer Art: Die linke Navigation. Das Overlay soll eigentlich bis zum Rand reichen.

http://typo3.cyber-d-sign.de/index.php?id=147

Code:

* {
	margin:0;
	padding:0;
}

html,body {
	margin:0;
	padding:0;
}

body {
	height: 100% !important;  /* für moderne Browser */
	color: #000;
	font-size: 13px;
	font-family: Arial, Helvetica, sans-serif; letter-spacing: 0px;
	background: #595959;
	padding:0px; margin: 0px 0px 0px 20%;
}

.borderbox {
	border: 1px solid #000;
}

.topgrafik {
    margin:0 0 0 0px;
    padding: 0 0 0 0;
    background: url(images/content_top.png);
    height:13px;
}

.bottomgrafik {
    margin:0 0 0 0px;
    padding: 0 0 0 0;
    background: url(images/content_bottom.png);
    height:13px;
}

a {outline: none; color: #000; text-decoration: none;}
a:hover { color: #888888; text-decoration: underline;}

div.wrapper {
	position:relative; 
	left: 0px;
	min-height: 100%;
	background-color: #e4e4e4;
	border-left: 1px solid #000;
	border-right: 1px solid #000;
	width: 747px;
	padding:0px; margin: 0px 0px;
}


.clearfix:after {
	content: ".";
	display: block;
	height: 0%;
	clear: both;
	visibility: hidden;
}

	.clearfix {display: inline-block;}

	/* Hides from IE-mac \*/
	* html .clearfix {height: 1%;}
	.clearfix {display: block;}
	/* End hide from IE-mac */

div.header {
	font-size: 1.0em;
	margin: 0px 0px 0px 0px;
	width: 747px;
	height: 116px;
	background: url(images/header.png);
}

div.navigation {
	font-size: 16px;
	font-family: verdana;
	height: 31px;
	width: 747px;
	margin: 0px;
	background: url(images/navigationm.png);
	border-top: 1px solid #797878;
	border-bottom: 1px solid #797878;
	list-style-type: none;
	list-style-position:none;
	list-style-image:none;
}
.navigation ul li { display: inline; }
 
.navigation ul li a:link, .navigation ul li a:visited {
	text-decoration: none;
	line-height: 31px;
	color: #000;
	border-left: 1px solid #bebebe;
	padding-left: 5px;
	padding-right: 5px;
	height: 31px;
	float: right;
	margin: 0px;
	list-style-type: none;
	list-style-position:none;
	list-style-image:none;
}

.navigation ul li a:hover {
    background: url(images/bg_navio.png);
	list-style-type:none;
}

div.navigationl {
	float: left;
	position: relative;
	/*display: block;*/
	width: 150px;
	background: #f4f4f4;
	margin: 10px 0px 0px 10px;
	padding: 0px;
	line-height: 25px;
	list-style: none;
	list-style-type: none;
	list-style-position:none;
	list-style-image:none;
}

div.navigation1 ul {
	list-style: none;
	list-style-type: none;
	list-style-position:none;
	list-style-image:none;
} 

div.navigationl a:link, div.navigationl a:visited {
	display: block;
	border: 1px solid #f4f4f4;
	text-decoration: none;
	color: #000;
	width: 133px;
	padding-left:15px;
}	
.clear {
	clear:both;
}

div.navigationl a:hover{
	background-color: #dadada;
	border-top: 1px solid #000;
	border-bottom: 1px solid #000;
}    

div.inhalt {
	position: relative; top: 0px; left: 0px;
	width: 563px;
	background-color: #f4f4f4;
	margin: 10px 0px 0px 10px;
	float: left;
}
ul {
	list-style: none;
	list-style-type: none;
	list-style-position:none;
	list-style-image:none;
}

li {
	list-style: none;
	list-style-type: none;
	list-style-position:none;
	list-style-image:none;
}

div.inhalt a:link, div#Inhalt a:visited {
	color: #000000;
}	
	
div.inhalt a:hover{
	color: #515151;
	text-decoration:none;
}    

div.inhalt p {
	font-size: 1em;
	margin: 0px 0px 0 15px;
	padding: 5px;
	margin-bottom: 0em;
}
	
div.footer {
	margin: 10px 0px 0px 0px;		padding: 0px;
	position:fixed;
	width: 747px;
	height: 26px;
	bottom: 0;
	clear: left;
	color: #000;
	background: url(images/footer.png);
}

div.footer p {
	font-size: 1em;
	margin: 0 0;
	padding: 5px 15px;
}

Mit freundlichen Grüßen,
-Raid-

TS-JC · 2. Dezember 2008

seit wann ist height: 100% denn überhaupt w3c konform?
da hab ich wohl was verpasst.. vor nem Jahr oder so wars immer böses CSS soweit ich mich erinner

habe einmal gegoggelt und direkt was gefunden
ie6 zb kennt kein height: 100%, aber ein min-height: 100%
versuch das mal so

Maik · 2. Dezember 2008

Hi,

vergleich doch einfach mal die Seite mit dieser hier http://knofy.de/test/main.html aus deinem letzten Thread.

Darin kann ich zumindest im IE7 keine Probleme entdecken. Dass es dort im IE6 mit der Höhe "zwickt", dürfte schlichtweg daran liegen, dass er den angewandten position-Wert fixed für den Footerbereich nicht interpretiert, und somit die Box in die Länge (Höhe) zieht.

mfg Maik

Maik · 2. Dezember 2008

TS-JC hat gesagt.:
seit wann ist height: 100% denn überhaupt w3c konform?
da hab ich wohl was verpasst.. vor nem Jahr oder so wars immer böses CSS soweit ich mich erinner

habe einmal gegoggelt und direkt was gefunden
ie6 zb kennt kein height: 100%, aber ein min-height: 100%
versuch das mal so

Seit wann sollte denn die height:100%-Deklaration nicht w3c-konform sein?

Der IE6 kennt sehr wohl height:100%, und interpretiert eben nicht die min-height-Deklaration, betrachtet / behandelt aber die height-Eigenschaft wie eine "Mindesthöhe".

mfg Maik

-Raid- · 2. Dezember 2008

Gesagt, getan. Ich habe jetzt im wrapper eine Höhe von 100% eingefügt, funktioniert.
Nur hängt der Footer jetzt leider nicht da, wo er hängen soll. Bottom: 0; zeigt hier leider keine Funktion.

MfG,
-Raid-

Maik · 2. Dezember 2008

Übergib mal das Dokument, wie die letzte Seite, im standardkonformen Modus, denn im Quirks-Modus verhält sich der IE7 wie seine Vorgänger, und unterstützt ebenfalls nicht position:fixed.

mfg Maik

-Raid- · 2. Dezember 2008

Das mit dem Quirksmode war die Lösung. Was soll dieser Quirksmodus eigentlich bewirken? Scheint ja nur Probleme zu bereiten...

Und wieder einmal danke für deine Hilfe Maik.

MfG,
-Raid-

Maik · 2. Dezember 2008

Der »DOCTYPE-Switch« und seine Auswirkungen

mfg Maik

-Raid- · 2. Dezember 2008

Nächstes Problem...
Die Höhe stagniert wieder auf der Auflösung. Solangsam dreh ich am Rad...

Ich hab jetzt im Inhalt den Wert Margin eingefügt:

Code:

	margin: 10px 0px 20px 10px;
	.margin: 10px 0px 35px 10px;

Damit der Footer nicht mehr über dem Inhalt liegt.
Die Höhe im Wrapper sowie im Body ist auf 100% eingestellt.

Code:

* {
	margin:0;
	padding:0;
}

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

body {
	height: 100% !important;
	color: #000;
	font-size: 13px;
	font-family: Arial, Helvetica, sans-serif; letter-spacing: 0px;
	background: #595959;
	padding:0px; margin: 0px 0px 0px 20%;
}

.borderbox {
	border: 1px solid #000;
}

.topgrafik {
    margin:0 0 0 0px;
    padding: 0 0 0 0;
    background: url(images/content_top.png);
    height:13px;
}

.bottomgrafik {
    margin:0 0 0 0px;
    padding: 0 0 0 0;
    background: url(images/content_bottom.png);
    height:13px;
}

a {outline: none; color: #000; text-decoration: none;}
a:hover { color: #888888; text-decoration: underline;}

div.wrapper {
	position:relative; 
	left: 0px;
	height: 100%;
	background-color: #e4e4e4;
	border-left: 1px solid #000;
	border-right: 1px solid #000;
	width: 747px;
	padding:0px; margin: 0px 0px;
}


.clearfix:after {
	content: ".";
	display: block;
	height: 0%;
	clear: both;
	visibility: hidden;
}

	.clearfix {display: inline-block;}

	/* Hides from IE-mac \*/
	* html .clearfix {height: 1%;}
	.clearfix {display: block;}
	/* End hide from IE-mac */

div.header {
	font-size: 1.0em;
	margin: 0px 0px 0px 0px;
	width: 747px;
	height: 116px;
	background: url(images/header.png);
}

div.navigation {
	font-size: 16px;
	font-family: verdana;
	height: 31px;
	width: 747px;
	margin: 0px;
	background: url(images/navigationm.png);
	border-top: 1px solid #797878;
	border-bottom: 1px solid #797878;
	list-style-type: none;
	list-style-position:none;
	list-style-image:none;
}

.navigation ul li { display: inline; }
 
.navigation ul li a:link, .navigation ul li a:visited {
	text-decoration: none;
	line-height: 31px;
	color: #000;
	border-left: 1px solid #bebebe;
	padding-left: 5px;
	padding-right: 5px;
	height: 31px;
	float: right;
	margin: 0px;
	list-style-type: none;
	list-style-position:none;
	list-style-image:none;
}

.navigation ul li a:hover {
    background: url(images/bg_navio.png);
	list-style-type:none;
}

div.navigationl {
	float: left;
	position: relative;
	/*display: block;*/
	width: 150px;
	background: #f4f4f4;
	margin: 10px 0px 0px 10px;
	padding: 0px;
	line-height: 25px;
	list-style: none;
	list-style-type: none;
	list-style-position:none;
	list-style-image:none;
}

div.navigation1 ul {
	list-style: none;
	list-style-type: none;
	list-style-position:none;
	list-style-image:none;
} 

div.navigationl a:link, div.navigationl a:visited {
	display: block;
	border: 1px solid #f4f4f4;
	text-decoration: none;
	color: #000;
	width: 133px;
	padding-left:15px;
}
	
.clear {
	clear:both;
}

div.navigationl a:hover{
	background-color: #dadada;
	border-top: 1px solid #000;
	border-bottom: 1px solid #000;
}    

div.inhalt {
	position: relative; top: 0px; left: 0px;
	width: 563px;
	background-color: #f4f4f4;
	margin: 10px 0px 20px 10px;
	.margin: 10px 0px 35px 10px;
	float: left;
}

ul {
	list-style: none;
	list-style-type: none;
	list-style-position:none;
	list-style-image:none;
}

li {
	list-style: none;
	list-style-type: none;
	list-style-position:none;
	list-style-image:none;
}

div.inhalt a:link, div#Inhalt a:visited {
	color: #000000;
}	
	
div.inhalt a:hover{
	color: #515151;
	text-decoration:none;
}    

div.inhalt p {
	font-size: 1em;
	margin: 0px 0px 0 15px;
	padding: 5px;
	margin-bottom: 0em;
}
	
div.footer {
	margin: 10px 0px 0px 0px;		padding: 0px;
	position: fixed;
	width: 747px;
	height: 26px;
	bottom: 0;
	clear: left;
	color: #000;
	background: url(images/footer.png);
}

div.footer p {
	font-size: 1em;
	margin: 0 0;
	padding: 5px 15px;
}

Maik · 2. Dezember 2008

-Raid- hat gesagt.:
Nächstes Problem...
Die Höhe stagniert wieder auf der Auflösung.

Wie darf man das verstehen? Wie und in welchem Browser (Version) äußert sich das Problem konkret?

mfg Maik

✔ IE - Height: 100%

-Raid-

Mitglied

TS-JC

Erfahrenes Mitglied

Maik

Maik

-Raid-

Mitglied

Maik

-Raid-

Mitglied

Maik

-Raid-

Mitglied

Maik

Neue Beiträge