Woher kommt der Abstand bei IE im li-Tag?
Pierre
- css
Hallo zusammen
Ich ärger mich mal wieder mit der CSS-Umsetzung von IE rum. Es geht um die Unternavigation oben rechts auf meiner Musterseite. Schaut in Firefox sauber aus, aber der liebe Explorer macht zwischen den einzelnen li-Tags immer einen 2 oder 3 Pixel grossen Abstand rein. Kann mir jemand sagen woher das kommt? Der Border um die <li> kommt natürlich in der finalen Version wieder raus.
Hier die Musterseite:
http://www.per-net.ch/garage/sbs/
CSS (Definition der Navigation Zeilen 297-321)
http://www.per-net.ch/garage/sbs/fileadmin/css/main.css
Ich freu mich über jeden Tipp
Pierre
Hi,
Ich ärger mich mal wieder mit der CSS-Umsetzung von IE rum. Es geht um die Unternavigation oben rechts auf meiner Musterseite. Schaut in Firefox sauber aus, aber der liebe Explorer macht zwischen den einzelnen li-Tags immer einen 2 oder 3 Pixel grossen Abstand rein. Kann mir jemand sagen woher das kommt?
Vermutlich line-height - könnte aber auch mit overflow:hidden beseitigt werden.
Nebenbei bemerkt: Die unlesbar kleine Navigation soll wohl zur Erblindung der Seitenbesucher führen, damit die dann die Hörbücher kaufen?
cu,
Andreas
Hallo Andreas
Overflow hat nix geholfen, line-height hatte ich vorher auch schon mal probiert. Für die Sehbehinderten gibts dann noch eine CSS-Alternative, die alles grösser Darstellt.
Sonst noch Ideen?
Und noch eine kleine Anmerkung meinerseits, der Code steht natürlich in den Zeilen 192-228. Da hab ich mich vertippt oder besser gesagt verguckt.
Pierre
Hallo,
Overflow hat nix geholfen, line-height hatte ich vorher auch schon mal probiert. Für die Sehbehinderten gibts dann noch eine CSS-Alternative, die alles grösser Darstellt.
dann zähl ich mich aber auch zu den Sehbehinderten.
du solltest auch anderen Menschen die Möglichkeit geben die Navigation per Browserschriftgradgrösse einzustellen.
gruss
Nur keine Panik ich hab ja geschrieben dass ich das noch einfügen werde. Ist erst mal die erste Musterseite dieses Layouts. Es wird noch einen Zusatzlink geben, wo man grössere Schriften, höheren Kontrast und eine Druckansicht wählen kann. Aber diese Version hier soll so bleiben. Die Navi ist vom Grafiker absichtlich mit dem Pixelfont designt worden.
Pierre
Hallo Pierre.
Die Navi ist vom Grafiker absichtlich mit dem Pixelfont designt worden.
Mit welcher Absicht?
Schädigung der Augen?
Unlesbarkeit?
Verlust von genervten Kunden?
Einen schönen Freitag noch.
Gruß, Ashura
Guten Morgen Pierre,
ich konnte dieses lästige Problem bei meinen Navis lösen indem ich via (Star html) hack dem li eine feste Höhe gegeben habe, sprich:
* html li {
height: 1em;
}
z.b.
damit war die Darstellung für alle Browser schön einheitlich.
vg melanie
Hallo Melanie
danke für deinen Tipp. Mit der height: 1em, bin ich zwar nicht weitergekommen, war dem IE egal, aber mit dem starhtml-Hack konnte ich dem IE einen anderen margin-bottom-Wert mitgeben und somit die Abstände mit den anderen Browsern angleichen. Ist mir zwar nicht ganz geheuer, aber in den Browsern wo ich getestet habe, sehen die Abstände nun überall gleich aus.
Gruss
Pierre
Hallo Melanie
danke für deinen Tipp. Mit der height: 1em, bin ich zwar nicht weitergekommen, war dem IE egal, aber mit dem starhtml-Hack konnte ich dem IE einen anderen margin-bottom-Wert mitgeben und somit die Abstände mit den anderen Browsern angleichen. Ist mir zwar nicht ganz geheuer, aber in den Browsern wo ich getestet habe, sehen die Abstände nun überall gleich aus.
Hallo Pierre,
height: 1em; >> der Wert 1em war doch nur ein Beispielwert. Na gut hätte ich vielleicht noch dazuschreiben sollen, sorry. Du kannst da jeden beliebigen Wert hinschreiben, die Einheit sollte eben nur relativ sein (em, % ) zwecks Barrierefreiheit etc. aber das weisst Du ja.
Mir ist es auch lieber wenn es ohne Hacks klappt. Aber beim IE gehts einfach nicht. Er hat einfach zu viele Macken der Gute...
vg melanie
Hallo Pierre,
...] dem IE einen anderen margin-bottom-Wert mitgeben und somit die Abstände mit den anderen Browsern angleichen. Ist mir zwar nicht ganz geheuer, aber in den Browsern wo ich getestet habe, sehen die Abstände nun überall gleich aus.
wahrscheinlich wäre es sicherer bei allen (beteiligten) Elementen margin, padding
und line-height festzulegen, hast du aber vielleicht schon durch dein margin:0 usw.
hinreichend gemacht, dazu ggf. (für den IE) vertical-align:top;.
Allerdings mag die Methode erstmal für Unterschiede zwischen Opera und Mozilla
ausreichend sein aber beim IE und Listen doch noch Anpassungen erfordern,
einige Unstimmigkeiten lassen sich auch etwas rustikal per float umgehen,
doch da mag ein margin-bottom von 5px weniger riskant zu sein.
Abgesehen von den offenbar vorhandenen Bugs bei Listen gibts auch noch Unterschiede
durch falsche Vererbung der Schriftgrößen beim IE.
Grüsse
Cyx23
Hallo.
Da hab ich mich vertippt oder besser gesagt verguckt.
In wen denn, oder ist diese Frage zu intim?
MfG, at