nicht angemeldet
4 Pixel Listen-Bug? Firefox OK, IE wieder mal nicht :(
Hallo liebe SELFHTML-Benutzer,
Wie immer vielen Dank für's Lesen.
Ich räume gerade meinen DIV-Quellcode etwas auf und kategoriesiere diesen gleichzeitig. So müssen viele DIV-Elemente für UL-Elemente weichen - und hier ergibt sich mein Problem.
Wenn ihr folgenden Link ansteuert:
http://adva.dyndns.org/tgn2/brighter.htm
seht ihr Links eine Sidebar (so nenn' ich es in meinem Dokument). Diese enthält Boxen. Firefox, Opera zeigen diese korrekt an, der Internet Explorer pfuscht mir jedoch ins Handwerk indem er 4 Pixel über jede Box einfügt. Meine Klasse sieht einen Hintergrund für diese Box vor, da etwas Platz direkt unter dem Titel der Box geschaffen werden muss, um einen klaren Abstand zu erkennen.
Ich könnte das mit einer weiteren Klasse beheben, die den benötigten Abstand von 3 Pixel mit dieser Hintergrundgrafik erstellt, dies würde jedoch wieder etwas mehr Aufwand darstellen und Bytes kosten (wiederholende Definition im Dokument).
Normalerweise funktioniert ja <li class="xyz"></li> - wobei xyz ein Hintergrundbild enthält - wenn ich Höhe und Breite angebe genauso wie wenn ich ein Bild an dessen Stelle einfügen würde, oder?
Weil der IE mag da gerne ein Leerzeichen zwischen sehen ( ).
Naja seht euch bitte das Konstrukt an, ihr tut mir damit einen rießen Gefallen denn ich sitze mittlerweile seit über 6 Stunden daran, ohne die Lösung gefunden zu haben!
Mit freundlichem Gruß,
Rene Schindhelm
-
Hi,
der Internet Explorer pfuscht mir jedoch ins Handwerk indem er 4 Pixel über jede Box einfügt.
Hast du margins UND paddings fuer UL und LI deinen Wuenschen entsprechend gesetzt?
Der IE interpretiert manchmal auch white space zwischen den Tags seltsam - also auch den probehalber mal komplett eliminieren innerhalb der gesamten Liste.
Ich könnte das mit einer weiteren Klasse beheben, die den benötigten Abstand von 3 Pixel mit dieser Hintergrundgrafik erstellt, dies würde jedoch wieder etwas mehr Aufwand darstellen und Bytes kosten (wiederholende Definition im Dokument).
Wenn du dir schon ueber _sowas_ Sorgen machst - dann solltest du aber erst mal sehen, dass du die inhaltsleeren List-Items <li class="blueboxStart"> und <li class="blueboxEnd"> loswirst - die sind naemlich, ob mit oder ohne drin, strukturell ganz grosser Unfug.
MfG ChrisB
-
Hi,
bevor Du an der Seite weiterarbeitest, schau Dir bitte mal die Auswirkungen von Schriftvergrößerung an. Und verkleinere das Fenster mal einen Tick unter 1024px Breite.freundliche Grüße
Ingo-
Hallo liebe SELFHTML-Benutzer,
bevor Du an der Seite weiterarbeitest, schau Dir bitte mal die Auswirkungen von Schriftvergrößerung an. Und verkleinere das Fenster mal einen Tick unter 1024px Breite.
Die Schriftgröße ist tatsächlich ein Problem, welches mir wohl erst später begegnet wäre. Gäbe es hierzu einen ordentlichen Lösungsansatz? Firefox Schriftgröße +1 wäre ok, denke mal dies sollte auch die ältere Generation lesen können.
Und das Layout sollte auch < 1024 Pixel korrekt angezeigt werden (da fixe Weite). Dieser Effekt ist durchaus so erwünscht. IE < 7.0 habe ich noch nicht testen können, da mir dieser fehlt. Gibt es eine Möglichkeit, ältere IE auf das System zu spielen? Wenn ja wäre auch eine Quellenangabe sehr entgegenkommend.
Hast du margins UND paddings fuer UL und LI deinen Wuenschen entsprechend gesetzt?
Diese sind universell für alle Elemente auf 0 gesetzt, es sei denn es wird im CSS anders definiert.
Der IE interpretiert manchmal auch white space zwischen den Tags seltsam
Daran hatte ich auch schon gedacht. Deshalb hatte ich ein neues Dokument erstellt, und da es immernoch so war, mit dem experimentiert - Firefox brachte dann ungefähr die gleiche Ausgabe wie der IE (der es richtig dargestellt hat?).
... solltest du aber erst mal sehen, dass du die inhaltsleeren List-Items <li class="blueboxStart"> und <li class="blueboxEnd"> loswirst ...
Und an dessen Stelle setze ich was ein? Leider erzeugen diese eben genau den Start und das Ende dieser Box. Ich könnte - meinen Kenntnissen nach - nur wieder anders verschachteln (start-div, liste, end-div) oder das Bild direkt einfügen.
Wie immer vielen Dank für's Lesen.
Mit freundlichem Gruß,
Rene Schindhelm-
Hi,
Die Schriftgröße ist tatsächlich ein Problem, welches mir wohl erst später begegnet wäre. Gäbe es hierzu einen ordentlichen Lösungsansatz?
natürlich: verzichte auf absolute Posiionierung und Höhenangaben, dann wird das Layout flexibel.
Und das Layout sollte auch < 1024 Pixel korrekt angezeigt werden (da fixe Weite).
Also ich finde einen horizontalen - wenn auch minimalen - Scollbalken selbst bei 1024px Fensterbreite inakteptabel.
... solltest du aber erst mal sehen, dass du die inhaltsleeren List-Items <li class="blueboxStart"> und <li class="blueboxEnd"> loswirst ...
Und an dessen Stelle setze ich was ein? Leider erzeugen diese eben genau den Start und das Ende dieser Box. Ich könnte - meinen Kenntnissen nach - nur wieder anders verschachteln (start-div, liste, end-div) oder das Bild direkt einfügen.so wie ich das sehe, solltest Du zwei Listen verwenden.
freundliche Grüße
Ingo-
Hallo Ingo,
natürlich: verzichte auf absolute Posiionierung und Höhenangaben, dann wird das Layout flexibel.
Bitte korrigiere mich, aber würde ich das, könnte ich meine grafischen Inhalte nicht mehr wie gewünscht präsentieren oder nur auf umständliche Art und Weise.
Also ich finde einen horizontalen - wenn auch minimalen - Scollbalken selbst bei 1024px Fensterbreite inakteptabel.
Den sehe ich bei 1024x768'er Auflösung nicht (Firefox, IE7).
so wie ich das sehe, solltest Du zwei Listen verwenden.
Da scheitere ich. Wie müssten diese im CSS aussehen? Ich finde da keinen vernünftigen Ansatz - egal wie ich die Listen verschachtle, entweder die Grafiken werden gestapelt oder die Reihenfolge passt nicht (Abschlussgrafik, oben etc.).
Wie immer vielen Dank für's Lesen.
Mit freundlichem Gruß,
Rene Schindhelm-
Hi,
natürlich: verzichte auf absolute Posiionierung und Höhenangaben, dann wird das Layout flexibel.
Bitte korrigiere mich, aber würde ich das, könnte ich meine grafischen Inhalte nicht mehr wie gewünscht präsentieren oder nur auf umständliche Art und Weise.etwas umständlicher - ja. Aber das ist eben der Unterschied zwischen über einen WYSIWYG-Editor zusammengeklickten Seiten oder manuell erstellten Seiten von Anfängern und flxiblen CSS-Layouts. Anfänger sollten mMn position:absolute zunächst nicht verwenden und sich mit Alternativen (i.d.R. float) und natürlich mit der Einheit em beschäftigen. Erst mit Erfahrung und wenn man die Alternativen kennt, ist im Ausnahmefall auch mal absolute Positionierung angebracht.
Also ich finde einen horizontalen - wenn auch minimalen - Scollbalken selbst bei 1024px Fensterbreite inakteptabel.
Den sehe ich bei 1024x768'er Auflösung nicht (Firefox, IE7).Das kann an verschiedenen Faktoren liegen. Du hast die Breite halt extrem knapp bemessen.
so wie ich das sehe, solltest Du zwei Listen verwenden.
Da scheitere ich. Wie müssten diese im CSS aussehen? Ich finde da keinen vernünftigen Ansatz - egal wie ich die Listen verschachtle, entweder die Grafiken werden gestapelt oder die Reihenfolge passt nicht (Abschlussgrafik, oben etc.).Wieso im CSS? Wenn Du Deine zwei Menüteile als zwei Listen im HTML auszeichnest und diese mit IDs versiehst, kannst Du die ULs individuell formatieren.
Die Alternative wäre *eine* verschachtelte Listemit den Überschriften in der ersten Ebene und den Menüpunkten in der zweiten. Auch hier ließen sich beide Teile leicht formatieren:
ul {/*gesamte Navigation*/}
li {/*Menüblöcke und Überschriften*/}
li ul {/*Navigationslisten*/}
li li {/*Menüpunkte*/}freundliche Grüße
Ingo-
Hallo Ingo,
Also an dieser Stelle erstmal vielen Dank für die fachliche Kritik.
Das kann an verschiedenen Faktoren liegen. Du hast die Breite halt extrem knapp bemessen.
Ja, mit 1000 Pixeln Breite war das schon recht knapp bemessen und kann natürlich noch etwas variieren. Dennoch, bei maximiertem Anzeigebild ist weder im FF noch IE auf meinem PC ein horizontaler Scrollbalken. Deshalb wäre es interessant, welche dieser Faktoren (falls bekannt) zu diesem Anzeigebild führt.
Die Alternative wäre *eine* verschachtelte Listemit den Überschriften in der ersten Ebene und den Menüpunkten in der zweiten. Auch hier ließen sich beide Teile leicht formatieren:
ul {/*gesamte Navigation*/}
li {/*Menüblöcke und Überschriften*/}
li ul {/*Navigationslisten*/}
li li {/*Menüpunkte*/}Dem Beispiel folgend sieht meine Liste momentan so aus: Mit CSS und Ohne CSS.
Jetzt verbleibt die Frage wie ich den leeren Unterpunkt entferne, gleichzeitig aber das Menü abschließen kann. Ein leeres <ul>, also ohne <li>-Elemente, wäre ja nicht valide. Über eine Lösung wäre ich sehr erfreut.Wie immer vielen Dank für's Lesen.
Mit freundlichem Gruß,
Rene Schindhelm-
-
Hallo ChrisB,
Indem du die abschliessende Hintergrundgrafik dem letzten Menuepunkt verpasst.
Danke. Das war des Rätsels Lösung. Jetzt spiele ich wieder etwas rum bis der nächste Fehler auftaucht ;)
Wie immer vielen Dank für's Lesen.
Mit freundlichem Gruß,
Rene Schindhelm
-
-
-
-
-
-
-