Float problem im IE

Fruitgum · 1. November 2008

Hi,

Floating versteh ich nicht!

In meinem folgendem Problem, kann ich den Text in der unteren Box auf der linken Seite nicht in Form bringen. Bis jetzt zeigen alle Browser die Seite richtig an, nur IE6 bringt mich am dem Rand des Wahnsins. Denn der IE6 legt den Text nach Rechts. Alle anderen Broeser machen das Richtig und setzen den Text nach Links. Will ich nun den Text jetzt extra noch nach Links ausrichten, geht das gar nicht mit Text-Aglin:center; und wenn ich Float:left; bringt der IE666 den Text zwar richtig, aber im Moziall oder Opera Kracht die Box zusammen.

Index.php

PHP:

<!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>deineFirma.de</title>
<link href="direkt.css" rel="stylesheet" type="text/css">
<script src="functions.js" type="text/javascript"></script>
</head>
<body  id="intro">

<div id="seite"> <!-- Anfang -->
<div id="header">


</div>
<ul id="nav">
<li id="t-intro"><a href="#"><span>Startseite</span></a></li>
<li id="t-onlinem"><a href="#"><span>Online-Marketing</span></a></li>
<li id="t-veranstaltung"><a href="#"><span>Veranstaltung</span></a></li>
<li id="t-profil"><a href="#l"><span>Profil</span></a></li>
<li id="t-kontakt"><a href="#"><span>Kontakt</span></a></li>
</ul>

<div id="content">
	
<div>
	<dl>  
        <dt><b>Headline oder Überschrift</b></dt>  
        <dd class=\"img\"><br><br><br><img src="image/bild.jpg" alt="Bild" width="180" height="180" ></dd>  
        <dd>Lorem ipsum dolor sit amet, consectetuer sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

    Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

    Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</dd>  
        <br><br><br></dl>
		
	
	
	</div>
<div>
<dl class=\"alt\">  
        <dt><b>Headline oder Überschrift</b></dt>  
          
       <dd>Lorem ipsum dolor sit amet, consectetuer sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</dd>  
        <br><br><br></dl>
			
    
	</div>
	
</div>


<div id="seitenleiste">
	<div>
<dl><h3>Headline Klein</h3>  
          
       <p>Lorem ipsum dolor sit amet, consectetuer sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>  
        <br><br><br></dl>
	<p>Termine:</p>
	<ul>
	<li></li>
	<li><a href="#">23.12.2008</a></li>
	<li><a href="#">23.12.2008</a></li>
</ul>
<br>
<h4><a href="#">Anmelden</a></h4>
	

   	</div>
	<div>
<h3>firma-irgendwas.blog</h3>
<br>
<p>Letzter Blog-Artikel:</p>
<ul>
	<h3>Headline Klein</h3>  
          
       <p>Lorem ipsum dolor sit amet, consectetuer sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>  
        <br><br><br></dl>
</ul>
<br>
<br>
<h4><a href="#">Zum Blog</a></h4>

</div>

</div>

<div id="footer">
	<p>&copy; <strong>deineFirma.DE - CODE BY <a href="#">UNIQ-ARTS</a> - 2008</strong></p>
	<p align="right"><a href="#" title="Impressum"><strong> Impressum</strong></a> . 
	<a href="#" title="Sitemap"><strong>Sitemap</strong></a> . <a href="#" title="Blog"><strong>Blog</strong></a></p>
	
  </div>
</div>
</body>
</html>

die direkt.css

PHP:

body {
text-align:center;
background:#fff;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#333;


}

body{
 text-align:center
}

#seite{
margin:0 auto;
text-align:left;
width:800px;

background:#ececec;
border:1px solid #ccc;
max-width:800px;
min-width:800px;

}

#header {
text-align:left;
margin:0px 0px 0px 0px ;
width:100%;
height:120px;
padding:0px;
background:#fff url(img/head_l.png) no-repeat;


}

#nav {

height:25px;
margin:0px;
padding:0px 0px 0px 20px;
list-style:none;
background:#ffffff url(img/bg_menu.png) bottom;

}



#nav li {
float:left;
margin:0;
padding:0px 4px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
border:#666666;
border-bottom:none;
outline:none;


}

#nav a {
float:left;
display:block;
text-decoration:none;
margin:0 1px 0 0;
padding:4px 4px;
color:#333;
outline:none;


}

#nav a:hover, body#intro #t-intro a {
color:#ff6600;
background:url(img/bg_reiter.png) repeat-x;
outline:none;

}
#nav a:hover, body#onlinem #t-onlinem a {
color:#ff6600;
background:url(img/bg_reiter.png) repeat-x;
outline:none;

}
#nav a:hover, body#veranstaltung #t-veranstaltung a {
color:#ff6600;
background:url(img/bg_reiter.png) repeat-x;
outline:none;

}
#nav a:hover, body#profil #t-profil a {
color:#ff6600;
background:url(img/bg_reiter.png) repeat-x;
outline:none;

}
#nav a:hover, body#kontakt #t-kontakt a {
color:#ff6600;
background:url(img/bg_reiter.png) repeat-x;
outline:none;

}








#content {
float:left;
margin:0%;
width: 70%;
background:#ececec url(img/bg_content.png)  repeat-x;
}

#content div {
padding:10px;
background:#fff;
margin:1% 1% 1% 1%;
background:url(img/rechts_s2.png) #fff no-repeat;
}


#content div .alt dt {
float: left;

}

#content div .alt dl {
width:500px;
margin:10px 20px;
padding:0;

}
#content div .alt dd {
margin:0 0 0 10px;
padding:60px 0 0 0;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
line-height: 1.5em;
color:#666;
}


#content div dl {
width:500px;
margin:10px 20px;
padding:0;

}

#content div dt {
float:left;
margin:0;
padding:0;
width:390px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:16px;
letter-spacing: 1px;
color:#ff6600;

}

#content div dd {
margin:0 0 0 0px;
padding:0;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
line-height: 1.5em;
color:#666;

}
 #content div dd.img img {
float:left;
margin:0 8px 0 0;
padding:4px;
border:1px solid #d9e0e6;
border-bottom-color: #c8cdd2;
border-right-color: #c8cdd2;

}

#content div .alt dd.img img {
float: right;
margin: 0 0 0 8px;

}
#content div .alt dd {
margin: 0 0px 0 0;

}


#content div dl dd.img {
margin: 0;

}

#content h2 {
margin: 0 0 1em 0;
padding: 0;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:16px;
font-weight:normal;
color:#ff6600;
}


/*sitemap*/


















#seitenleiste {
float:right;
width:30%;
background:#ececec;
text-decoration:none;


}

#seitenleiste div  {
margin:2.4% 2.4% 2.4% 0% !important;
margin:1.2% 2.4% 1.2% 0%; /* Für IE6 */
padding:20px;
background:#fff;
text-decoration:none;
border:0px dotted #ccc;
background:url(img/links_s2.png) #fff no-repeat top right;
}

#seitenleiste a {
text-decoration:none;
color:#333;
font-style:inherit;
}

#seitenleiste h3 {
margin:0;

font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:14px;
font-weight:normal;
color:#ff6600;
border-bottom:0px dotted #ccc;
background:#fff ;

}

#seitenleiste h3 a:hover {
background:#FFf url(img/box_o_hover.png);

}

#seitenleiste p, .box ul {
margin:0;
padding:12px;
color:#666;
list-style:none;

}

#seitenleiste ul li {
margin:4px;
padding:0 0 0 18px;
list-style:none;
text-decoration:none;
font-size:12px;
background:url(img/bullet_arrow_right.png) no-repeat;

}

#seitenleiste dd {
font-size:10px;
margin:0;
padding:8px;



}

#seitenleiste h4 a:hover {
text-align:center;
text-decoration:none;
color:#FFFFFF;
margin:0;
padding:0px;
border:none;
outline:none;
background:transparent url(img/button_r.png) no-repeat center;
display:block;

}

#seitenleiste h4 a {
border:none;
color:#FFFFFF;
background:transparent;
outline:none;


}

#seitenleiste h4 {
text-align:center;
color:#FFFFFF;
margin:0;
padding:8px;
border:none;
background:transparent url(img/button_l.png) no-repeat center;
text-align:center;


}

#seitenleiste dd a{
font-size:10px;
margin:0;
padding:8px;
color:#ff6600;


}

#seitenleiste dd a:hover{
font-size:10px;
margin:0;
padding:8px;
background:transparent;
color:#ff6600;


}

#seitenleiste a:hover {
color:#ff6600;
background:#FFf ;
text-decoration:underline;
}

/*footer*/

#footer {
margin:0px 0px 0px 0px;
clear:both;
height:33px;
background:#fff url(img/bg_footer.png) top repeat-x;


}

#footer p {
margin:0;
text-decoration:none;
padding:10px 0px 10px 25px;
font-size:9px;
color:#333;
}

#footer a {
text-decoration:none;
font-size:9px;
color:#333;
}

#footer a:hover {
text-decoration:underline;
font-size:9px;
color:#fff;
}

Vielleicht kann mich einer das mal mit den Floating richtig erklären. Und wann ich clearing mache und wann nicht.

Grüße

Maik · 1. November 2008

Hi,

das wird dir jetzt wohl den Rest für heute Abend geben, und deine kleine CSS-Welt gehörig ins Wanken bringen, aber ich stell hier ganz wagemutig die Behauptung auf, dass der IE6 den Footer-Bereich der Logik folgend soweit richtig darstellt, und in ihm überhaupt kein Floating-Problem vorliegt.

Wie ich zu dieser These komme?

Ganz einfach, die Elternbox #seite besitzt einen umlaufenden Rahmen und schliesst deinem Markup zufolge den Footer mit ein.

Somit kann rein optisch in den übrigen Browsern etwas in der unteren Box nicht stimmen, wenn der zweite Textabsatz des Footers außer- bzw. unterhalb von #seite dargestellt, und nicht von dessen Rahmen umschlossen wird.

Der Grund hierfür ist die height:33px-Deklaration für #footer, die von den standardkonformen Browsern als fixe Höhe behandelt wird, gepaart mit dem oberen und unteren Innenabstand von jeweils 10px für die darin enthaltenden p-Elemente, was bei zwei Elementen eine Polsterung von 40px in der Summe ergibt, womit der zweite Textabsatz den Footer und das umschliessende DIV #seite an ihrem unteren Rand "überlappt"- der IE6 hingegen betrachtet Höhenangaben üblicherweise und grundsätzlich immer als "Mindesthöhe", und streckt dem Inhalt zufolge den Footer in seiner Höhe auf 64px, der, wie eingangs erwähnt, von seinem Elternelement #seite umschlossen, oder im wahrsten Sinne des Wortes perfekt eingerahmt wird.

Meine Aufstellung der vorherrschenden diskrepanten Boxendimensionen verdeutlicht eigentlich, dass hier vielmehr von deiner Seite ein Logik- / Rechenproblem vorliegt.

Wo bzw. wie soll denn überhaupt im Footer-Bereich ein Float-Problem existieren, wenn #footer mit clear:both die Floatumgebung der beiden vorangegangenen Spalten aufhebt, und so im Dokument wieder den normalen Textfluß herstellt?

Den HTML-Quellcode solltest du auch noch validieren, denn die drittletzte und letzte Listenauszeichnung entsprechen in dieser Form nicht den Regeln, da das h3-Element kein unmittelbares Nachfolgeelement des ul und dl-Elements darstellt.

mfg Maik

Float problem im IE

Fruitgum

Erfahrenes Mitglied

Maik

Neue Beiträge