Höhe eines kombinierten Text- und Grafiklinks

[Ravelli]

Hallo Freunde der Nacht,

für die Navigation in einem Veranstaltungskalender habe ich eine kleine Grafik und ein Text per CSS umrahmt und das Ganze als Schaltfläche definiert. Leider ist die Höhe der Schaltflächen in IE6 und Firefox/Mozilla unterschiedlich, da IE6 die Höhe ausgehend von der Grafik berechnet, Mozilla und Co aber von der Höhe des enthaltenen Textes:

Hier ist eine Beispielseite (Quellcode aufs Nötigste reduziert):
http://www.paderdesign.de/test.htm

Hat jemand eine Idee, wie man das in den gängigen Browsern auf eine einheitliche Höhe bringen kann? Hintergrundgrafik nutze ich hierbei schon für Hover-Effekt (im Beispiel aber entfernt).

Bis zu Euren hoffentlich zahlreichen Antworten einen schönen Abend,
Ravelli

[Adromir]

Versuch mal für den IE die line-height zu ändern (ist jetzt nur ne Vermutung)

[Ravelli]

@Adromir: genau das war auch einer meiner ersten Versuche, aber es hat keinerlei Auswirkungen.

[Adromir]

Dann versuch mal paddings und margins zu nullen. Prinzipiel würde ich aber sagen, daß es der IE hier richtig macht. Die Größe des übergeordneten Elements sollte eigentlich immer so groß sein wie Inhalt + padding.

[ingozen]

a {
    line-height: 20px;
}

a img {
   vertical-align: middle;
}

haut auf jeden hin.

[Ravelli]

@Adromir: das habe ich natürlich auch schon probiert, auch ohne erfolg, da die bezugsbasis bei beiden browsern unterschiedlich bleibt.

jetzt habe ich etwas gefunden, was helfen könnte, aber wirklich ideal scheint das auch nicht zu sein. und zwar müsste man das a-element, welches das eltern-element vom img-element ist, mit display:inline-block definieren. dann würden die schaltflächen weiterhin in einer reihe angezeigt werden, aber mit dem unterschied, dass man ihnen nun höhe und breite zuweisen kann. allerdings kennen das firefox/mozilla nicht, dafür kennen sie etwas ähnliches. insgesamt würde es dann so aussehen:

#Hauptmenue a {
display: -moz-inline-box; /* Mozilla-Workaround */
display: inline-block; /* für IE6 */
height:1.3em;
}

ich teste es aber erstmal in ruhe...

[Ravelli]

@ingozen: leider klappt das nicht, wie du hier sehen kannst:
www.paderdesign.de/test1.htm

[ingozen]

Zitat von Ravelli

#Hauptmenue a {
display: -moz-inline-box; /* Mozilla-Workaround */
display: inline-block; /* für IE6 */
height:1.3em;
}

Das ist, entschuldige mein französisch, kompletter Unsinn.
Für eine Navigation solltest du eh eine Liste benutzen.
Check mal das kleine Beispiel hier.

Lesestoff:
float, display

[Ravelli]

@ingozen: das mit den listen ist eine prima idee! hatte ich wohl verdrängt, weil es ja auch komplizierter geht :-) ich werde es gleich mal ändern. vielen dank für den tipp!!! schönen abend noch, ravelli

[koenixblau]

Zitat von Ravelli

@ingozen: das mit den listen ist eine prima idee! hatte ich wohl verdrängt, weil es ja auch komplizierter geht :-) ich werde es gleich mal ändern. vielen dank für den tipp!!! schönen abend noch, ravelli

Betreffend diesen gibt es einen nützlichen "Online-Generator":
http://www.accessify.com/tools-and-w.../list-o-matic/

Die Icons werden dann eben als Hintergrundbild, ohne Wiederholung, definiert.

[Ravelli]

so, nun habe ich das auf listen abgeändert und es sieht ganz gut aus. hier könnt ihr es fertig sehen:
http://www.paderdesign.de/test3.htm

vielen dank für eine hilfe!!!
schönen abend noch,
ravelli

[ingozen]

Zitat von koenixblau

Betreffend diesen gibt es einen nützlichen "Online-Generator":
http://www.accessify.com/tools-and-w.../list-o-matic/

Die Icons werden dann eben als Hintergrundbild, ohne Wiederholung, definiert.

Wer aufmerksam liest ist klar im Vorteil

[Ravelli]

Guten Morgen zusammen,

nun habe ich das Beispiel von ingozen in einem anderen projekt weitergesponnen. Da hier das Design rundherum anders ist, ergibt sich ein Folgeproblem. Und zwar wird die Navigation in Firefox, Opera und Seamonkey wie gewünscht angezeigt. IE6 schießt hier leider quer.

Schaut es Euch selbst an:

http://www.paderdesign.de/test4.html

Sobald ich das a-Element mit 'height: 100%;' definiere, macht IE6 nach jeder Schaltfläche einen Zeilenumbruch.

Hat jemand eine Idee, wie man das fixen könnte?

Bis später mal eine gute Nacht,
Ravelli