✔ IE verschiebt absolut positionierte Navigation

S-lord · 8. Februar 2010

Huhu,

ich bin froh, meine Seite nun recht erfolgreich umgesetzt bekommen zu haben. Leider verweigert sich der IE 8 (ältere Versionen nicht getestet), während der Firefox und Opera alles schön und richtig darstellen. Die Navigation möchte nicht bleiben, wo sie sollte. Na, wenn das kein Fall für die Wuthöhle ist!

Wie dem auch sei: Ich habe von conditional comments gehört, leider finde ich nichts passendes zu meinem Problem. Könnt ihr mir helfen? Hier die relevanten Codeschnipsel:
Achtung: Wer sich die Seite live ansehen will, klickt bitte hier:
Unbenannte Seite

Screenshots für die kurze Fehlerwiedergabe:
http://www.imagebanana.com/img/t6h85i2m/3browser.png

Der Aufbau der Seite im Prinzip:

HTML:

<div id="wrapper">
            <div id="navi">
            </div>
        	<!-- NAVIGATION -->
            <div id="navi_overlay"> // Hier stehen die Menüpunkte mit 100% Deckkraft. Das geschieht extra, da ja die Navigation eine Transparenz besitzt.
            	<ul>
                	<li><a href="index.php?link=news" style="color:white;">startseite</a></span></li>
                    <li><a href="index.php?link=contact">über mich</a></li>
                    <li><a href="index.php?link=tutorials">tutorials</a></li>
                    <li><a href="index.php?link=flash">flash</a></li>
                    <li><a href="/acp">admin</a></li>
                </ul>
            </div>
        <div id="all">
            <div id="content">
            	<?php
                    // Inhalt
                ?>
            </div>
            <div id="wrapper_foot">
                <div id="shoutbox">
                    <div id="shoutbox_entrys">
                        <?php
                            // Shoutbox Einträge
                        ?>
                    </div>
                    <div id="shoutbox_form">
                        <?php
                            // Shoutbox Formular
                        ?>
                    </div>
                </div>
                <div id="poll">
                     // Umfrage
                </div>
			</div>
        </div>
    </div>

CSS:

HTML:

* {
	padding: 0;
	margin: 0;
}

html {
	overflow-y: scroll;
}

body {
	background: #335a6b;
	font-family: Arial, Helvetica, sans-serif;
	color: #53524e;
	background: url(images/wood.gif) #a6c4ff center scroll;
	background-repeat: repeat;
	background-position: 0 0;
}

#wrapper {
	width: 780px;
	margin: auto;
	position: relative;
}

#wrapper_foot {
	position: absolute;
	background: white;
	width: 780px;
	border-bottom: 15px solid #53524e;
}

#all {
	background: white;
	border-top: 15px solid #53524e;
	border-bottom: 15px solid #53524e;
	margin-top: 60px;
	display: inline-block; /* durchgehend weißer Bereich */
}

#content {
	width: 510px;
	margin-top: 30px;
	padding-left: 240px;
	padding-right: 30px;
	padding-bottom: 10px;
	min-height: 400px;
	border-bottom: 15px solid #53524e;
}

	#content img {
		margin: 10px 0;
		/* border: 0px solid #53524e; */
	}
	
	#content img.news {
		margin-top: 10px;
		border: 1px solid #ddd;
		border-right-color: #aaa;
		border-bottom-color: #aaa;
	}
	
	#content a:link,
	#content a:visited {
		color: #006699;
		text-decoration: none;
		font-style: italic;
	}
	
	#content a:hover,
	#content a:visited:hover {
		color: #006699;
		text-decoration: none;
		font-style: italic;
		font-weight: bold;
	}
	
	#content form {
		width: 200px;
	}
	
	#content input {
		width: 100%;
		margin-bottom: 3px;
		font-size: 11px;
		background: white;
		color:  #53524e;
		border: 1px solid #53524e;
		padding: 2px;
	}
	
	#content textarea {
		margin-bottom: 2px;
		width: 100%;
		height: 100%;
		font-size: 11px;
		background: white;
		color: #53524e;
		font-family: Arial, Helvetica, sans-serif;
		border: 1px solid #53524e;
		padding: 2px;
	}
	
	#content form {
		margin-top: 10px;
	}
	
	#contenct img#captcha {
		border: 1px solid #53524e;
	}

#navi {
	left: 26px;
	width: 190px;
	height: 100%;
	background: url(images/navi.gif);
	opacity: 0.5;
	position: absolute;
	padding-left: 0;
	border: 1px solid #53524e;
}

	#navi_overlay {
		margin-left: 1px;
		left: 26px;
		width: 191px;
		position: absolute;
		padding-left: 0;
	}
	
	#navi_overlay li {
		padding-left: 10px;
		list-style-type: none;
		padding-top: 20px;
		padding-bottom: 20px;
		border-bottom: 1px solid #bebdbc;
		color: #53524e;
		margin-right: 1px;
	}
	
	#navi_overlay a:link,
	#navi_overlay a:hover,
	#navi_overlay a:visited,
	#navi_overlay a:visited:hover {
		color: #53524e; 
		text-decoration: none;
	}

#shoutbox {
	float: left;
	min-height: 156px;
	/* height: 156px;
	overflow: hidden; */
	width: 450px;
	padding: 5px;
	margin: 10px;
	color: white;
	background: #53524e;
}

	#shoutbox_entrys {
		float: left;
		width: 269px;
		/* border-right: 1px solid #bebdbc; */
	}
	
	
		.entry {
			width:264px;
			font-size: 12px;
			padding-bottom: 3px;
			margin-bottom: 3px;
			border-bottom: 1px dashed #bebdbc;
		}
		
		.entry span {
			color: #3d9ec8;
		}
	
	#shoutbox_form {
		float: right;
		width: 169px;
		padding-left: 5px;
		padding-right: 6px;
	}
		
		#shoutbox_form input {
			width: 100%;
			margin-bottom: 3px;
			font-size: 11px;
			background: #53524e;
			color: white;
			border: 1px solid #bebdbc;
			padding: 2px;
		}
		
		#shoutbox_form textarea {
			margin-bottom: 2px;
			width: 100%;
			height: 100%;
			font-size: 11px;
			background: #335a6b;
			color: white;
			font-family: Arial, Helvetica, sans-serif;
			border: 1px solid #bebdbc;
			padding: 2px;
		}
		
		#shoutbox_form p {
			font-size: 11px;
			color: #bebdbc;
			text-align: center;
		}
	
#poll {
	float: right;
	min-height: 166px;
	width: 264px;
	padding: auto 5px;
	margin: 10px;
	color: #53524e;
	font-size: 12px;
	border: 3px solid #006699;
	line-height: 200%;
	text-align: center;
}

	#poll p {
		margin-bottom: 10px;
	}

	#poll input {
		margin-bottom: 3px;
		font-size: 11px;
		background: #53524e;
		color: white;
		border: 1px solid #bebdbc;
		padding: 2px;
	}
	
	#poll li {
		list-style-type: none;
	}

h1 {
	background: #dbdada;
	color: #006699;
	font-size: 24px;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-weight: normal;
	display: inline;
}

h2 {
	color: #bebdbc;
	font-size: 10px;
	font-weight: normal;
}

#content p {
	font-size: 12px;
}

#content div.meldung {
	position: relative;
	width: 100%;
	text-align: center;
	margin: auto;
	margin-bottom: 10px;
	background: white;
	color: #006699;
	border: 1px dashed #006699;
	font-size: 12px;
	font-weight: bold;
}

#content p.comments {
	margin-bottom: 10px;
	text-align: right;
}

Maik · 8. Februar 2010

Hi,

bitte zukünftig meinen als "Wichtig" markierten und in der Themenübersicht oben festgehaltenen Thread beachten, den ich hier nicht grundlos reingestellt habe:

Bei CSS-Problemen mit dem IE bitte die Version angeben

Oder dürfen wir jetzt frei und munter raten, von welcher IE-Version hier die Rede ist?

mfg Maik

S-lord · 8. Februar 2010

Maik hat gesagt.:
Hi,

bitte zukünftig meinen als "Wichtig" markierten und in der Themenübersicht oben festgehaltenen Thread beachten, den ich hier nicht grundlos reingestellt habe:

Bei CSS-Problemen mit dem IE bitte die Version angeben

Oder dürfen wir jetzt frei und munter raten, von welcher IE-Version hier die Rede ist?

mfg Maik

Im Screenshot siehst du: "IE8"

Maik · 8. Februar 2010

Ich rede vom Themenbetreff, und hab deinen Post daher nicht zuende gelesen, nachdem im ersten Absatz die Version auch nicht genannt wurde, die du jetzt nachträglich hinzugefügt hast.

mfg Maik

S-lord · 8. Februar 2010

Maik hat gesagt.:
Ich rede vom Themenbetreff, und hab deinen Post daher nicht zuende gelesen, nachdem im ersten Absatz die Version auch nicht genannt wurde, die du jetzt nachträglich hinzugefügt hast.

mfg Maik

Den Titel scheine ich jetzt aber leider nicht mehr ändern zu können.

Maik · 8. Februar 2010

So wie's aussieht, nimmt IE8 hier die height:100%-Deklaration für #navi zum Anlaß, den nachfolgenden Block #navi_overlay darunter auszurichten, weil ihm eine Angabe zu seiner Startposition von oben "top" fehlt.

S-lord hat gesagt.:
Den Titel scheine ich jetzt aber leider nicht mehr ändern zu können.

Nö, das kannst du nicht, also merk's dir für die Zukunft.

mfg Maik

Maik · 8. Februar 2010

Gleiches gilt übrigens auch für #navi - auch hier fehlt eine Angabe zu "top", weshalb der Block vom IE8 erst unten ausgerichtet wird.

Und für die Transparenz wirst du dem IE "filter:alpha(opacity=50)" mit auf dem Weg geben müssen, da er die CSS3-Eigenschaft opacity nicht interpretiert.

mfg Maik

hela · 8. Februar 2010

Hallo,

der IE8 hat ein "Entwicklertool", das du im Menü über "Extras" (F12) erreichen kannst. Damit kannst du selbst mal ausprobieren was passiert, wenn du im DIV#all die CSS-Eigenschaft "display: inline-block" zurücknimmst.

S-lord · 8. Februar 2010

hela hat gesagt.:
Hallo,

der IE8 hat ein "Entwicklertool", das du im Menü über "Extras" (F12) erreichen kannst. Damit kannst du selbst mal ausprobieren was passiert, wenn du im DIV#all die CSS-Eigenschaft "display: inline-block" zurücknimmst.

Danke, das klappt! =) Den Befehl musste ich zunächst einsetzen, da ich vorher keinen 2. wrapper für den unteren Bereich hatte, und der weiße Bereich somit nach dem Content stoppte.
Einziges Problem ist nun noch die fehlende Transparenz im IE.

Maik · 8. Februar 2010

S-lord hat gesagt.:
Danke, das klappt! =)

Einziges Problem ist nun noch die fehlende Transparenz im IE.

Mein Vorschläge funktionieren auch

Und wegen der fehlenden Transparenz hab ich dir den entscheidenden Tipp genannt.

Und für die Transparenz wirst du dem IE "filter:alpha(opacity=50)" mit auf dem Weg geben müssen, da er die CSS3-Eigenschaft opacity nicht interpretiert.

mfg Maik

✔ IE verschiebt absolut positionierte Navigation

S-lord

Mitglied

Maik

S-lord

Mitglied

Maik

S-lord

Mitglied

Maik

Maik

hela

S-lord

Mitglied

Maik

Neue Beiträge