✔ IE bricht Float-Layout um

Css-Newbie · 31. März 2010

Hallo,

also ich habe folgende Seite.

Mein Problem ist, dass im IE das Float-Layout umgebrochen wird. Im FF kann ich das umgehen in dem ich das NOBR-Tag verwende.

Ich möchte erreichen, dass das Menu auf der linken Seite eine feste Breite hat und eine variable Höhe. Beim Content auf der rechten Seite soll beides Variable sein. Vielleicht ist float das falsche mittel dafür, aber ich weiss nicht wie ich es sonst machen soll.

So wie das verhalten im FF aktuell ist, ist mein wunschverhalten.

HTML:

<html>
<head>
<style>
<!--
body {
	padding: 0px;
	margin: 0px;
	background-color: #FFFFFF;
	font-family: arial, verdana, Sans-serif;
}
  
#top { /* relative Breite - min 800 */
	margin-left: auto;
	margin-right: auto;
	margin-top: 5px;
	margin-bottom: 7px;
	width: 98%; 
	position: relative;
	height: 85px;
	background-color: green;
}

#navi, #content{
	min-height: 400px;
}


#navi {
	overflow: auto;
	width: 187px;
	height:auto !important;  
	height: 400px;
	margin-left: 1.6%;
	margin-right: 8px;
	float:left;
	background-color: red;
}

#content {	
	overflow: hidden;
	height:auto !important;  
	height: 70%;
	margin-right: 1.6%;
	min-width:500px;
	width: auto;
	background-color: blue;
}

#bottom { 
	clear:both;
	margin-left: auto;
	margin-right: auto;
	margin-top: 8px;
	margin-bottom: 10px;
	width: 98%; 
	height: 20px;
	background-color: green;	
}

-->
</style>
</head>
<body>
<div id="top">
	Title
</div>
<NOBR>
	<div id="navi">
		<p>
			Navi Navi Navi Navi <br/>

			Navi Navi Navi Navi <br/>
			Navi Navi Navi Navi <br/>
			Navi Navi Navi Navi <br/>
			Navi Navi Navi Navi Navi Navi  
		</p> 
	</div>
	<div id="content">
		Content
		<pre>

			bla bla bla bla bla bla
			bla bla bla bla bla bla
			bla bla bla bla bla bla
			bla bla bla bla bla bla
			bla bla bla bla bla bla
			bla bla bla bla bla bla
		</pre>
	</div>
</NOBR>
<div id="bottom">
	Footer
</div>

</body>
</html>

Maik · 31. März 2010

Hi,

welche IE-Version ist hiervon betroffen?

Wichtig: Bei CSS-Problemen mit dem IE bitte die Version angeben

Hast du bedacht, dass ohne Doctype-Angabe alle Browser im Quirksmode laufen, der in der IE-Familie Nachteile mit sich bringt?

mfg Maik

Css-Newbie · 31. März 2010

Getestet habe ich mit dem IE5 und IE8, bei beiden war das verhalten in etwa gleich. Unterstützen möchte ich eigenltlich >= IE6.

Maik · 31. März 2010

Wie gesagt, der Doctype hier ist hier schon mal entscheidend, was IE8 betrifft, denn der verhält sich im Quirksmode wie IE6, der hier mit seinem "Doubled-Float Margin Bug" bei #navi glänzt.

mfg Maik

Css-Newbie · 31. März 2010

Das mit dem Doctype war mir nicht bewusst, ändert aber leider auch nichts am Ergebnis, die beiden habe ich Probiert (jeweils einzeln).

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
        
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">

Maik · 31. März 2010

Was den eben angesprochenen Bug http://www.positioniseverything.net/explorer/doubled-margin.html betrifft, hilft einer dieser Doctypes sehr wohl weiter, im IE7 und IE8 das Verhalten vom IE5.x und IE6 zu beenden.

Ansonsten erkenne ich mit dem Code keinen Unterschied gegenüber Firefox & Co.

mfg Maik

Css-Newbie · 31. März 2010

Das habe ich vergessen dazu zu schreiben, das Problem tritt erst beim Verkleinern vom Browserfenster auf. Ich habe eine Mindestbreite angegeben im CSS, beim FF kommt dann irgendwann ein horizontaler Browserscrollbar. Beim IE klappt das Flowlayout dann um.

Tritt das Problem bei dir nicht auf?

Maik · 31. März 2010

Nur im IE5.x und IE6, die min-width nicht interpretieren.

Wenn IE7 und IE8 im standardkonformen "Standardsmode" laufen, brechen sie #content nicht um.

Und für die Vorgänger gibt's http://code.google.com/p/ie7-js/

mfg Maik

Css-Newbie · 31. März 2010

hmm, ok dann verstehe ich nicht warum mein IE sich anders verhält.
Bei mir ruscht der Content ab ca 700px Browserfenster-Breite unter das Navi-Menu.

Ok, trotzdem Danke für die vielen Infos.

Maik · 31. März 2010

Mein Test-Code, den ich um den DIV-Block #wrapper ergänzt habe, um auf ihn die min-width-Eigenschaft anzuwenden - desweiteren hab ich darin den Umfluß von #content anders geregelt.

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style>
<!--
body {
	padding: 0px;
	margin: 0px;
	background-color: #FFFFFF;
	font-family: arial, verdana, Sans-serif;
}

 #wrapper {
	width:100%;
	min-width:775px;
}

#top { /* relative Breite - min 800 */
	margin-left: auto;
	margin-right: auto;
	margin-top: 5px;
	margin-bottom: 7px;
	width: 98%; 
	position: relative;
	height: 85px;
	background-color: green;
}

#navi, #content{
	min-height: 400px;
}


#navi {
	overflow: auto;
	width: 187px;
	height:auto !important;  
	height: 400px;
	margin-left: 1.6%;
	margin-right: 8px;
	float:left;
	background-color: red;
	display:inline; /* IE5/IE6 Bug-Fix */
}

#content {	
	overflow: hidden;
	height:auto !important;  
	height: 70%;  
	margin-left: 0 !important;
	margin-left: 225px;
	margin-right: 1.6%;
	background-color: blue;
}

#bottom { 
	clear:both;
	margin-left: auto;
	margin-right: auto;
	margin-top: 8px;
	margin-bottom: 10px;
	width: 98%; 
	height: 20px;
	background-color: green;	
}

-->
</style>

<!-- Für IE5.x & IE6 -->
<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta3)/IE7.js"></script>
<![endif]-->

</head>
<body>

<div id="wrapper">
    <div id="top">
            Title
    </div>
    <NOBR>
            <div id="navi">
                    <p>
                            Navi Navi Navi Navi <br/>

                            Navi Navi Navi Navi <br/>
                            Navi Navi Navi Navi <br/>
                            Navi Navi Navi Navi <br/>
                            Navi Navi Navi Navi Navi Navi
                    </p>
            </div>
            <div id="content">
                    Content
                    <pre>

                            bla bla bla bla bla bla
                            bla bla bla bla bla bla
                            bla bla bla bla bla bla
                            bla bla bla bla bla bla
                            bla bla bla bla bla bla
                            bla bla bla bla bla bla
                    </pre>
            </div>
    </NOBR>
    <div id="bottom">
            Footer
    </div>
</div>

</body>
</html>

mfg Maik

✔ IE bricht Float-Layout um

Css-Newbie

Maik

Css-Newbie

Maik

Css-Newbie

Maik

Css-Newbie

Maik

Css-Newbie

Maik

Neue Beiträge