Zur Navigation

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???

21.08.2007 11:31

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%;
}

21.08.2007 12:26

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>

21.08.2007 19:24

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

21.08.2007 20:30

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!

22.08.2007 08:46 | geändert: 22.08.2007 09:30

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-->

22.08.2007 09:28 | geändert: 22.08.2007 09:29

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;
}

22.08.2007 09:46 | geändert: 22.08.2007 09:54

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!!!!

22.08.2007 09:53

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..?

22.08.2007 10:05 | geändert: 22.08.2007 10:07

Beitrag schreiben (als Gast)

Die Antwort wird nach der Überprüfung durch einen Moderator freigeschaltet.





[BBCode-Hilfe]