CSS-Design: Betriebssystemabhängiger Pixel? ;)
21. Juli 2006 um 14:00
Der folgende Entwurf bot sich sozusagen dazu an, ihn ganz ohne Floats und kugelsicher mit absoluten Boxen umzusetzen, auch wenn ich später feststellen musste, dass ich so den horizontalen Scrollbalken nicht wegbekomme – soll doch der Menüstreifen in jeder Auflösung und Browserskalierung bis zum rechten Rand reichen. Sicher liesse sich eine andere Lösung finden. So könnte ich auch das Logo aus dem Markup verbannen und als Hintergrundgrafik einbinden, um damit eventuell mit einer Box von 100% arbeiten zu können. Nur konnte ich meinen Dickkopf nicht überzeugen, das Logo aus dem Markup zu nehmen. ;-)
Liegt das obige Problem im Rahmen normaler CSS-Praxis, in der immer Vor- und Nachteile gewisser Lösungen abgewogen werden oder andere Ansätze die Hoffnung nähren, dass sie weniger fehleranfällig sind, so fällt ein Phänomen aus dem Rahmen meiner bisherigen CSS-Ringkämpfe. Trotz zahlreicher Versuche habe ich bisher keine Lösung, geschweige denn eine Antwort auf das Warum gefunden (oder wisst Ihr immer, warum bestimmte Lösungen funktionieren?). Die folgende Grafik macht deutlich, was ich meine:
Das Rollovermenü hat auf dem obigen Screenshot einen Überhang von einem Pixel (siehe den schwarzen Mauszeiger) und oben an der Begrenzung des schwarzen Streifens einen Pixel zu wenig. Erstaunlich finde ich, dass der jetzige Entwurf auf allen getesteten Mac-Browsern (Firefox, Opera, Camino, Safari) diesen Pixel zuviel oder zuwenig anzeigt, wogegen in den Browsern auf Windows XP (Opera, IE, Firefox) jetzt alles so aussieht, wie ich es mir wünsche. Vielleicht ist das ja längst geklärt und ich habe zuwenig Fachartikel gelesen, aber ein betriebssystemabhängiger Pixel ist mir noch nicht untergekommen.
Ich weiss nicht, ob hier ein paar CSS-Profis mitlesen, aber wer Lust hat, einmal ins CSS zu schauen, um vielleicht einen flüchtigen Fehler, eine falsche Herangehensweise oder gar eine Lösung zu entdecken, tue sich keinen Zwang an. ;-) Ich bitte aber zu beachten, dass das CSS zwar valide, die Datei aber immer noch eine Baustelle ist.
Zur Startseite | Zur Suche .
6 Kommentare
1. macx am 21. Juli. 2006 um 14:47
Ich würde an deiner Stelle lieber auf absolute Pixelangaben der Schrifttypo verzichten. Tust du kannst, kannst du auch die Höhe der ganzen Box prozentual bestimmen.
Stellst du die Schriftgröße um (daran wird das 1px-Problem wohl liegen), kannst du auch so arbeiten:
…
CSS:
ul.navi {
float: left;
width: 100%; /* Self clearing, anpassen!*/
}
ul.navi li {
list-style: none;
display: block;
float: left;
width: 5em;
height: 1.2em;
}
ul.navi li:hover {
…
}
Mit ein wenig mehr CSS kannst du das auch auf den Link beschränken.
Mein Tipp: Unbedingt Schriftgrößen in Pixeln vermeiden. Und: nimm deine Wiederholungen aus dem CSS. Wenn du für a ein padding definierst, brauchst du das bei a:hover nicht zu wiederholen.
2. Ralph am 21. Juli. 2006 um 15:36
Thanx für die Tipps, die das Problem bisher nicht lösen. Für die px-Angaben habe ich meine Gründe, ein “unbedingt” gibt es für mich in dem Fall nicht.
Für das Rausschmeissen der Wiederholungen habe ich einen CSS-Knecht, der kommt erst zum Schluss zum Einsatz. ;-)
3. Ralph am 21. Juli. 2006 um 16:18
Mit einem zusätzlichen Pixel auf padding-bottom in .hauptnavi_aktiv a liess sich ein Kompromiss finden, der auch zeigte, dass der Pixelunterschied nicht generell auf die Betriebssysteme zurückzuführen ist. Im IE Win und auf dem Mac-Browsern ist die Navigation identisch und so wie sie sein soll. Auf Opera und Gecko-Browsern unter Win gibt es jetzt oben einen leichten Überhang, der aber auch nicht schlecht aussieht. Ansonsten überlege ich mir wohl noch eine Lösung, die es erlaubt, dass man die Schriften skalieren kann bei gleichzeitigen Wachsen des horizontalen Balkens.
4. Gabi am 23. Juli. 2006 um 22:53
Hallo Ralph,
der Scrolli entsteht, wenn man im horizontalen Bereich % und px mischt, wie z.B. hier:
#kopf, #kopfleistung, #kopfprofil, #kopfkontakt
[...]
left:134px;
margin:0;
width: 100%;
[...]
Der Browser rechnet in diesem Falle die volle Breite (=100%) des Anzeigefensters + 134 Pixel.
margin:0; kann weg, das hast du ja schon global gesetzt.
Einzig im body ist es möglich, eine Hintergrundgrafik über die ganze Breite zu strecken, ohne eine Angabe zu width zu machen.
Eine böse Geschichte, die mir schon einige graue Haare beschert hat.
Eine Lösung, um auf jeder Seite eine andere body-Hintergrundgrafik einzubinden, ließe sich sicher mit ein bißchen php in der css-Datei lösen.
Das Logo würde ich nicht als Hintergrundgrafik einsetzten, denn ein Logo ist imho immer ein echtes “Image”, das auch bei abgeschaltetem css zu sehen sein sollte – das hat nix mit Dickkopf zu tun ;-).
Die Pixelgeschichte habe ich noch nicht angeschaut, mache ich aber noch, weil mir solche Basteleien viel Spaß machen ;-)
5. Gabi am 24. Juli. 2006 um 07:58
Ich habe mich jetzt nochmal mit dem Pixelproblem beschäftigt und würde Dich bitten, das mal auf den Mac-Browsern zu testen, ich habe die Werte für padding wie folgt geändert:
.hauptnavi a:hover, .hauptnavi2 a:hover, .hauptnavi3 a:hover {
padding: 8px 20px 17px 20px;
background-color: #930;
color: #ddd;
}
6. Ralph am 24. Juli. 2006 um 10:07
Gabi, danke für die Hinweise und Deine Mühe. Der Pixel zuviel bewirkt in dem Mac-Browsern diesen oben gezeigten Überhang beim Rollovern (2 Bild). Bleibt er bei 16px so habe ich eine korrekte Darstellung in den Mac-Brwosern und IE 6. Die anderen Testbrowser auf dem PC haben dann oben einen Überhang von einem Pixel, mit dem ich aber gut leben kann, weil es so aussieht, als wäre es bewusst so gemacht worden. ;-)