Antworten zum Thema „wo clearen?“

cebito · 07.02.2009

Komme mal wieder nicht weiter. Habe im main-Bereich div left und content nebeneinander, hab jetzt im content 'ne Tabelle, da jeweils Text mit 'nem Kommentar nebendran dargestellt werden soll. Doch schiebt mir IE6 die Tabelle nach unterhalb der links positionierten Navi. Normaler Fließtext außerhalb der Tabelle bzw. auch die Überschriften erscheinen jedoch neben der Navi. Kann mir eig. nur vorstellen, das es an clear liegt, hatte es jedoch schon überall probiert. FF und Opera stellen das ganze richtig dar, die Tabelle startet gleich im Anschluß an die Überschrift.

Screenshot IE6, diese grau markierte Lücke sollte eig. nicht sein:

und der code...

HTML:

<!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>Verein e.V.</title>

<link rel="stylesheet" type="text/css" href="css/styles.css"/>
</head>

<body>
<div id="header_wrapper">
    <div id="header"><a href="#"><img src="images/logo.jpg" alt="logo" border="0" /></a></div>
</div>

<div id="main">

    <div id="left">
        <ul>
          <li><a href="index.html">Startseite</a></li>
          <li><a href="#">Der Verein</a></li>    
          <li><a href="#">Sinn und Zweck</a></li>
          <li><a href="#">Ziele</a></li>
          <li><a href="#">Bildergalerien</a></li>
          <li><a href="#">Kontakt</a></li>
          <li><a href="#">Impressum</a></li>
          <li><a href="#">usw.</a></li>
        </ul>    
    </div>
    
    <div id="content">
    
    <h1>Lorem ipsum dolor sit amet</h1>
    <h2>consetetur sadipscing elitr</h2>
    <h3>sed diam nonumy eirmod tempor invidunt</h3>
    <table width="100%" border="0" cellspacing="0">
      <tr>
        <td class="tdleft" style="vertical-align:text-top">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.</td>
        <td class="tdright" style="vertical-align:text-top">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</td>
      </tr>
    </table>
    </div>
</div>
<div id="footer">    
    <a href="#">Startseite</a>|<a href="#">Der Verein</a>|<a href="#">Bildergalerien</a>|<a href="#">Kontakt</a>|<a href="#">Impressum</a>|<a href="#">Sitemap</a>
</div>
</body>
</html>

Code:

body {
margin: 0px;
padding: 0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
background-color: #FFFFFF;
background-image:url(../images/sitebg.jpg);
background-position:top center;
background-repeat: repeat-y;
}
h1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:18px;
color:#880000;
}
h2 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:14px;
color:#646638;
}
h3 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#990000;
border-bottom: 1px solid #990000;
}
#header_wrapper {
margin:auto;
padding:0px;
background-image:url(../images/headerbg.jpg);
background-position:top center;
background-repeat:no-repeat;
height: 200px;
width: 100%;
}
#header {
margin:auto;
padding:0px;
height: 200px;
width: 900px;
}
#main {
margin: auto;
width: 900px;
background-color: #84874B;
}
#left {
margin: 0px;
padding: 0px;
float: left;
clear:left;
height: auto;
width: 210px;
}
#left  ul  {
margin: 0;
padding: 0;
list-style-type: none;
}
#left ul li {
margin: 0;
padding-left: 0px;
padding-right: 0px;
border-bottom: 1px solid #FFFFFF;
}
#left ul li a {
display: block;
padding: 5px;
height: 16px;
width: 200px;
font-size: 12px;
text-decoration: none;
color: #FFFFFF;
}
#left ul li a:hover {
color: #3D3E21;
background-color: #BFC36C;
}
#content {
margin-left: 210px;
width: auto;
height: auto;
padding: 20px;
padding-top: 5px;
background-color: #FFFFFF;
border-right: 1px solid #84874B;
font-size: 12px;
color:#333333;
text-align: justify;
}
#footer {
clear:both;
margin:auto;
padding-top:6px;
background-color: #84874B;
background-image:url(../images/bottombg.jpg);
background-position:top;
background-repeat:no-repeat;
text-align:center;
color: #FFFFFF;
font-size: 11px;
height: 35px;
width: 900px;
}
#footer a {
padding: 5px;
height: 16px;
width: 200px;
font-size: 11px;
text-decoration: none;
color: #FFFFFF;
}
#footer a:hover {
color: #3D3E21;
}
.tdleft {
padding:10px 20px 5px 0;
border-right:1px dashed #3D3E21;
width:66%;
}
.tdright {
padding:10px 0 5px 20px;
width:33%;
color:#293612;
font-size: 11px;
}
.bildlinks {
float:left;
margin:10px;
margin-left:0;
border:1px solid #000000;
}
.bildrechts {
float:right;
margin:10px;
margin-right:0;
border:1px solid #000000;
}

sokie · 07.02.2009

AW: wo clearen?

Warum muss da denn nun unbedingt eine Tabelle rein?
ist dir schon aufgefallen, dass in der Zusammenstellung der IE6 noch eine weitere Reihe von Bugs zeigt (zB peek-a-boo im content)?
ich würde die linke spalte und den Content im main floaten, und im Content wiederum zwei divs links floaten, oder aber gleich alle drei Divs "links" "mitte" "rechts" links floaten.
in beiden Fällen (ohne layouttabelle) ist diese Lücke da nicht zu sehen.

cebito · 07.02.2009

AW: wo clearen?

@sokie - so hab ich auch schon gedacht, aber die Kommentare sollen halt immer oben bündig neben dem Text stehen.

sokie · 07.02.2009

AW: wo clearen?

das macht doch auch keine Tabelle notwendig.

cebito · 07.02.2009

AW: wo clearen?

Danke @sokie für die Hilfe, mußte erstmal nach peek-a-boo googlen. Um das zu bereinigen hab ich dann dem content 'ne feste Breite gegeben. Hab jetzt left einfach absolut positioniert, funzt auch.

Code:

#main {
position:relative;
margin: auto;
width: 900px;
background-color: #84874B;
}
#left {
position:absolute;
left:0;
padding: 0;
height: auto;
width: 210px;
}
#content {
margin-left: 210px;
width: 649px;
height: auto;
padding: 20px;
padding-top: 5px;
background-color: #FFFFFF;
border-right: 1px solid #84874B;
font-size: 12px;
color:#333333;
text-align: justify;
}

Werd dein Beispiel mal bei Gelegenheit ausprobieren.

Edit: so, das ganze mal hochgeladen und getestet. Außer Dillo, Kazehakase und Shiretoko wirds eigentlich überall gleich dargestellt. Beim IE5.5 ist zwar nicht mittig, aber da weiß ich wie ich ihm das beibring