IE bricht Float-Layout um

  • Themenstarter Themenstarter Css-Newbie
  • Beginndatum Beginndatum
C

Css-Newbie

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>
 
Getestet habe ich mit dem IE5 und IE8, bei beiden war das verhalten in etwa gleich. Unterstützen möchte ich eigenltlich >= IE6.
 
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
 
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">
 
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?
 
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.
 
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
 
Zurück