✔ Ausrichtung mit float nicht ganz korrekt

[Watusimann]

Hallo zusammen,

Mit css arbeite ich nun schon seit ein paar Monden, allerdings stehe ich jetzt vor einem Rätsel, was die Ausrichtung betrifft.
Im Firefox wird alles so angezeigt wie ich mir das vorstelle, doch im IE verschiebt er die rechte Spalte um ein paar Pixel. Hätte jemand einen Moment Zeit um sich das kleine Übel anzuschauen, so möge er auf http://www.dener-sound.de/new klicken. Vielleicht findet Ihr den Fehler?

bis dahin erstmal vielen Dank
Gruß Dave

PS: zweites Problem, was ich gerade sehe, ist die Navi - kann mir jemand erklären was da passiert ist? habe mit z-index probiert das Problem zu beheben, aber bringt nichts.

 

[Maik]

• Der IE verdoppelt zu gerne die margin-Angaben für floatende Elemente, was sich mit dem Star-HTML-Hack korrigieren lässt:
  

.picker_cont {
float:right;
width:150px;
text-align:justify;
margin:270px 12px 0px 0px;
}

* html .picker_cont { /* Korrektur für IE */
margin:270px 6px 0px 0px;
}

Achtung: in dem DIV.picker_cont wird das derzeit vorhandene style-Attribut mit den margin-Angaben nicht mehr notiert!

<div class="picker_cont"> ... </div>

• Lösung für die oberhalb verdeckten Navi-Buttons:

.nav {
border:1px solid #999;
padding:4px 8px 4px 8px;
text-decoration:none;
font-size:14px;
color:#a5d21e;
margin-left:2px;
position: relative;
z-index: 4;
}

 

[Watusimann]

Super, Danke dir für die schnelle Hilfe.

Mit dem IE Problem, werd ich wohl nochmal ändern. Das Grundgerüst ansich selbst kommt mir selber ziemlich verstrickt vor :suspekt:

Nochmals Danke

 

[Maik]

Das Grundgerüst ansich selbst kommt mir selber ziemlich verstrickt vor :suspekt:

Mir auch ...

Beim Einfügen des CSS-Codes sind dir ein paar Fehler unterlaufen:

.picker_cont {
float:right;
width:150px; 
text-align:justify;
}
.picker {
float:right;
width:150px;
padding:5px 5px 5px 5px; 
text-align:justify;
border-bottom:1px solid #f1f8dd;
border-left:1px solid #f1f8dd;
border-top:1px solid #f1f8dd;
color:#999;
* html .picker_cont { /* Korrektur für IE */
margin:256px 6px 0px 0px;
}

Hier nochmal die korrekte Notation:

.picker {
float:right;
width:150px;
padding:5px 5px 5px 5px; 
text-align:justify;
border-bottom:1px solid #f1f8dd;
border-left:1px solid #f1f8dd;
border-top:1px solid #f1f8dd;
color:#999;
}

.picker_cont {
float:right;
width:150px; 
text-align:justify;
margin:270px 12px 0px 0px;
}

* html .picker_cont { /* Korrektur für IE */
margin:256px 6px 0px 0px;
}

Zudem ist in dem DIV.picker_cont noch das style-Attribut mit den margin-Angaben notiert, das die margin-Eigenschaften im zentralen Stylesheet (insbesondere die Fehlerkorrektur für den IE) wieder überschreibt

<div class="picker_cont" style="margin:256px 12px 0px 0px">...</div>