Höhe eines kombinierten Text- und Grafiklinks

  • 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

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

    Je größer der Deppenfaktor, desto gigantischer das Bescheidwissergefühl
    -Dieter Nuhr
    :D

  • 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.

    Je größer der Deppenfaktor, desto gigantischer das Bescheidwissergefühl
    -Dieter Nuhr
    :D

  • 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...

  • @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

  • @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…loper-tools/list-o-matic/


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

  • 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