nicht angemeldet
pixel-Differenzen in Mozilla/Opera
Hallo Forum,
mit einem 1px großen Problem komme ich nicht weiter...
Habe eine kleine css-Navigation gebastelt:
.footer { width:100%;
border-top:1px solid #2f80bf;
background-color:#2f80bf;
}
.footersubtext { font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:10px;
border-top:1px solid #2f80bf;
color:#0066cc;
background-color:#ffffff;
}
a.footernav { font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:11px;
font-weight:bold;
border-right:1px solid #ffffff;
/* border-left:1px solid #ffffff;*/
padding:3px;
text-decoration:none;
}
a.footernav:link { color:#ffffff;
background-color:#2f80bf;}
[usw. mit visited, hover, active]
<table class="footer" cellspacing="0" cellpadding="1">
<tr>
<td><a class="footernav" href="#">Kontakt</a><a class="footernav" href="#">Hilfe</a><a class="footernav" href="#">Logout</a><a class="footernav" href="#">meine Userdaten ändern</a></td>
</tr>
<tr><td class="footersubtext">Fußzeile</td></tr>
</table>
Leider zeigen Mozilla und Opera leichte Verschiebungen nach oben gegenüber IE (die von mir gewünschte Darstellung), ich habe schon an allen möglichen Parametern rumgedreht, padding, line-height, Zellenhöhe etc... nichts hilft wirklich. Der <a>-Bereich scheint sich sogar oben aus der Tabelle rauszuschieben.
<img src="http://www.visuelya.net/selfpics/ie.gif" border="0" alt="">
<img src="http://www.visuelya.net/selfpics/mozilla.gif" border="0" alt="">
<img src="http://www.visuelya.net/selfpics/opera6.gif" border="0" alt="">
Hat jemand von Euch einen Tipp? Danke für's Anschauen.
Schöne Grüße aus Köln-Ehrenfeld,
Elya
--
Keep passing the open windows.
Keep passing the open windows.
-
Leider zeigen Mozilla und Opera leichte Verschiebungen nach oben gegenüber IE (die von mir gewünschte Darstellung),
<img src="http://www.visuelya.net/selfpics/ie.gif" border="0" alt="">
<img src="http://www.visuelya.net/selfpics/mozilla.gif" border="0" alt="">
<img src="http://www.visuelya.net/selfpics/opera6.gif" border="0" alt="">
Hat jemand von Euch einen Tipp? Danke für's Anschauen.
Das Problem selbst habe ich nicht gefunden, aber da Du mit border und padding arbeitest und Dich über verschobene Objekte in anderen Browsern als dem IE beklagst, vermute ich, daß Du einem altbekannten Fehler im IE aufgesessen bist. Der IE ist erst seit Version 6 _und_ im CSS-Standardmodus in Lage, die Position/Größe von Objekten richtig, d.h. standardgemäß zu berechnen. Anders ausgedrückt: In Deinem Beispiel macht der IE es falsch, Mozilla und Opera machen es richtig (übrigens eine Tatsache, die häufig anzutreffen ist).
Ich würde Dir empfehlen, jetzt _nicht_ spezielle CSS-Angaben für IE und alle anderen zu basteln. Mache besser gleich Nägel mit Köpfen und benutze CSS von Anfang an so, wie es im Standard (<>) beschrieben ist. Du ersparst Dir damit auf die Dauer viel Ärger, einfach weil Eigenschaften und Verhalten festgelegt sind und Du Dich darauf verlassen kannst.
Wie man die Browser vom normalerweise vorhandenen herstellerspezifischen Süppchen in den CSS-Standardmodus schaltet, ist unter http://www.hut.fi/~hsivonen/doctype.html beschrieben. Der HTML- und der CSS-Validator von http://www.w3.org helfen Dir beim Schreiben korrekten Codes.
Gruß,
soenk.e-
Hallo Sönke,
Danke für die ausführliche Antwort. Mein Dokument ist inzwischen erfolgreich durch den html/css Validator, das padding:npx habe ich rausgeschmissen und durch padding-left/right ersetzt, dann war die Darstellung in allen Browsern korrekt. Glücklicherweise steht in meinem Pflichtenheft: "Browser mit aktueller Version"... ;-)Wie man die Browser vom normalerweise vorhandenen herstellerspezifischen Süppchen in den CSS-Standardmodus schaltet, ist unter http://www.hut.fi/~hsivonen/doctype.html beschrieben.
Und Opera 6? Wenn ich standardkonform die margin-Angaben aus dem Body-Tag schmeiße und in die css margin:0px; setze, habe ich bei Opera 6 einen wunderbaren Rand außen rum. Hast Du eine Idee?
Schöne Grüße aus Köln-Ehrenfeld,
Elya
--
Keep passing the open windows.-
Hallo, Elya,
Wenn ich standardkonform die margin-Angaben aus dem Body-Tag schmeiße und in die css margin:0px; setze, habe ich bei Opera 6 einen wunderbaren Rand außen rum. Hast Du eine Idee?
Hast du margin *und* padding auf 0 (Null) gesetzt? Eventuell hilft, auch für das html-Element diese Angaben zu vergeben, folglich käme folgende CSS-Regel heraus:
html,body {margin:0; padding:0;}
Dies dürfte in nahezu allen einigermaßen CSS-verstehenden Browsern alle Abstände ausschalten. Zumindest mit Opera 6 dürftest du dich diesbezüglich nicht herumplagen müssen.
Grüße,
Mathias--
»(...) hier ist ja alles voll Gelegenheiten. Nur gibt es freilich Gelegenheiten, die gewissermaßen zu groß sind, um benützt zu werden; es gibt Dinge, die an nichts anderem als an sich selbst scheitern. Ja, das ist staunenswert.«
http://www.kafka.org/projekt/schloss/erst.html-
Wenn ich standardkonform die margin-Angaben aus dem Body-Tag schmeiße und in die css margin:0px; setze, habe ich bei Opera 6 einen wunderbaren Rand außen rum. Hast Du eine Idee?
Hast du margin *und* padding auf 0 (Null) gesetzt? Eventuell hilft, auch für das html-Element diese Angaben zu vergeben, folglich käme folgende CSS-Regel heraus:
html,body {margin:0; padding:0;}
Beim Arbeiten mit Abständen ist es immer sicherer, beide zu setzen, auch wenn nur einer gebraucht wird. Außer der besagten Schwierigkeit bei <body>/<html> (Frage zum Philosophieren: Können <body> und insbesondere <html> überhaupt einen _äußeren_ Rand haben?) ist mir <li> als ein Element in Erinnerung, bei dem margin und padding von den Browsern unterschiedlich umgesetzt werden, weil der CSS-Standard sich darüber ausschweigt.
Gruß,
soenk.e-
Hallo Ihr,
danke! Alles prima. Ob ich das in diesem Leben nochmal wirklich in meinen Kopf kriege mit den Feinheiten von margin und padding, weiß ich allerdings nicht... ;-)
Schöne Grüße aus Köln-Ehrenfeld,
Elya
--
Keep passing the open windows.
-
-
-
-