Float im IE ?

1 lava

Hallo, ich will ein Layout mit im wesentlichen 2 benachbarten Kästen, wo links ein Navi drinsteht und rechts i.W. der Hauptinhalt (allerdings wieder in einem weiteren Innenkasten). Allerdings soll der Kasten mit dem Navi etwas höher angesetzt sein als der Hauptkasten, und weil ich das sonst mit den Rahmen und Hintergrundfarben für die Kästen nicht anders hingekriegt hätte, hab ich es wie folgt gelöst:

.body{
	width:930px;
	background-color:#F6F7FA;
	border:1px solid #BABFD3;
	margin:0 auto;
	padding:0;
	background-image: url(logo_hi_res.gif);
	background-repeat: no-repeat;	
}

.white{
	margin-left:162px;
	margin-top:-1px;
	background-color:#FFFFFF;
	border-left:1px solid #BABFD3;
	
	width:770px;
	height:40px;
	
}
.main{
	width:757px;
	background:#FFFFFF;
	background-image: url(headline_romp.gif);
	background-position:right top;
	background-repeat: no-repeat;
	border-left:1px solid #BABFD3;
	border-top:1px solid #BABFD3;
	position:relativ;
	right:0px;
	margin-left:162px;
	padding-top:60px;
	padding-left:10px;
	padding-bottom:10px;
	top:0px;
	hight:100%;
}

.innenkasten{
	width:728px;
	border:1px solid #BABFD3;
	background-color:#F6F7FA;
	padding:10px;
}


.navi{
	width:154px;
	float:left;
	margin-top:120px;
	padding:3px;
}

Ich hab also für die Gesamtansicht einen grauen <div class=body> angelegt, der links das graue Navi enthält und rechts sowohl ein white- als auch ein main-Element, wobei das white dazu dient, die obere Ecke "wegzuschneiden".... (Alternativen, wo ich einfach nur das Navi neben das main floaten wollte, führten leider dazu, daß sich die Größe des Navi-Balkens nicht an die Größe des Main-Kastens anpaßte).

Im Firefox funktioniert das alles wunderbar und sieht aus wie beabsichtigt. Im IE zerhaut es mir mein Layout, sobald ich Navi-Elemente einfüge :(
Denn dann rutscht der Navi-Inhalt einfach ÜBER den Beginn des Main-Bereichs hoch, also irgendwie funktioniert das Float nicht.....

Muß ich hier mit einem Clearfix oder sowas arbeiten, und wenn ja, wie???

2 Jörg Kruse

Hallo lava,

kannst du auch nochmal den relevanten Ausschnitt des HTML-Codes posten, inklusive verwendetem Doctype? Weil es nicht 100%ig klar ist, ob z.B. .white innerhalb von .innenkasten liegt etc.

In dem CSS-Code habe ich zwei Fehler gefunden, die korrigiert werden sollten:

.main{
width:757px;
background:#FFFFFF;
background-image: url(headline_romp.gif);
background-position:right top;
background-repeat: no-repeat;
border-left:1px solid #BABFD3;
border-top:1px solid #BABFD3;
position:relative;
right:0px;
margin-left:162px;
padding-top:60px;
padding-left:10px;
padding-bottom:10px;
top:0px;
height:100%;
}

3 lava

Hallo, hier quasi der komplette der Code: (Der Innenkasten heißt Oberkasten und beinhaltet weitere Unterkästen, das spielt aber für das Problem keine Rolle):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>[DOCTITLE]</title>
<style type="text/css">
<-- 
* {
	margin: 0px;
	padding: 0px;
	border: none;
	font-size: 1em;
	line-height: 1.4em;
	font-family: Arial, Helvetica, sans-serif;
	color: #000000;
	font-weight: normal;
}

b,
strong {
	font-weight: bold;
}
body,td,th {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000000;
}
body {
	background-color: #FFFFFF;
	margin-left: 20px;
	margin-top: 40px;
	margin-right: 20px;
	margin-bottom: 20px;
}
a {
	font-size: 12px;
	color: #000000;
	text-decoration: none;
}

h1 {
	font-size: 1.2em;
	color: #454777;
	font-weight: bold;
}
h2 {
	font-size: 1.2em;
	color: #454777;
}
h3 {
	font-size: 12px;
	font-weight: bold;
}
.body{
	width:930px;
	background-color:#F6F7FA;
	border:1px solid #BABFD3;
	margin:0 auto;
	padding:0;
	background-image: url(logo_hi_res.gif);
	background-repeat: no-repeat;	
}

.white{
	margin-left:162px;
	margin-top:-1px;
	background-color:#FFFFFF;
	border-left:1px solid #BABFD3;
	
	width:770px;
	height:40px;
	
}
.main{
	width:757px;
	background:#FFFFFF;
	background-image: url(headline_romp.gif);
	background-position:right top;
	background-repeat: no-repeat;
	border-left:1px solid #BABFD3;
	border-top:1px solid #BABFD3;
	position:relative;
	right:0px;
	margin-left:162px;
	padding-top:60px;
	padding-left:10px;
	padding-bottom:10px;
	top:0px;
	height:100%;
}

.oberkasten{
	width:728px;
	border:1px solid #BABFD3;
	background-color:#F6F7FA;
	padding:10px;
}

.button{
	width:731px;
	text-align:right;
	padding:10px;
}


.unterkasten{
	width:708px;
	border:1px solid #BABFD3;
	background-color:#F6F7FA;
	padding:10px;
	margin-bottom:10px;
}

.twhite{
	width:702px;
	padding:3px;
	background-color:#FFFFFF;
}


.tgray{
	width:702px;
	padding:3px;
	background-color:#F6F7FA;
}

.navi{
	width:154px;
	float:left;
	margin-top:120px;
	padding:3px;
}

-->
</style>
</head>

<body>
<div class="body clearfix">  
	<div class="navi clearfix">
	[NAVI-ELEMENTE]
	</div>
	<div class="white clearfix"> </div>
	<div class="main clearfix"> 
	
		<h1>[HEADLINE]</h1>
		<div class="oberkasten"> Oberkasten mit diversen Unterkästen 
		<!-- UNTERKASTEN START -->
		<div class="unterkasten">
			[SUBLINE]<br />
			<!-- TBLWHT START -->
			<div class="twhite">[tblinhalt]</div>
			<!-- TBLWHT END -->
			<!-- TBLBLK START -->
			<div class="tgray">[tblinhalt]</div>
			<!-- TBLBLK END -->
			
			
		</div>	
		<!-- UNTERKASTEN END -->	
		
		<div class="unterkasten"></div>
		
		</div><!--OBERKASTEN END-->
		
	
	</div><!-- MAIN END-->
	
	
	
</div><!--BODY END-->
</body>
</html>

4 Jörg Kruse

Der IE ignoriert das float:left; - vielleicht wegen dem margin-left, welches er zur Breite der betreffenden Elemente hinzuzählt, wodurch ein Nebeneinander zu eng wird.

Probier mal, das margin-left:162px; von .white und .main gegen ein float:right; auszutauschen

5 lava

funktioniert leider auch nicht :(

Gibt es evtl. eine Möglichkeit, mit Javascript die passenden Höhen/Breiten beim Ladevorgang automatisch berechnen lassen, sowas wie

if height(navi)<height(main+40) then height(navi)=height(main+40)
else height(main) = height(navi)-40

? Wenn ja, wie baue ich das mit JavaScript ein?

P.S. Unsere Mails haben sich gerade überschnitten, ich probiere also deine Methode gleich nochmal aus und gebe dann Rückmeldung!

6 Jörg Kruse

Bei mir funktioniert's.

.white{
float:right;
margin-top:-1px;
background-color:#FFFFFF;
border-left:1px solid #BABFD3;

width:770px;
height:40px;

}
.main{
width:757px;
background:#FFFFFF;
background-image: url(headline_romp.gif);
background-position:right top;
background-repeat: no-repeat;
border-left:1px solid #BABFD3;
border-top:1px solid #BABFD3;
position:relative;
right:0px;
float:right;
padding-top:60px;
padding-left:10px;
padding-bottom:10px;
top:0px;
height:100%;
}

Am Ende musst du nur noch mal clearen, damit der Hintergrund von .body runtergezogen wird:

</div><!-- MAIN END-->

<br style="clear:both; line-height:0" />

</div><!--BODY END-->

7 lava

Also, nun poste ich nochmal alles, ist ja in JSP eingebaut bei mir (aber Styles werden dort erkannt):

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1" import="com.rabbit.umfragetool.*,java.util.List"%><% 
   
    
    String cnr=request.getParameter("changenr");
    String resetvalue=request.getParameter("reset");
    UmfrageClass ui=new UmfrageClass(Integer.parseInt(cnr));
    String whatcase= request.getParameter("case");
    String franu = request.getParameter("frnr");
    String ftext=request.getParameter("fragentext");
    String typ=request.getParameter("Sorte");
    String atext= request.getParameter("changetext");
    String anur=request.getParameter("anr");
    String delwert=request.getParameter("del"); 
    boolean notyp=false;
    String insertpos=request.getParameter("pos");
	
%>
       
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Umfragetool Rabbit </title>
<link rel="stylesheet" href="modstyle4.css" type="text/css" media="screen">
<link href="date-picker.css" rel="Stylesheet" type="text/css" media="screen"> 
<script type="text/javascript" src="date-picker.js"></script>


<script type="text/javascript">

function confirmdelete2(typ)
{ 
if (typ != "FR"){
	return confirm("Möchten Sie diese Frage und alle zugehörigen Antworten wirklich löschen?");
	} 
else{
	return confirm("Möchten Sie diese Frage wirklich löschen?");
	}
}

function checkfull()
{
 return alert("Geben Sie den Fragetyp ein!");
}


</script>
</head>



<body onload="javascript:DatePicker.toggleDatePicker('von');javascript:DatePicker.toggleDatePicker('bis')"> 



<div class="body">
<div class="navi">
<form method="get" action="gen_umfrage.jsp"> 
<input type=submit value="&Uuml;bersicht"> 
</form>
</div>

<div class="white"> </div>


<% //+++ BEARBEITENSTART ++++++++++++++++++++++++	

if (whatcase.equals("bearbeiten")){
%>
<div class="main"> 
<div class="oberkasten">


	<h1>
Bearbeiten Sie hier die Umfrage <%=cnr %>: </h1>

<br>




<div class="ba">

<form method="get" action="change_umfrage.jsp"> 
Name der Umfrage:
<input class="long" type="text" name="changename" <%=ui.getName() %>>
<input type="hidden" value="bearbeiten" name="case">
<input type="hidden" value=<%=cnr%> name="changenr" >
<input type=submit value="Übernehmen">
</form>
</div>

<div class="ba">

<table><tr><td>
<form method="get" action="change_umfrage.jsp">
Pre-Text: <input type="text" value="<%=ui.getvorhertext()%>" name="vorhertext" >
<input type="hidden" value=<%=cnr %> name="changenr" >
<input type="hidden" value="setv" name="case">
<input type="submit" value="&Uuml;bernehmen">
</form></td><td>
<form method="get" action="change_umfrage.jsp">
<input type="hidden" value=<%=cnr %> name="changenr" >
<input type="hidden" value="<%=svorhertext%>" name="vorhertext" >
<input type="hidden" name="case" value="setv">
<input type="submit" value="Default-Text">
</form></td></tr></table>



<table><tr><td>
<form method="get" action="change_umfrage.jsp">
Post-Text: <input type="text" value="<%=ui.getnachhertext()%>" name="nachhertext" >
<input type="hidden" value=<%=cnr %> name="changenr" >
<input type="hidden" value="setn" name="case">
<input type="submit" value="&Uuml;bernehmen">
</form></td><td>
<form method="get" action="change_umfrage.jsp">
<input type="hidden" value=<%=cnr %> name="changenr" >
<input type="hidden"  value="<%=snachhertext%>" name="nachhertext" >
<input type="hidden" name="case" value="setn">
<input type="submit" value="Default-Text">
</form></td></tr></table>
 


<table><tr><td> 
<form method="get" action="change_umfrage.jsp">
Danke-Text: <input type="text" value="<%=ui.getdanketext()%>" name="danketext" >
<input type="hidden" value=<%=cnr %> name="changenr" >
<input type="hidden" value="setd" name="case">
<input type="submit" value="&Uuml;bernehmen">
</form></td><td>
<form method="get" action="change_umfrage.jsp">
<input type="hidden" value=<%=cnr %> name="changenr" >
<input type="hidden" value="<%=sdanketext%>" name="danketext" >
<input type="hidden" name="case" value="setd">
<input type="submit" value="Default-Text">
</form></td></tr></table>


</div>

<div class="ba">

<form method="get" action="change_umfrage.jsp">


Startdatum

<input type="text" name="von" id="von" class="input" maxlength="3"> 
<a href="javascript:DatePicker.toggleDatePicker('von')" id="_von_link">Datum wählen</a>&nbsp;
<div   id="_von_calendar" class="date_picker" style="display:none"></div>




Startzeit
<select name=vonh><%for (int i=0;i<24;i++){ %> <option> 
<% if (i<10){%>0<%=i %><%}else {%> <%=i %><%} %></option><%} %></select>
<select name=vonmin><%for (int i=0;i<60;i+=5){ %> <option><% if (i<10){%>0<%=i %><%}else {%> <%=i %><%} %></option><%} %></select>


Enddatum

<input type="text" name="bis" id="bis" class="input" maxlength="3"> 
<a href="javascript:DatePicker.toggleDatePicker('bis')" id="_bis_link">Datum wählen</a>&nbsp;
<div   id="_bis_calendar" class="date_picker" style="display:none"></div>




Stopzeit: <select name=bish><%for (int i=0;i<24;i++){ %> <option><% if (i<10){%>0<%=i %><%}else {%> <%=i %><%} %></option><%} %></select>
<select name=bismin><%for (int i=0;i<60;i+=5){ %> <option><% if (i<10){%>0<%=i %><%}else {%> <%=i %><%} %></option><%} %></select>


<input type="hidden" name="case" value="bearbeiten">
<input type="hidden" name="changenr" value=<%=cnr %>>
<input type="submit" name="Absenden">



</form> 
</div><!-- oberkasten -->



</div><!-- main -->
<br style="clear:both; line-height:0" />
</div><!-- body  -->



<%
}  //+++ END (BEARBEITEN) ++++++++++++++
%> 

</body>
</html>

[\code]

mit modstyle4.css wie folgt :

[code]

* {
	margin: 0px;
	padding: 0px;
	border: none;
	font-size: 1em;
	line-height: 1.4em;
	font-family: Arial, Helvetica, sans-serif;
	color: #000000;
	font-weight: normal;
}

b,
strong {
	font-weight: bold;
}
body,td,th {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000000;
}
body {
	background-color: #FFFFFF;
	margin-left: 20px;
	margin-top: 40px;
	margin-right: 20px;
	margin-bottom: 20px;
}
a {
	font-size: 12px;
	color: #000000;
	text-decoration: none;
}

h1 {
	font-size: 1.2em;
	color: #454777;
	font-weight: bold;
}
h2 {
	font-size: 1.2em;
	color: #454777;
}
h3 {
	font-size: 12px;
	font-weight: bold;
}

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

.body{
	width:930px;
	background-color:#F6F7FA;
	border:1px solid #BABFD3;
	margin:0 auto;
	padding:0;
	background-image: url(logo_hi_res.gif);
	background-repeat: no-repeat;	
}

.white{
	/*margin-left:162px;*/
	margin-top:-1px;
	background-color:#FFFFFF;
	border-left:1px solid #BABFD3;
	float: right;
	width:770px;
	height:40px;
	
}
.main{
	width:757px;
	background:#FFFFFF;
	background-image: url(headline_romp.gif);
	background-position:right top;
	background-repeat: no-repeat;
	border-left:1px solid #BABFD3;
	border-top:1px solid #BABFD3;
	position:relative;
	right:0px;
	/*margin-left:162px;*/
	padding-top:60px;
	padding-left:10px;
	padding-bottom:10px;
	top:0px;
	height:100%;
	float: right;
}

.oberkasten{
	width:728px;
	border:1px solid #BABFD3;
	background-color:#F6F7FA;
	padding:10px;
	
}

.ba{
	width:708px; 
	border:1px solid #BABFD3;
	background-color:#F6F7FA;
	padding:10px;
	margin-bottom:10px;
	text-align:left;		
}

.button{
	width:730px;
	text-align:right;
	padding:10px;
}

.navi{
	width:154px;
	float:left;
	margin-top:120px;
	padding:3px;
}	


.twhite{
	width:702px;
	padding:3px;
	background-color:#FFFFFF;
}


.tgray{
	width:702px;
	padding:3px;
	background-color:#F6F7FA;
}

8 lava

Auch dein Code funktioniert nicht!!! Du brauchst dir das JSP gar nicht anzuschauen, dein Gesamt-Testcode (meine Beispielangaben mit deinen Änderungen) ist doch wohl jetzt so, oder?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>[DOCTITLE]</title>
<style type="text/css">
<-- 
* {
margin: 0px;
padding: 0px;
border: none;
font-size: 1em;
line-height: 1.4em;
font-family: Arial, Helvetica, sans-serif;
color: #000000;
font-weight: normal;
}

b,
strong {
font-weight: bold;
}
body,td,th {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
}
body {
background-color: #FFFFFF;
margin-left: 20px;
margin-top: 40px;
margin-right: 20px;
margin-bottom: 20px;
}
a {
font-size: 12px;
color: #000000;
text-decoration: none;
}

h1 {
font-size: 1.2em;
color: #454777;
font-weight: bold;
}
h2 {
font-size: 1.2em;
color: #454777;
}
h3 {
font-size: 12px;
font-weight: bold;
}
.body{
width:930px;
background-color:#F6F7FA;
border:1px solid #BABFD3;
margin:0 auto;
padding:0;
background-image: url(logo_hi_res.gif);
background-repeat: no-repeat; 
}

.white{
float:right;
margin-top:-1px;
background-color:#FFFFFF;
border-left:1px solid #BABFD3;

width:770px;
height:40px;

}
.main{
width:757px;
background:#FFFFFF;
background-image: url(headline_romp.gif);
background-position:right top;
background-repeat: no-repeat;
border-left:1px solid #BABFD3;
border-top:1px solid #BABFD3;
position:relative;
right:0px;
float:right;
padding-top:60px;
padding-left:10px;
padding-bottom:10px;
top:0px;
height:100%;
}

.oberkasten{
width:728px;
border:1px solid #BABFD3;
background-color:#F6F7FA;
padding:10px;
}

.button{
width:731px;
text-align:right;
padding:10px;
}


.unterkasten{
width:708px;
border:1px solid #BABFD3;
background-color:#F6F7FA;
padding:10px;
margin-bottom:10px;
}

.twhite{
width:702px;
padding:3px;
background-color:#FFFFFF;
}


.tgray{
width:702px;
padding:3px;
background-color:#F6F7FA;
}

.navi{
width:154px;
float:left;
margin-top:120px;
padding:3px;
}

-->
</style>
</head>

<body>
<div class="body clearfix">  
<div class="navi clearfix">
[NAVI-ELEMENTE]
</div>
<div class="white clearfix"> </div>
<div class="main clearfix"> 

<h1>[HEADLINE]</h1>
<div class="oberkasten"> Oberkasten mit diversen Unterkästen 
<!-- UNTERKASTEN START -->
<div class="unterkasten">
[SUBLINE]<br />
<!-- TBLWHT START -->
<div class="twhite">[tblinhalt]</div>
<!-- TBLWHT END -->
<!-- TBLBLK START -->
<div class="tgray">[tblinhalt]</div>
<!-- TBLBLK END -->


</div> 
<!-- UNTERKASTEN END --> 

<div class="unterkasten"></div>

</div><!--OBERKASTEN END-->


</div><!-- MAIN END-->

<br style="clear:both; line-height:0" />

</div><!--BODY END-->
</body>
</html>

und das hab ich mir gerade mal angeguckt und da sind die [Navi-Elemente ] auch hochgerutscht, obwohl sie das nicht sollen!!!!

9 Jörg Kruse

Sorry, hatte vergessen zu erwähnen, dass ich die Breite von .navi gekürzt hatte - da hatte ich wohl rumgetestet, und vergessen die Änderung wieder rückgängig zu machen :) Jedenfalls funktioniert das float dann

.navi{
width:149px;
float:left;
margin-top:120px;
padding:3px;
}

Vielleicht ist es aber auch besser stattdessen .white auf die Breite von .main zu kürzen..?

nach oben

Beitrag schreiben (als Gast)

Verwandte Themen
Thema	Autor	Forum	Beiträge	Letzter Beitrag
CSS zur Positionierung - Mein Fehlschlag?	MarkusWi	HTML und CSS	7	14.10.2022 11:20
Es gibt vordefinierte Variablen, die als ['Array'] behandelt werden sollten	Lena567	PHP und MySQL	5	15.02.2022 10:39
div-Container nebeneinander positionieren	Tilman	HTML und CSS	16	08.12.2018 21:33
CSS Rahmen um eine Box mit Floating left	Markus.w	HTML und CSS	9	09.10.2018 21:24
Text um Bilder fliessen assen	PKV-Wiki	HTML und CSS	4	18.01.2018 14:06
Rating Widget verschieben	PKV-Wiki	HTML und CSS	6	21.09.2017 10:44
In box senkrechte Linie einfügen	krieger98	HTML und CSS	3	29.08.2017 18:11

Float im IE ?

Beitrag schreiben (als Gast)

Verwandte Themen