Float Problem im IE?

Status
Nicht offen für weitere Antworten.
S

scrotum

Erfahrenes Mitglied
Hallo zusammen

Ich habe sehr wahrscheinlich ein Float Problem, aber kann es nicht selber lösen. Im Firefox sieht alles so aus, wie es sein sollte:

Hier ein Screenshot vom FIREFOX:
Screenshot Firefox

Aber im IE sieht es so aus:
Screenshot Internet Explorer

Im IE hat es zwei Fehler:
1. Die Tabelle in der id sidebar ist runter gerutscht und
2. Der äussere gepünktele Rahmen um die id wrap geht nicht um den grandiosen Titel herum.

Und hier der Link zur Seite: Problemseite

Wer kann mir helfen?

Hier die Quellcodes:

HTML:
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" />
<link rel="stylesheet" type="text/css" href="style_facharbeit.css" /> 
<title>Facharbeit CSS</title>
</head>
<body>

<div id="wrap">

	<div id="header">
		<h1>Der grandiose Titel</h1>
		<ul id="nav">
			<li><a href="#">Neuigkeiten</a></li>
			<li><a href="#">&Uuml;ber uns</a></li>
			<li><a href="#">Produkte</a></li>
			<li><a href="#">Kontaktstellen</a></li>
		</ul>
	</div>

	<div id="content">
		<div>
			<div id="pics">
				<div>
					<h2>Pl&uuml;sch-B&auml;r</h2>
					<p class="pic"><img src="grafix/pic1.jpg" width="200" height="125" alt="Plueschtbaer" /></p>
					<p>In der ganzen Schweiz gibt es 31 Wasserfahrvereine die in zwei Verbänden untergebracht sind. Es sind dies der Verband Schweizerischer Wasserfahrvereine / VSWV (18 Vereine) und der Satus Wasserfahrer Verband der Schweiz / SWFS (13 Vereine). Der SWVS wurde im Jahre 1919 und der VSWV im Jahre 1921 gegründet. Im Jahre 1893 wurde der Schweizerische Pontonierfahrverband (SPFV ) als erster Verband gegründet. Dieser hat mit dem eigentlichen Wasserfahren nur entfernt etwas zu tun, weil sie andere Fahrzeuge (u.a. Übersetzboote und Weidlinge ) und Reglemente für ihre Wettkämpfe benützen.

Insgesamt üben ca. 14000 Mitglieder in allen drei Verbänden diese Sportart aus.

Es gibt auch Unterverbände in welchen sich die Vereine der Agglomerationen zusammen geschlossen haben.
</p>
				</div>
				<div>
					<h2>Grashalme</h2>
					<p class="pic"><img src="grafix/pic2.jpg" width="200" height="125" alt="Gras" /></p>
					<p>Alle Vereine bilden zukünftige Wehrmänner (Pontoniere) aus. Die angehenden Wehrmänner müssen dafür in ihrer Jugendzeit Prüfungen ablegen, welche durch das Militär geprüft werden. Meistens sind es Wasserfahrer, welche im Militär einen höheren Unteroffiziersrang oder einen Offiziersrang bekleiden. Nebst dem fahrerischen Können müssen sie auch eine Schwimm- und Knotentechnikprüfung ablegen. Als Anerkennung erhalten sie bei bestandener Prüfung ein Abzeichen, welches meistens an den Trainerärmeln, angebracht wird.

Weibliche Wasserfahrer gibt es nicht so viele. In vielen Vereinen wehrt man sich auch gegen die Aufnahme von Frauen als Aktivmitglieder. Dabei werden die verschiedensten Gründe angebracht. Körperliche, vor allem kräftemässige Unterlegenheit, ist einer der Hauptgründe.</p>
				</div>
				<div>
					<h2>Eis</h2>
					<p class="pic"><img src="grafix/pic3.jpg" width="200" height="125" alt="Eis" /></p>
					<p>Alle Vereine bilden zukünftige Wehrmänner (Pontoniere) aus. Die angehenden Wehrmänner müssen dafür in ihrer Jugendzeit Prüfungen ablegen, welche durch das Militär geprüft werden. und Knotentechnikprüfung ablegen. Als Anerkennung erhalten sie bei bestandener Prüfung ein Abzeichen, welches meistens an den Trainerärmeln, angebracht wird.</p>
				</div>
			</div>
			
		</div>
	</div>
	
	<div id="sidebar">
		<div>
			<table cellspacing="0">
				<caption>Statistik</caption>
				<tr>
					<th scope="col">Datum</th>
					<th scope="col">Dauer</th>
					<th scope="col">Herkunft</th>
				</tr>
				<tr class="alt">
					<td>15.05.2006</td>
					<td>36 Minuten</td>
					<td>Spanien</td>
				</tr>
				<tr>
					<td>07.05.2006</td>
					<td>34 Minuten</td>
					<td>Deutschland</td>
				</tr>
				<tr class="alt">
					<td>05.05.2006</td>
					<td>18 Minuten</td>
					<td>Deutschland</td>
				</tr>
				<tr>
					<td>01.05.2006</td>
					<td>2 Stunden</td>
					<td>Schweiz</td>
				</tr>
				<tr class="alt">
					<td>30.04.2006</td>
					<td>3 Minuten</td>
					<td>Grossbritaninen</td>
				</tr>
				<tr>
					<td>15.04.2006</td>
					<td>1,5 Stunden</td>
					<td>Schweiz</td>
				</tr>
				<tr class="alt">
					<td>13.04.2006</td>
					<td>34 Minuten</td>
					<td>Frankreich</td>
				</tr>
			</table>			
		</div>	
	</div>
	
	<div id="footer">
		Copyright by Lukas Hausammann, all rights reserved<br />
		<a href="mailto:lukas.hausammann@gmx.ch">lukas.hausammann@gmx.ch</a>
	</div>
</div>
</body>
</html>


und der CSS-Code:
HTML: 
body {
font-family: Arial, Helvetica, sans-serif;
font-size: small;
}

#header {
width: 100%;
background: white;
float: left;
border-bottom: 1px solid #19566e;
}

#header h1 {
float: right;
color: pink;
margin: 0;
padding: 0px;
padding-top: 5px;
padding-right: 10px;
}

#content {
width: 65%;
margin-right: 5%;
float: left;
}

#content div {
padding: 20px;
padding-right: 30px;
}

#sidebar {
float: left;
width: 30%;
float: right;
}

#sidebar div {
padding: 12px;
}

#footer {
background: pink;
color: #19566e;
font-size: 70%;
padding: 10px;
clear: both;
}

#footer a {
color: #19566e;
text-decoration: none;
}

#footer a:hover {
text-decoration: underline;
}

#wrap {
max-width: 1800px;
min-width: 680px;
background: url(grafix/sidebar_back.gif) repeat-y 70% 0;
border: 1px dashed #103847;
}

#nav {
width: 90%;
float: left;
margin: 0;
padding: 10px 0 0 50px;
list-style: none;
}

#nav li {
float: left;
margin: 0;
padding: 0;
font-size: 100%;
}

#nav a {
float: left;
display: block;
margin: 0 1px 0 0;
padding: 4px 8px;
text-decoration: none;
color: #103847;
background: url(grafix/tab.gif) repeat-x top left;
border: 1px solid #19566e;
border-bottom: none;
}

#nav a:hover {
background: url(grafix/tab_active.gif) repeat-x top left;
}


#pics {
float: left;
width: 100%;
padding: 10px 0;
margin-bottom: 20px;
border: 2px solid #6aa7bd;
}

#pics div {
float: left;
margin: 10px 20px;
padding: 0;
display: inline; /* fixt Bug im IE/win Randverdoppelung */
}

#pics h2 {
float: right;
margin: 0;
margin-left: 20px;
margin-bottom: 10px;
font-size: 130%;
letter-spacing: 1px;
color: #6aa7bd;
}

#pics p {
margin: 0;
padding: 0;
font-size: 95%;
line-height: 1.5em;
color: #62a6bf;
}

#pics p.pic img {
float: left;
margin: 0 8px 0 0;
padding: 5px;
border: 1px solid #6aa7bd;
}

table {
width: 100%;
border: 1px solid #6aa7bd;
border-bottom: none;
font-size: 75%;
color: #19566e;
}

table th, table td {
margin: 0;
padding: 8px 2px;
text-align: center;
border-bottom: 1px solid #6aa7bd;
}

table tr {
background: #91e2ff;
}

table tr.alt {
background: #89D6F2;
}

table th {
color: #103847;
}

table caption {
margin: 0;
padding: 5px 15px;
text-align: left;
border: 1px solid #6aa7bd;
border-bottom: none;
background: #F2FCFC;
font-size: 130%;
}

Danke für eure Hilfe schon im voraus.
Gruss
 
Zuletzt bearbeitet:
Bitte unterlasse zukünftig das Pushen eines Threads, blos weil du noch keine Antwort auf deine Frage erhalten hast, und übe dich bis dahin in Geduld.

*back to topic*

Probier es mal mit diesen korrigierten und erweiterteten Selektoren:

Code: 
#header {
width: 100%;
background: white;
/*float: left;*/ /* auskommentiert = deaktiviert */
border-bottom: 1px solid #19566e;
}

#content {
width: 65%;
margin-right: 5% !important;
margin-right: 2.5%; /* Für IE */
float: left;
}

#sidebar {
float: left;
width: 30% !important;
width: 27.5%; /* Für IE */
/*float: right;*/ /* auskommentiert = deaktiviert */
}

#footer {
background: pink;
color: #19566e;
font-size: 70%;
padding: 10px;
clear:left;
}

div.clear {
clear: left;
}
Und füge das DIV .clear im Header nach der Listennavigation ein:

HTML: 
<div id="header">
                <h1>Der grandiose Titel</h1>
                <ul id="nav">
                        <li><a href="#">Neuigkeiten</a></li>
                        <li><a href="#">Über uns</a></li>
                        <li><a href="#">Produkte</a></li>
                        <li><a href="#">Kontaktstellen</a></li>
                </ul>
                <div class="clear"></div>
        </div>
 
Sorry für das Pushen, war ziemlich verzweifelt.

Danke für deine Antwort. Punkt 2 wurde somit gelöst, aber leider nicht Punkt 1! Jetzt ist die sidebar( statistik) immernoch unterhalb von contentim IE, einfach auf der linken Seite. Mit float: right, ist sie auf der rechten Seiten, aber immernoch unterhalb. Was kann man noch tun?
 
welche Version vom IE hast du? Ich test mit Version 6.0. Vielleicht hat es damit etwas zu tun?

Kannst du mir das mit dem !important erklären? ignoriert das der IE? Oder wie geht das?
 
Ich teste hier unter Win2000 und u.a. mit dem IE6.0.

Die !important-Regel bewirkt, daß alle nicht-IE-Browser die CSS-Eigenschaft ausführen und die nachfolgend wiederholte CSS-Eigenschaft nur vom IE ausgeführt wird.

Auf diese Weise lassen sich Korrekturen für den IE vornehmen.
 
was sagst du zu dieser Methode um Korrekturen, die nur für den IE bestimmt sind, vorzunehmen?

*html "betreffendes div" {}

schlechter oder gleich gut?
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück