CSS-Layout-Problem

[nohfreak]

Moin Leute,

ich habe folgendes Problem, malwieder den IE betreffend.

Schaut euch folgende Seite mal mit Firefox und dann mit IE an. Im Firefox schauts fast so aus, wie es sein soll, im IE is es wie üblich irgendwie vermurkst, und ich kapiere nicht warum. :>

Link zum Design

Problem im Firefox ist, dass die Links oben angeklatscht werden in der Navi-Leiste. Ich dachte eigentlich das würde sich durch ein

display: block;
float: left; 

erledigen, tut es aber aus mit unerklärlichen Gründen leider nicht. :>

Hier die Links zu den CSS-Files:
Rahmen
HTML
Links
Klassen

Achja, für den Head-Bereich und die Mitte habe ich bewusst relative Breitenangaben gewählt, damit sich das Design beim minimieren des Fensters, bzw. bei kleineren/größeren Auflösungen anpassen kann.

Ein anderes Problem im IE ist die Sache mit dem <legend> irgendwie is da über dem Rahmen der Felder noch ein weißer Balken. Sehr merkwürdig. :>

Das größte Problem im IE is aber das Navi-Menu, wie man sieht. Ich kapiers nicht. ^^

Vielen Dank schoneinmal für die Hilfe. Ich hab mich bisher im Zusammenhang mit CSS nur mit der Seite von Peter auseinandergesetzt, dort konnte ich aber keine direkten Lösungen für mein Problem finden. Auch wollt ich den armen Kerl nich schon wieder per eMail belästigen, darum dachte ich mir ich poste mal hier.

Greetz,
Nohfreak

[Kropff]

1. setze eine doctype
2. informier dich über darstellungsmodi
3. informier dich über das box-modell und den bug, den der ie hat

gruß
peter

[nohfreak]

Und doch mal wieder der Peter. Danke dir erstmal!

Also, ich hab als Doctype nun XHTML Transitional angegeben, dann das ganze durch den W3C-Validator gejagdt und dann die Fehler alle behoben.

Dann hab ich .mainnavi li das Attribut display: inline; zugefügt, nun sind die Links auch in unserem guten Freund IE6 wieder in einer Reihe.

In deinem ersten Tutorial zu CSS habe ich allerdings gelesen, dass das Anklatschen der Links nach oben mit

display: block;
float: left;

zu beheben sei. Das hab ich dann eingefügt, aber leider sind die Links immernoch nach oben angeklatscht.

.mainnavi a
{
color: #FFFFFF;
font-weight: bold;
text-decoration: none;
height: 22px;
display: block;
float: left;
padding: 0px 10px 0px 10px;
}

Ich könnte natürlcih einfach nach oben hin ein Padding oder ein Margin reinpacken, aber leider verschiebt sich dann auch das Hintergrundbild beim Hover mit nach unten.

Haste da evtl. noch nen heißen Tip ?

Und das <legend> scheint der IE6 einfach nich zu kapieren, oder ? In Opera und Firefox funktioniert das nämlich astrein.

Greetz,
Nohfreak

[Kropff]

height: 22px; raus und mit padding arbeiten

gruß
peter

[nohfreak]

Ah, supi, damit hats nun funktioniert, danke. Damit wären die größten Probleme nun schonmal aus der Welt.

Für die Sache mit dem Legend habe ich auch ne Lösung gefunden, vielleicht kann damit ja mal irgendwer was anfangen, der den Thread hier liest, oder Peter kann das in seine Liste mit den IE6-Bugs aufnehmen.

*html fieldset
{
position: relative;
padding: 10px;
}

*html legend
{
position: absolute; top: -.5em; left: .5em;
}