✔ IE6 Clear:both div als tabellenersatz

daniel2001 · 29. Juli 2008

Hallo,
der IE6 fügt bei den u.g. Beispielseiten immer an der Stelle wo das clear:both zum ersten Mal angewendet wird einen Abstand ein. IE7 und Firefox zeigen alles wie gewünscht an. Wie kann ich das verhindern?

http://neu.feuerwehr-duelmen.de/dienstplan.html
Hier nach dem ersten Dienst der Gruppe Mitte

http://neu.feuerwehr-duelmen.de/fahrzeuge.html
Hier nach den ersten drei Bildern der Fahrzeuge

Maik · 29. Juli 2008

Hi,

kannst du mal den Quellcode posten, denn der Server ist ja noch langsamer wie eine Schnecke :suspekt:

mfg Maik

daniel2001 · 29. Juli 2008

Hier kommt der Quelltext:

HTML:

<body>


<div id="container">

<div id="head">
<div id="head_galerie">

</div>

	<div id="navigation">

	<div class="balken-nav">
	.::Navigation::.
	</div>

	<ul id="navi">
Navigation

	</ul>


	</div>




<div id="content">





<h1>Dienstplan für den Monat Juli 2008</h1>



<div id="dienst-monat-change">
<form name="monat" action="dienstplan.html">
<select name="month2" onchange='document.monat.submit()'>
<option>Monat ändern
<option value=01>Januar
<option value=02>Februar
<option value=03>März
<option value=04>April
<option value=05>Mai
<option value=06>Juni
<option value=07>Juli
<option value=08>August
<option value=09>September
<option value=10>Oktober
<option value=11>November
<option value=12>Dezember

</select>
</form>
</div>



<h2 style="padding:0px;">Dülmen-Mitte</h2>



<div style="color:red; font-weight:bold;">
<div style="width:78px; float:left;">Datum</div>
<div style="width:78px; float:left;">Uhrzeit</div>
<div style="width:342px; float:left;">Dienst</div>
<div style="width:179px; float:left;">Ausrichter</div>
<div style="width:93px; float:left;">Kleidung</div>
</div>


<div>
<div style="width:78px; float:left;">04.07.2008 </div>
<div style="width:78px; float:left;">19:00 Uhr</div>
<div style="width:342px; float:left;">Fahrradtour mit der Familie</div>
<div style="width:179px; float:left;">Ehrenabteilung</div>
<div style="width:93px; float:left; padding-bottom:5px;">Zivil</div>
</div>
<div style="border-top:solid black 1px; padding-bottom:5px; clear:both;"></div>
<div>
<div style="width:78px; float:left;">11.07.2008 </div>
<div style="width:78px; float:left;">19:00 Uhr</div>
<div style="width:342px; float:left;">Fahrradtour mit der Familie</div>
<div style="width:179px; float:left;">Vorstand</div>
<div style="width:93px; float:left; padding-bottom:5px;">Zivil</div>
</div>
<div style="border-top:solid black 1px; padding-bottom:5px; clear:both;"></div>
<div>
<div style="width:78px; float:left;">18.07.2008 </div>
<div style="width:78px; float:left;">14:00 Uhr</div>
<div style="width:342px; float:left;">Picknick mit der Familie   3 Tage </div>
<div style="width:179px; float:left;">Orga - Team</div>
<div style="width:93px; float:left; padding-bottom:5px;">Zivil</div>
</div>
<div style="border-top:solid black 1px; padding-bottom:5px; clear:both;"></div>
<div>
<div style="width:78px; float:left;">25.07.2008 </div>
<div style="width:78px; float:left;">19:00 Uhr</div>
<div style="width:342px; float:left;">Fahrradtour mit der Familie</div>
<div style="width:179px; float:left;">Ehrenabteilung</div>
<div style="width:93px; float:left; padding-bottom:5px;">Zivil</div>
</div>
<div style="border-top:solid black 1px; padding-bottom:5px; clear:both;"></div>






<h2 style="padding:0px;">Dülmen-Hiddingsel</h2>



<div style="color:red; font-weight:bold;">
<div style="width:78px; float:left;">Datum</div>
<div style="width:78px; float:left;">Uhrzeit</div>
<div style="width:342px; float:left;">Dienst</div>
<div style="width:179px; float:left;">Ausrichter</div>
<div style="width:93px; float:left;">Kleidung</div>
</div>


<div>
<div style="width:78px; float:left;">01.07.2008 </div>
<div style="width:78px; float:left;">14:00 Uhr</div>
<div style="width:342px; float:left;">Kindergartenbesuch</div>
<div style="width:179px; float:left;"></div>
<div style="width:93px; float:left; padding-bottom:5px;">Schutzanzug</div>
</div>
<div style="border-top:solid black 1px; padding-bottom:5px; clear:both;"></div>
<div>
<div style="width:78px; float:left;">08.07.2008 </div>
<div style="width:78px; float:left;">19:30 Uhr</div>
<div style="width:342px; float:left;">Familienfreizeit </div>
<div style="width:179px; float:left;">Hendrik Webering</div>
<div style="width:93px; float:left; padding-bottom:5px;">Zivil</div>
</div>
<div style="border-top:solid black 1px; padding-bottom:5px; clear:both;"></div>
<div>
<div style="width:78px; float:left;">22.07.2008 </div>
<div style="width:78px; float:left;">19:30 Uhr</div>
<div style="width:342px; float:left;">Feuerwehrfreizeit</div>
<div style="width:179px; float:left;">Sebastian Ruland</div>
<div style="width:93px; float:left; padding-bottom:5px;">Zivil</div>
</div>
<div style="border-top:solid black 1px; padding-bottom:5px; clear:both;"></div>
<div>
<div style="width:78px; float:left;">26.07.2008 </div>
<div style="width:78px; float:left;">14:30 Uhr</div>
<div style="width:342px; float:left;">Volkslauf</div>
<div style="width:179px; float:left;">Ralf Till</div>
<div style="width:93px; float:left; padding-bottom:5px;">Dienstanzug</div>
</div>
<div style="border-top:solid black 1px; padding-bottom:5px; clear:both;"></div>






</div>



<div id="footer">
Footer
</div>


</div> 

</body>

CSS:

Code:

	body
	{
		background-color: #FFFFFF;
		margin: 0;
		padding: 0;
		font-size:0.8em;
		font-family: verdana, geneva, helvetica, sans-serif;
	}

	#container
	{
		margin: 10px auto;
		width: 940px;
		background-color: white;
		border: 1px solid black;


	}

	#content
	{
		padding:5px;
		color:black;
		background-color: #fafafa;
		overflow: auto;
		min-height:475px;
                margin-left:0 !important; /* Moderne Browser */
                margin-left:140px; /* IE6 */

	}



	.balken
	{
		height:21px;
		line-height:21px;
		font-size:11px;
		font-weight : bold;
		text-transform : uppercase;
		text-align : left;
		letter-spacing : 1px;
		text-align:center;
		background: url(images/balken.jpg);
		color:white;
		clear:left;
	}
	
.balken-nav
	{
		height:21px;
		line-height:21px;
		font-size:11px;
		font-weight : bold;
		text-transform : uppercase;
		text-align : left;
		letter-spacing : 1px;
		text-align:center;
		background: url(images/balken.jpg);
		color:white;
		clear:left;
	}

* html .balken-nav {  /* nur fuer Internet Explorer */
  width:140px;     /* Version 5.x */
  w\idth:140px;    /* Version 6 */
}




	#contents
	{

		padding:5px;
		min-height:560px;
	  	height:auto !important;  /* für moderne Browser */
  		height:560px;  /*für den IE */
		float:left;
		width:420px;
	        background-color: white
	}

	#head
	{
		height: 85px;
         	background-color: #f3;

	}

	#footer
	{
		clear:both;
		height: 20px;
		background-color: black;
		border-top: 1px solid white;
		color:white;
	}


        .antifloat
        {
        clear:both;
        }


	#navigation
	{
		background-color: white;
		width:140px;
		padding:5px 0px 5px 5px;
		float:left;
                font-size:0.9em;
                color:black;

	}

* html #navigation {  /* nur fuer Internet Explorer */
  width:143px;  float:left;   /* Version 5.x */
  w\idth:143px; float:left;   /* Version 6 */
}


    ul#navi {
    width: 140px;
    margin: 0; padding: 0;
    background-color: #f1f1f1;
    vertical-align:top;

   }


  ul#navi li {
    list-style: none;
    float:left;
    width:100%;
 }


  ul#navi a {
    display:block;
    padding: 0.2em;
    text-decoration: none;
    border-bottom: 1px solid #C4C4C4;
    background-color: #F1F1F1;
    color:black;
    height:1%;
  }


  ul#navi a:hover {
    border-color: white;
    font-weight:bold;
    color: black; background-color: #E3E3E3;
  }

#head_galerie
{
text-align:center;
width:940px;
background: #E3E3E3;
}

#head_galerie img
{
margin-left: 3px;
margin-right: 3px;

}

    #container-aktuell
    {
    width:373px;
    background-color: #F1F1F1;
    border-bottom: 1px solid #C4C4C4;
    margin-bottom:3px;
    margin-right:3px;
    color:#000;
    font-size:0.89em;
    padding-bottom:2px;    }

    #container-ticker
    {
    height:100px;
    width:373px;
    background-color: #F1F1F1;
    border-bottom: 1px solid #C4C4C4;
    margin-bottom:3px;
    margin-right:3px;
    color:#000;
    font-size:0.89em;
    line-height:18px;
    }

    .container-info
    {
    width:200px;
    border-bottom: 1px solid #C4C4C4;
    margin-bottom:3px;
    margin-right:3px;
    background-color: #F1F1F1;
    color:#000;
    font-size:0.89em;
    padding-bottom:2px;
    }

    .main-trennlinie
    {
    border-bottom: 1px solid #C4C4C4;
    margin-bottom:5px;
    padding-bottom:2px;
    }

    h1
    {
    color:#CC0000;
    padding:0px 0px 0px 0px;
    margin:3px 0px 10px 0px;
    font-size:14px;
    font-weight:bold;
    line-height:20px;
    border-bottom:1px solid #CC0000;
    text-transform:uppercase;
    letter-spacing:normal;
    }


    h1.aktuell
    {
    color:#CC0000;
    padding:0px;
    margin:3px 0px 10px 0px;
    font-size:14px;
    font-weight:bold;
    line-height:20px;
    border-bottom:1px solid #CC0000;
    text-transform:uppercase;
    }

    h2
    {
    color:black;
    padding:0px 0px 0px 0px;
    margin:3px 0px 10px 0px;
    font-size:13px;
    font-weight:bold;
    line-height:20px;
    text-transform:uppercase;
    letter-spacing:0.1em;
    text-align:left;
    }

    h2.aktuell
    {
    color:#CC0000;
    padding:0px 0px 0px 0px;
    margin:3px 0px 10px 0px;
    font-size:13px;
    font-weight:bold;
    line-height:20px;
    text-transform:uppercase;
    letter-spacing:0.1em;
    }

    h3.fzg
    {
    color:black;
    padding:0px 0px 0px 0px;
    margin:3px 0px 10px 0px;
    font-size:11.5px;
    font-weight:bold;
    line-height:20px;
    text-transform:uppercase;
    letter-spacing:0.1em;
    text-decoration:underline;
    }



h3.responder
{
    color:black;
    font-size: 13pt;
    margin-bottom:0px;
    margin-top:0px;
}




#content-links	/* Hauptseite links */
{
float:left;
}

#content-mitte	/* Hauptseite mitte */
{
  float:left;
}

#content-rechts	/* Hauptseite rechts */
{
float:left;
}

.main-red
{
 color: #CC0000;
 font-weight:bold;
}

.copy
{
font-size:0.9em; text-decoration:underline;
}


img {
border:0px;
}

img.personal
{
height:100px;
border:0px;
float:left; padding-right:5px;
}


#content-akt-foto img
  {
  width:129px;
  float:left;
  margin-right:5px;

  }

.akt-foto
{
float:left;
}
.akt-foto img
  {
  width:229px;
  margin-right:5px;
  }

.akt-bildzeile
{
width:229px;
display:block;
font-style:italic;
color:black;
font-size:0.9em;
}


.akt-autor
{
display:block;
font-style:italic;
font-size:0.9em;
}

.fett
{
font-weight:900;
}

.personal-name
{
 display:block;
 font-weight:900;
  }

.personal-funktion
{
 display:block;
 color: #CC0000;
 font-weight:bold;
}

.personal-kasten     /* Div bild + personal-funktion+personal-name */
{
float:left; padding-right:10px; padding-bottom:10px;
width:245px;
}


.fzgkasten
{
float:left;
width:245px;
padding-right:10px; padding-bottom:10px;
}


.fzg-links
{
float:left;
margin-right:10px;
font-weight:bold;
width:78px;
font-size:0.8em;
}

.fzg-rechts
{
float:left;
font-size:0.8em;
width:130px;
text-align: justify;

}

.fzg-foto img
{
border:1px solid black;
width:220px;
}

.fzg-antifloat
{
clear:both;
border-bottom: 1px solid #C4C4C4;

}

.einsatz-tabueber
{
text-align:left;
color:white;
height:15px;
}

.link-rubrik
{
color:#cc0000;
font-size:1.2em;
font-weight:900;

}


.download td { padding-right:15px; }

.download-datei { font-weight: bolder; }

.input-download { font-weight: bolder; font-size: 0.9em; background-color:#587BFF; color:#FFFFFF; }




#content-akt-text
{
line-height:130%;
}

.standard
{
	font-family: verdana, geneva, helvetica, sans-serif;
        color: black;

}



a.standard:link {color:black; font-weight:bolder; text-decoration:none}
a.standard:visited {color:black; font-weight:bolder; text-decoration:none}
a.standard:active {color:black; font-weight:bolder; text-decoration:none}
a.standard:hover {color:black; font-weight:bolder; text-decoration:underline}

a.kleiner:link {color:black; font-size:0.9em; font-weight:bolder; text-decoration:none}
a.kleiner:visited {color:black; font-size:0.9em; font-weight:bolder; text-decoration:none}
a.kleiner:active {color:black; font-size:0.9em; font-weight:bolder; text-decoration:none}
a.kleiner:hover {color:black; font-size:0.9em; font-weight:bolder; text-decoration:underline}


a.standard-rot:link {color:#CC0000; font-weight:bolder; text-decoration:none}
a.standard-rot:visited {color:#CC0000; font-weight:bolder; text-decoration:none}
a.standard-rot:active {color:#CC0000; font-weight:bolder; text-decoration:none}
a.standard-rot:hover {color:#CC0000; font-weight:bolder; text-decoration:underline}


a.einsatz-link:link {color:white; font-weight:bolder; text-decoration:none}
a.einsatz-link:visited {color:black; font-weight:bolder; text-decoration:none}
a.einsatz-link:active {color:yellow; font-weight:bolder; text-decoration:none}
a.einsatz-link:hover {color:black; font-weight:bolder; text-decoration:underline}



a.mager:link {color:black; text-decoration:none}
a.mager:visited {color:black; text-decoration:none}
a.mager:active {color:black; text-decoration:none}
a.mager:hover {color:black; text-decoration:underline}

Habe den Quelltext der zweiten HTML Datei erst mal weggelassen, ich vermute mal, das Problem ist das selbe!

Maik · 29. Juli 2008

Erweiter mal die Regel folgendermaßen, damit das Element keinen Platz im Textfluss beansprucht:

Code:

.antifloat {
clear:both;
margin:0;
padding:0;
font-size:0;
line-height:0;
height:0;
        }

mfg Maik

daniel2001 · 29. Juli 2008

Habe ich gemacht,
ergibt aber keine Änderung. Komisch ist ja auch, dass es nur beim ersten clear:both passiert und nicht später bei den anderen auch noch mal.

Maik · 29. Juli 2008

Von welcher Stelle sprichst du konkret? Ich kann da im IE keinen zu großen Abstand entdecken, dafür stimmt da aber in den modernen Browsern etwas nicht mit der umschliessenden Box #container.

Was genau, kannst du in meinem Webmaster-FAQ-Artikel CSS Warum passt sich die Boxenhöhe nicht dem Inhalt an? nachlesen.

mfg Maik

daniel2001 · 29. Juli 2008

Habe mal einen Screenshot gemacht und beigefügt. Darstellung: IE 6

Fehler tritt auf unter der Zeile Fahrradtour mit der Familie (4.7.)

Maik · 29. Juli 2008

Setz das "Clearen" mal folgendermaßen um - hier exemplarisch für den Terminblock "Dülmen-Mitte":

Code:

<div class="clearfix">
<div style="width:78px; float:left;">04.07.2008 </div>
<div style="width:78px; float:left;">19:00 Uhr</div>
<div style="width:342px; float:left;">Fahrradtour mit der Familie</div>
<div style="width:179px; float:left;">Ehrenabteilung</div>
<div style="width:93px; float:left; padding-bottom:5px;">Zivil</div>
</div>
<div style="border-top:solid black 1px; padding-bottom:5px; margin:0; font-size:0; line-height:0; height:0;"></div>
<div class="clearfix">
<div style="width:78px; float:left;">11.07.2008 </div>
<div style="width:78px; float:left;">19:00 Uhr</div>
<div style="width:342px; float:left;">Fahrradtour mit der Familie</div>
<div style="width:179px; float:left;">Vorstand</div>
<div style="width:93px; float:left; padding-bottom:5px;">Zivil</div>
</div>
<div style="border-top:solid black 1px; padding-bottom:5px; margin:0; font-size:0; line-height:0; height:0;"></div>
<div class="clearfix">
<div style="width:78px; float:left;">18.07.2008 </div>
<div style="width:78px; float:left;">14:00 Uhr</div>
<div style="width:342px; float:left;">Picknick mit der Familie   3 Tage </div>
<div style="width:179px; float:left;">Orga - Team</div>
<div style="width:93px; float:left; padding-bottom:5px;">Zivil</div>
</div>
<div style="border-top:solid black 1px; padding-bottom:5px; margin:0; font-size:0; line-height:0; height:0;"></div>
<div class="clearfix">
<div style="width:78px; float:left;">25.07.2008 </div>
<div style="width:78px; float:left;">19:00 Uhr</div>
<div style="width:342px; float:left;">Fahrradtour mit der Familie</div>
<div style="width:179px; float:left;">Ehrenabteilung</div>
<div style="width:93px; float:left; padding-bottom:5px;">Zivil</div>
</div>
<div style="border-top:solid black 1px; padding-bottom:5px;  margin:0; font-size:0; line-height:0; height:0;"></div>

Code:

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

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

mfg Maik

daniel2001 · 29. Juli 2008

Mal wieder SUUUPER! Danke, das wars

Thema gelöst

✔ IE6 Clear:both div als tabellenersatz

daniel2001

Mitglied

Maik

daniel2001

Mitglied

Maik

daniel2001

Mitglied

Maik

daniel2001

Mitglied

Anhänge

Maik

daniel2001

Mitglied

Neue Beiträge