Safari/Win, IE 7 und die Listen
Bei meinem Blogumzug bin ich auf zwei mir bislang unbekannte Browserbugs gestossen, über die auch eine kurze Google-Recherche keine Informationen lieferte. Beide betreffen eher experimentelle Browser, nämlich den Internet Explorer 7 und Safari 3.02 für Windows.
Die Standard-Sidebar ist bei Wordpress eine Ansammlung verschachtelter Listen:
<ul id="navi>
<li>
<h2>Rubriküberschrift 1</h2>
<ul>
<li>Navigationspunkt 1</li>
<li>Navigationspunkt 2</li>
</ul>
</li>
<li>
…
</li>
</ul>
Mit dem dazugehörigen CSS kommen beide Browser nicht so recht klar:
Safari ignoriert – mindestens für ul – komplett den Universalselektor * {margin:0; padding:0;} und benötigt für diese eine eigene Formatierung, also
ul {margin:0; padding:0;}Der IE 7 produziert – erstaunlicherweise im Gegensatz zum IE 6 – Abstände über den inneren ul, obwohl laut IE-Web-Developer-Toolbar das CSS richtig vom Browser verstanden wird. Der Bug hat mal wieder mit der hasLayout-Eigenschaft der IEs zu tun und Abhilfe schafft ein
*:first-child+html #navi ul {height:1%}Um die Gefahr von irgendwelchen Überraschungen mit anderen Browsern zu verringern, habe ich hier im Selektor den Star-Plus-HTML-Hack angewendet, der momentan nur den IE 7 ansprechen sollte.
Es ist doch immer wieder schön, wie viele Überraschungen man mit den verschiedenen Browsern erleben kann. Vielleicht hat ja auch noch jemand einen Tipp, warum Opera 9.2 das padding-top der li in meinen Bilderstreifen
ul.bildergallerie li {
display:inline;
padding-top:15px;
} ignoriert? Momentan kleben die Vorschaubilder in diesem Browser doch etwas eng aneinander, wenn sie nicht mehr alle in eine Zeile passen.
Dein Safari-Problem kann ich unter Windows mit SF 3.03 wie auch unter MacosX mit Safari 2.01 nicht nachvollziehen. Hast Du ein konkretes Testcase, wo das Problem auftritt?
Was Opera betrifft, ist mir das im Moment zu viel (kann das Problem nachvollziehen), auch da würde evtl. ein Testcase helfen.
Btw: Glückwunsch zum Umzug, wurde endlich Zeit ;) Wird es ein Kommentarabo geben?
Sie Safari-Geschichte ist meine eigene Schuld, ich nehme alle Vorwürfe an Apple zurück. Ich habe herausgefunden, dass er mit dem nicht erlaubten Kommentar vor der Charset-Angabe im Stylesheet nicht klar kommt. Da der Kommentar aber von Wordpress benötigt wird, werde ich mir da noch was einfallen lassen bzw. auf die
Charset-AngabeThemes-Umschalt-Funktion von Wordpress verzichten müssen.Ein etwas bereinigtes Testcase (inclusive Kommentar, der am Verhalten von Opera nichts ändert) gibt es hier: Testcase.
Du meinst sowas: http://zappsblog.de/comments/feed/?
Unter stelle ich neuerdings alle Feeds vor.
Hi Zapp,
das Opera-ding hab ich mir mal angeschaut, und denke, dass das so richtig ist. Wenn man in Gecko mal genau hinschaut, sieht man auch, dass der das genauso macht, nur die Line-height, oder etwas der Art verschusselt. Zumindest ist da kein Padding.
Wie man DAS jetzt genau fixt ohne auf float statt inline zurückzugreifen, und welcher Bug da in welchem Browser genau ist; keine Ahnung, Abhilfe schafft, das padding den img zuzuweisen; Testcase hier.
Mit Kommentarabo meinte ich nicht das RSS-abo, sondern ein Abo auf Beiträge in denen man Kommentare geschrieben hat.
Wo du das mit dem Gecko so sagst, hast du Recht. Interessant, dass sich WebKit genauso verhält.
Ja, aber dann können die Bilder keinen Rahmen mehr bekommen. Mal schauen, was ich da mache.
Ich glaube, ich stehe gerade ganz fürchterlich auf dem Schlauch. Den Artikel-Kommentar-Feed meinst du wahrscheinlich auch nicht, oder?
Kann man sich deine Wunschfunktion irgendwo mal ansehen?
Auf jedwede E-Mail-Benachrichtigungen möchte ich verzichten, um nicht irgendwann mal als Spammer dazustehen, falls jemand Mist damit baut.
Ääähem, Rahmen für die Bilder? Das ist sehr kompliziert ;)
Wenn man das Brett vorm Kopf gefunden hat, könnte man für den Anfang versuchen, die Eigenschaft für den Abstand korrekt zu wählen, nämlich aussen (margin). :o
Was das Kommentarabo betrifft, so hast Du Recht, was die Befürchtung wegen Spammern betrifft, mir ist allerdings kein Fall bekannt, wo es dafür bisher Ärger gab (was das für die Zukunft allerdings leider nicht ausschliesst).
Ich glaube, ich sollte das Webdesign aufgeben und mich zu den Kühen auf den Berg stellen.
Kannst du mir mal sagen, warum sich in meinem Hirn festgebrannt hatte, dass Inline-Elemente grundsätzlich keinen margin haben können? Irgendwo muss es da mental einen Kurzschluss mit height gegeben haben. Danke für den Hinweis auf das Brett. :-)
Wegen der Spam-Geschichte hatte ich spontan an den Freiherrn und die Grünen-E-Cards gedacht, aber da lag der Fall wahrscheinlich auch etwas anders. Aber als Nicht-Jurist weiss man ja nie.