UL ist im IE anders ausgerichtet als im FF
Jochen
- css
0 thewho880 Ingo Turski0 Jochen0 Ingo Turski0 Jochen0 ChrisB0 Jochen
1 Ingo Turski0 Jochen
Hi,
das Problem habe ich heute bemerkt, als ich meine Seite testweise mal im IE angeschaut habe. Die Seite habe ich eigentlich auf FF programmiert, aber durch meine "saubere" CSS-Programmierung und dem W3C-Prädikat "This Page Is Valid XHTML 1.0 Strict!" dachte ich, daß es keine großen Probleme geben sollte, wenn ich die Seite dann auf dem IE anschaue...
Aber denkste - mein Menü, eine UL-Liste, wird mit folgenden CSS-Definitionen dargestellt:
#auswahlmenü ul {
background: transparent;
list-style-type: none;
list-style-position: inside;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
border: 2px solid #ff0000;
}
#auswahlmenü ul li {
background: transparent;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
border: 0px solid #ff0000;
}
Durch den "list-style-type: none;" und "list-style-position: inside;" ist es beim FF linksbündig am Rand der Seite, wie es sein sollte. Ich habe border: 2px eingestellt, damit man sehen kann, was ich meine.
Beim IE allerdings ist das ganze so verschoben, als ob "list-style-type: disc;" oder eines der anderen Elemente dargestellt wird - nur daß durch den Eintrag "none" die Grafik dazu nicht angezeigt wird.
Wenn man sich die von mir verlinke Beispielseite anschaut, sieht man was ich meine.
Wie kann ich dieses Problem beheben? Das wäre kein so großes Problem, wenn nicht einige Menü-Unterpunkte (die man auf der Beispielseite nicht sieht) so lang wären, daß sie in der richtigen FF-Darstellung gerade so in den schwarzen Bereich passen würden - beim IE allerdings, da er durch die Einrückung links etwa 10 Pixel Platz "unterschlägt", wird das gesamte Layout (trotz CSS) verschoben.
Danke für eure Hilfe!
Gruß
Jochen
Ich denke, das kannst du am einfachsten mit einer Browserweiche lösen und dann mit der margin spielen:
http://de.selfhtml.org/css/layouts/browserweichen.htm#alternative
Hi,
durch meine "saubere" CSS-Programmierung und dem W3C-Prädikat "This Page Is Valid XHTML 1.0 Strict!" dachte ich, daß es keine großen Probleme geben sollte, wenn ich die Seite dann auf dem IE anschaue...
um welche Seite geht es denn? Die oben verlinkte kann es ja wohl nicht sein, da sie nur HTML 4.01 Transitional ist und 10 üble Fehler aufweist, die das Problem verursachen könnten: <center> und unzulässige Sonderzeichen in den IDs wie z.B. aber auch hier:
#auswahlmenü ul {
Durch den "list-style-type: none;" und "list-style-position: inside;" ist es beim FF linksbündig am Rand der Seite, wie es sein sollte.
wobei die zweite Angabe überflüssig ist.
freundliche Grüße
Ingo
Hi,
um welche Seite geht es denn? Die oben verlinkte kann es ja wohl nicht sein, da sie nur HTML 4.01 Transitional ist und 10 üble Fehler aufweist, die das Problem verursachen könnten: <center> und unzulässige Sonderzeichen in den IDs wie z.B. aber auch hier:
#auswahlmenü ul {
Das ist richtig, diese Seite hat dicke Fehler.
Das Problem liegt mit dem Menü allerdings nicht an den Fehlern (die kommen durch den Code den der Anbieter einbaut, wenn er die Einträge generiert. Z.B. den Center-Befehl baut er automatisch ein, damit der Werbebanner immer schön in der Mitte ist, darauf habe ich keinen Einfluß). Die Sonderzeichen sind bei XHTML-Strict kein Problem, nur wenn ich genau diese "gästebuch.html" auch in XHTML-Strict kodiere, dann kommen zwar nicht mehr die Umlaute-Fehler, dafür 200+ Fehler die durch die Formatierung der Gasteinträge kommen.
Um eine lange Geschichte kurz zu machen: die anderen Seiten, die XHTML Strict sind und gemäß W3C fehlerfrei sind, haben das gleiche Problem wie die verlinkte Seite, nur ist mein Gästebuch gerade die einzigste Seite, die im Netz ist.
:-)
Allerdings überlege ich gerade, ob ich nicht doch auf allen Seiten "fuß" durch "fuss" und "menü" durch "menue" ersetzen soll?
Durch den "list-style-type: none;" und "list-style-position: inside;" ist es beim FF linksbündig am Rand der Seite, wie es sein sollte.
wobei die zweite Angabe überflüssig ist.
...und genau die war das Problem: der IE hat durch die erste Angabe zwar kein Symbol angezeigt, durch die zweite Angabe die Liste dennoch eingerückt, was der FF nicht gemacht hat.
Mit dem Fehlen der Angabe sieht es jetzt so aus, wie es aussehen soll. Da muß man aber erstmal drauf kommen :-)... ich meine: In meiner CSS-Datei sind sicherlich einige Angaben überflüssig, weil sie schon im übergeordneten Element definiert sind, aber ich finde man kann es leichter ändern, wenn der prinzipielle Eintrag schon vorhanden ist. Wenn ich in einem "höheren" DIV "font-weight: normal;" definiere, ist die gleiche Angabe in einem "inneren" DIV natürlich doppelt-gemoppelt, aber wenn ich dann mal schnell Fettschrift haben will, dann sehe ich sofort wo ich "normal" zu "bold" ändern muss.
Wer kann ahnen, daß gewisse überflüssige Befehle vom IE dennoch interpretiert werden?
Aber danke, wieder was gelernt!
:-)
LG
Jo
Hi,
Allerdings überlege ich gerade, ob ich nicht doch auf allen Seiten "fuß" durch "fuss" und "menü" durch "menue" ersetzen soll?
natürlich solltest Du (validen Code schreiben).
Durch den "list-style-type: none;" und "list-style-position: inside;" ist es beim FF linksbündig am Rand der Seite, wie es sein sollte.
wobei die zweite Angabe überflüssig ist....und genau die war das Problem: der IE hat durch die erste Angabe zwar kein Symbol angezeigt, durch die zweite Angabe die Liste dennoch eingerückt, was der FF nicht gemacht hat.
tja, der IE kennt ja z.B. auch ein Vorfahrenelement von html. ;-) Da ist es nicht verwunderlich, wenn er, obwohl kein Listenpunkt darzustellen ist, Deinem Wunsch nach dessen Positionierung nachkommt.
freundliche Grüße
Ingo
Hi,
Allerdings überlege ich gerade, ob ich nicht doch auf allen Seiten "fuß" durch "fuss" und "menü" durch "menue" ersetzen soll?
natürlich solltest Du (validen Code schreiben).
Genau das ist heutzutage auch mein Ziel.
(Wenn ich eine meiner früheren Seiten durch W3C validieren lassen... au weiha :-)
Allerdings verwundert es mich, daß in XHTML-STRICT deutsche Sonderzeichen wie "ü" und "ß" erlaubt sind und nicht als Fehler angesehen werden?
Gruß
Jochen
Hi,
Allerdings verwundert es mich, daß in XHTML-STRICT deutsche Sonderzeichen wie "ü" und "ß" erlaubt sind und nicht als Fehler angesehen werden?
Das hat mit HTML oder XHTML, Strict oder nicht Strict, nicht das Geringste zu tun - sondern mit der verwendeten Zeichenkodierung.
MfG ChrisB
Danke für die Erklärung.
LG,
Jochen
Hi,
Allerdings verwundert es mich, daß in XHTML-STRICT deutsche Sonderzeichen wie "ü" und "ß" erlaubt sind und nicht als Fehler angesehen werden?
suehe http://www.edition-w3c.de/TR/2002/REC-xhtml1-20020801/#heading-4.10%A0 :
"In XML haben Fragmentbezeichner den Typ ID, und es kann nur ein einziges Attribut des Typs ID pro Element geben. Deshalb ist das id-Attribut in XHTML 1.0 als vom Typ ID definiert."
aber weiter unten auch:
"Beachten Sie, dass die Menge der erlaubten Werte in XML 1.0, Abschnitt 2.3, Produktionsregel 5, viel größer ist als das, was duch die in HTML 4 definierten ID- und NAME-Typen erlaubt ist. Wenn Sie Fragmenbezeichner definieren, die abwärtskompatibel sein sollen, sollten nur solche Zeichenketten verwendet werden, die zu dem Muster [A-Za-z][A-Za-z0-9:_.-]* passen. Siehe [HTML4], Abschnitt 6.2 für weitere Informationen."
Aber auch in Bezug auf CSS können bei XHTML Sonderzeichen in IDs tückisch sein: weil der Default Charset hier UTF-8 ist, kann es zu unterschiedlichen Kodierungen im XHTML- und CSS-Dokument kommen.
freundliche Grüße
Ingo
sollten nur solche Zeichenketten verwendet werden, die zu dem Muster [A-Za-z][A-Za-z0-9:_.-]* passen. <<
Und auch dir ein Dankeschön.
Ich weiß gar nicht mehr, wie oft du mir in den letzten Tagen geholfen hast.
:-)
Lg,
Jochen