css probs

ich habe bei einer seite an der ich arbeite ein problem:
1.) wenn ich zum ersten mal mit internet explorer 6 auf die page komme werden die stylesheets der navigation falsch angezeigt. nach aktualisieren passts dann aber

url: http://www.renkin.cc/papa%20v3/design/index.php

falsch:
richtig:

wirds bei euch auch falsch angezeigt? woran könnte das liegen?

2.) im mozilla wirds überhaupt total verstümmelt dargestellt:

Zitat

a:link.menu_link {
text-decoration:none;
font-weight:bold;
color:black;
font-size:12;
font-family:Verdana;
width: 20%;
border: 1px solid #666666;
padding-bottom:5px;
padding-top: 5px;
margin-right:-5px;
text-align: center;
}

woran liegt das? wirds vom mozilla falsch interpretiert oder sind da fehler drin? gibts alternativen? edit: hab den w3c validator drüberlaufen lassen und der findet keine fehler.

tia,
ezekiel

Zum IE Problem: mir ist der persoehnlich noch nicht untergekommen aber ich hab schon darueber gelesen. Nur zum Geier ich finds nicht mehr genau. Das beste was ich gefunden habe ist http://www.zeldman.com/daily/0802d....layoutrevisited ; da staunt man dann nicht schlecht ueber diesen Bug. Die Loesung ist aehnlich wie bei deinem nur die Symptome sind andere. Vielleicht hilfts trotzdem.

Zum Mozilla Problem: Mozilla ist korrekt. a-Element sind inline Element. Inline Elementen kann keine Breite angegeben werden. Das Funktioniert nur mit Block elementen. Du hast die Moeglichkeit mit padding-left/right bzw. margin-left/right dir Abstand zu den naechstgelegenen Element zu verschaffen.

Allgemein Tips fuer dein HTML/CSS:
- Ein Dokument braucht einen DOCTYPE damit der Browser weiss was er eigentlich darzustellen hat; dein HTML Dokument hat keines (somit wirst dus z.B. nicht bei w3.org validieren koennen)

- Du brauchst die "font-family" nur ein einziges mal angeben, naemlich fuer das body-Element. Alle darunterliegenden Element wird dieses Attribut vererbt (ausnahme sind Formularfelder).

"font-size"-Angaben ohne Einheit (px, em, %, ..) sind grundsaetzlich vom Browser zu ignorieren, du hast aber solche drin (z.b. bei textarea { font-size: 11; } 11-was? Schuhe? ;-)

Das Attribut "spacing" gibts nicht; verwendest du aber fuer das body-Element. Meinst du vielleicht letter-spacing?

@atrox: welcher browser ist das der diese Probleme mit Links und CSS zuweisungen hat so das man immer alle pseudo Klassen definieren muss? watchout hat das auch mal erwaehnt, aber ich hab das Problem noch nie gesehen.

Ich style bei a-Element prinizpiell das nur das a-Element selbst, z.b.

Code:

a.menu { text-decoration: none; color: green; font-weight: bold;}

Diese Zuweisung gilt dann fuer a, a:link, a:active, etc. Diese override ich dann nur wenn sich wirklich was aendert, z.b.

Code:

a.menu:hover { text-decoration: underline; color: tan; }

Zitat von Ezekiel

edit: noch eine frage: wieso ist beim mozilla der border der links nur auf den seiten, nicht aber oben und unten?

ich schätze das hat mit deinen negativen margin-angaben zu tun... ich tippe da mal vorsichtig auf nen bug - bilde mir ein mal was darüber gelesen zu haben, aber REKTAL wird das eh wieder abschmettern und mir css-defs vorlegen also...

generell kannst sagen
mozilla = RICHTIG
ie = FALSCH

egal wie's dargestellt wird, auch wenns im ie genauso wie im mozilla ausschaut