✔ Padding-top-Problem im Zusammenhang mit float

[DaFunk2k]

Einen schönen sonnigen guten Nachmittag zusammen

ich habe ein Problem mit padding-top.
Und zwar habe ich folgenden Code:

<div id="main-container">
  <div id="top"></div>
  <div id="container">
    <div id="left">
        Navigation
     </div>
    <div id="right">die Rechteseite halt</div>
    <div id="content">
      Inhaltsbereich
    </div>
    <div class="cleaner">&nbsp;</div>
  </div>
  <div id="footer">
    <div id="footer-left">left foot</div>
    <div id="footer-right">right foot</div>
    <div id="footer-mid">mid foot</div>
  </div>

</div>

Nun ist es für mein Design erforderlich die footer Elemente...also die drei divs mit padding etwas nach unten zu versetzen. Bei den beiden äusseren ist das auch gar kein Problem. Nur die mittlere (footer-mid) ignoriert er jede Padding-top Angabe.

Der IE hingegen wertet die Padding-Angabe aus

Weiß jemand woran das liegen könnte?

Vielen Dank schonmal
Andreas

 

[Gumbo]

Wie sieht denn das dazugehörige Stylesheet für die betreffenden Elemente aus?

 

[DaFunk2k]

so..bitte sehr...

#top {
	height: 144px;
	width: 1024px;
	margin: 0px;
	padding: 0px;
}
#container {
	width: 1024px;
	margin: 0px;
	padding: 0px;
}
#left {
	margin-left: 10px;
	width: 145px;
	float: left;
	padding-top: 10px;
}
#content {
	width: 600px;
	margin: 0px 0px 0px 220px;
	padding: 1px 0px 0px 0px;
}

#right {
	width: 150px;
	float: right;
}
#footer {
	height: 85px;
	width: 1024px;
	margin: 0px;
	padding: 0px;
	font-size: small;
}
.cleaner {
	clear: both;
}


#footer-left {
	text-align: left;
	width: 145px;
	float: left;
	margin-top: 45px;
	margin-left: 35px;
}
#footer-right {
	text-align: right;
	margin-top: 45px;
	margin-right: 35px;
	width: 150px;
	float: right;
}
#footer-mid {
	padding-top: 100px;
	text-align: center;
	width: 600px;
	margin: 0px 0px 0px 220px;
}

einige Dinge wie Hintergrundbilder und Schriftformatierung habe ich mal gelöscht, damit es nicht zu lang wird.

 

[Maik]

Nur die mittlere (footer-mid) ignoriert er jede Padding-top Angabe.

Der IE hingegen wertet die Padding-Angabe aus

Und von welchem Browser sprichst du?

Ich habe die Seite zunächst im Firefox 1.5 und IE 6.0 betrachtet:

1. Firefox-Screenshot
   
2. IE-Screenshot

CSS-Lösung für den IE, der die horizontalen Außenabstände bei floatenden Elementen verdoppelt:

#left {
margin-left: 10px;
width: 145px;
float: left;
padding-top: 10px;
background: #dfdfdf;
}
* html #left { /* Für IE */
margin-left: 5px;
}

#footer-left {
text-align: left;
width: 145px;
float: left;
margin-top: 45px;
margin-left: 35px;
}
* html #footer-left { /* Für IE */
margin-left: 17.5px;
}

#footer-right {
text-align: right;
margin-top: 45px;
margin-right: 35px;
width: 150px;
float: right;
}
* html #footer-right { /* Für IE */
margin-right: 17.5px;
}

Anmerkung: Firefox ignoriert die padding-top überhaupt nicht. Dies gilt für alle mir zur Verfügung stehenden Browser.

 

[DaFunk2k]

hm...bei dir scheint das zu klappen....dann werde ich das nochmal nachprüfen.

Vielen Dank, dass du dir die Mühe gamacht hast und es getestet hast.

 

[Maik]

Und von welchem Browser sprichst du?

Bleibt die Frage offen, mit welchem Nicht-IE-Browser du das vermeintliche Problem hast.