<li> mit display:inline - Leerräume dazwischen entfernen?

[Ralf Heumann]

Hallo,

unter http://www.janus-wa.de/layouts/adler/ habe ich noch ein weiteres Problem mit den Registerkärtchen ganz oben über dem Header.

Ich habe dieses mit einer <ul> und <li>-Elementen erstellt. Die <ul> ist rot eingefärbt um sie für das Problem besser hervorzuheben. Mit einigen Tests und Hilfe hier aus dem Forum habe ich es nun fast so, wie es sein sollte und konnte es mit display:inline lösen. Die Grafiken sind im Fx schön am Header angedockt, jedoch stört mich noch der Zwischenraum zwischen den Buttons.

Lasse ich die Grafiken oder <li> Elemente floaten, so erziele ich zwar das Ergebnis, dass die Grafiken ganz aneinander liegen, jedoch liegen sie, aufgrund ihrer unterschiedlichen Höhen, dann nicht mehr unten auf.

Ein weiteres Problem habe ich noch im IE: Obwohl die <ul> absolute positioniert ist und mit bottom: 0; unten am Header andockt, habe ich im IE noch immer einen Abstand von einem Pixel. Wie bekomme ich den weg?

Viele Grüße und schonmal danke im voraus.

Ralf

[wahsaga]

hi,

Die Grafiken sind im Fx schön am Header angedockt, jedoch stört mich noch der Zwischenraum zwischen den Buttons.

Hast du noch Whitespace zwischen den Elementen?

Ein weiteres Problem habe ich noch im IE: Obwohl die <ul> absolute positioniert ist und mit bottom: 0; unten am Header andockt, habe ich im IE noch immer einen Abstand von einem Pixel. Wie bekomme ich den weg?

CSS-hack, bottom:-1px;

gruß,
wahsaga

[Ralf Heumann]

Hast du noch Whitespace zwischen den Elementen?

hatte ich, ja, aber ohne die hätte ich keinen schön formatierten Quelltext gehabt..
Ich habe jetzt das ganze umgeschrieben. ohne display:inline. Sondern mit float. Das ganze klappt auf dem Fx nun wunderbar.

Ein Problem habe ich jetzt nur noch: den IE..

http://www.janus-wa.de/layouts/adler/

Weiß jemand warum die <ul> (rot eingefärbt) noch 1 pix Abstand nach unten hat, obwohl sie bottom: 0; hat?

Und wie bekomme ich die images auch im IE ganz nach unten? Sie hängen vertical fast mittig zentriert im <li> nicht aber unten..

Ich habe den images für den IE noch ein vertical-align: bottom; verpasst. Damit nähern sich die Grafiken zwar mehr dem unteren Rand als ohne, jedoch docken sie nicht an..

Gruß Ralf

[Ralf Heumann]

Ich konnte das Problem bisher immernoch nicht beheben *verzweifelt*

Hat denn niemand eine Idee? :(

[wahsaga]

hi,

Ich konnte das Problem bisher immernoch nicht beheben *verzweifelt*

Hat denn niemand eine Idee? :(

So lange du meine bisherigen Vorschläge, die ich nach wie vor für zielführend halte, nicht ausprobiert hast und mir vom Gegenteil berichtest, sehe ich keinen großartigen Grund, mir weitere Sachen zu überlegen, damit du _deine Arbeit_ fertig bekommst.

gruß,
wahsaga

[Ralf Heumann]

hi,

ich hatte deinen Rat display:inline; zu verwenden befolgt. Selbst _nach_ dem entfernen sämtlicher white spaces führt es nicht zu dem Ergebnis, dass die <li>-Elemente aneinanderlagen.

Die <li> hatten alle margin:0; Ich habe die komplette Liste im Quelltext in eine Zeile geschrieben ohne Zwischenräume, auch das half nicht.

Man riet mir dann float zu benutzen. Und das ganze führt - wie man nun sieht - beim Firefox zu der gewünschten Lösung.

http://www.janus-wa.de/layouts/adler/

Jetzt ist eben nur noch die Frage, warum der IE 1 Pixel Abstand unter der <ul> rendert bzw. warum die Images nicht ganz unten aufliegen.

Ich könnte das nun zwar mit CSS-Hacks "hindeichseln" dass es richtig aussieht, aber das ist ja nicht Sinn der Sache... Es muss ja offensichtlich irgendwo ein Problem geben. Eigentlich reicht es mir schon, wenn ich wüsste warum der IE, das so macht. Dann finde ich vielleicht eine Lösung dem entgegenzuwirken.

Gruß
Ralf

[wahsaga]

hi,

ich hatte deinen Rat display:inline; zu verwenden befolgt. Selbst _nach_ dem entfernen sämtlicher white spaces führt es nicht zu dem Ergebnis, dass die <li>-Elemente aneinanderlagen.

Komisch, bei mir schon - wenn ich deinen Code entsprechend modifiziere.

gruß,
wahsaga