internetexplorer margin padding

[RainHawk]

Hallo,
ich erstelle mir zur Zeit ein Layout.
Ich habe eine <div> mit einem Hintergrundbild und dadrin mehrere <divs> mit Menüpunkten als <img> plus ein bisschen Text drunter, der Code kommt gleich.
Die letzte Box spinnt leider im Internet Explorer rum. Sie ist unter den anderen Boxen platziert aber das <img> von ihr hängt noch unten. Der Text ist richtig. Benutze ich margin, funktioniert es aber dann wird im Firefox das komplette Layout verschoben. Ideal wäre ein Code der im Internetexplorer margin benutzen lässt und in den restlichen Browsern padding.

#urban {
 width: auto;
 height: auto;
 text-align: left;
 padding: 256px 0 0 63px;
 float: none;
}

* html #urban {
 float: none;
 padding: none;
 margin: 256px 0 0 63px;
}

Funktioniert leider nicht.

Hier der ganze Code:

#kiste {
 width: 869px;
 height: 469px;
 background: url(kiste.jpg);
 background-repeat: no-repeat;
}

#content {
 width: 869px;
 height: auto;
 text-align: left;
 padding: 25px 0 0 0;
}

#web {
 width: auto;
 height: auto;
 text-align: left;
 padding: 118px 0 0 36px;
 float: left;
}

#lifestyle {
 width: auto;
 height: auto;
 text-align: left;
 padding: 118px 0 0 10px;
 float: left;

}

#identity {
 width: auto;
 height: auto;
 text-align: left;
 padding: 118px 0 0 10px;
 float: left;
}

#other {
 width: auto;
 height: auto;
 text-align: left;
 padding: 118px 0 0 10px;
 float: left;
}

#urban {
 width: auto;
 height: auto;
 text-align: left;
 padding: 256px 0 0 63px;
 float: none;
}

* html #urban {
 float: none;
 padding: none;
 margin: 256px 0 0 63px;
}

<div id="kiste">
<div id="web"><img src="web.jpg" alt="web" />
<p><span class="links"><a>portfolio 2007</a><br />
<a>portfolio 2008</a><br />
<a>myspace 2007</a><br />
<a>myspace nesyoa</a></span></p></div>
<div id="lifestyle"><img src="lifestyle.jpg" alt="lifestyle" />
<p><span class="links"><a>backpack</a><br />
<a>white tee</a><br />
<a>sneakers</a><br />
<a>truckercap</a><br />
<a>sweatpants</a></span></p>
</div>
<div id="identity"><img src="identity.jpg" alt="identity" />
<p><span class="links"><a>rainhawk</a><br />
<a>sarah piercing</a><br />
<a>echtstil</a><br />
<a>kaiokencru</a><br />
<a>olli</a></span></p>
</div>
<div id="other"><img src="other.jpg" alt="other" />
<p><span class="links"><a>mosh'n'roll</a><br />
<a>surferboy</a><br />
<a>dress&amp;shoes cd</a></span></p>
</div>
<div id="urban"><img src="urban.jpg" alt="urban" />
<p><span class="links"><a>stickers</a><br />
<a>devolution</a><br />
<a>cologne is dead</a><br />
<a>we do not like emos</a><br />
<a>piss on the walls</a></span></p>
</div>
</div>

Danke im Vorraus!

[ChrisB]

Hi,

Ich habe eine <div> mit einem Hintergrundbild und dadrin mehrere <divs> mit Menüpunkten als <img> plus ein bisschen Text drunter, der Code kommt gleich.

Setze das ganze doch bitte als (verschachtelte) Liste um. Absaetze um reine Navigationslinks braucht es nicht, und die BR sind auch ueberfluessig, wenn du aus jedem Link einen (Unter)Listenpunkt machst.

Die letzte Box spinnt leider im Internet Explorer rum.

Online-Beispiel bitte, damit man sich unter dem "Rumspinnen" was konkretes vorstellen kann.

MfG ChrisB

[RainHawk]

Hallo,

Setze das ganze doch bitte als (verschachtelte) Liste um. Absaetze um reine Navigationslinks braucht es nicht, und die BR sind auch ueberfluessig, wenn du aus jedem Link einen (Unter)Listenpunkt machst.

Wie soll das aussehen? Definier ich dann über CSS ul und li? Ich probier es.

Online-Beispiel bitte, damit man sich unter dem "Rumspinnen" was konkretes vorstellen kann.

Das eigentliche Problem hat sich nun erledigt, durch rumprobieren hat sich folgendes ergeben:

#urban {
 width: auto;
 height: auto;
 text-align: left;
 padding: 246px 0 0 63px;
 float: none;
}

* html #urban {
 float: left;
 padding: none;
 margin-left: -385px;
}

das funktioniert. Die Möglichkeit zum Hochladen hab ich im Moment leider nicht.

[Hannes]

Die letzte Box spinnt leider im Internet Explorer rum.

In welchem? Zwischen IE 6 und IE 7 besteht in Sachen CSS ein himmelweiter Unterschied.

Ideal wäre ein Code der im Internetexplorer margin benutzen lässt und in den restlichen Browsern padding.

Kaum, denn margin und padding verhalten sich per Definition in allen Browsern gleich. Dazu muss man den Browser allerdings in den standardkonformen Modus schalten, ohne diesen ist die Benutzung von CSS in größerem Umfang herzlich witzlos. Hast du das gemacht?

Gruß, Hannes