Link mit padding-left links nicht anklickbar (IE6)
Ralf Heumann
- css
0 wahsaga
Hallo,
unter http://www.janus-wa.de/layouts/testcase/test.html habe ich eine Icon-Toolbar gebaut. Sie stellt hier 4 Links mit Icons dar.
Beispiel 1:
Die Icons befinden sich als Background in den <li>s und werden per Klasse zugeweisen (brauche ich deshalb als Klasse, weil ein CMS später die Toolbars generieren soll.
Die <a>s (also die eigentliche Klickfläche) habe ich in diesem Beispiel zur Verdeutlichung mal rot umrandet. Das Anklicken klappt überall wie gewünscht - nur unser geliebter IE6 macht mir wieder einen Strich durch die Rechnung: der Padding-left (wo sich das Icon befindet) ist nicht anklickbar. Nur der Text.
Auch "lustig" Beispiel 2:
In meinem Workaround-Wahn habe ich den <a>s eine height: 0; verpasst. (Mit anderen Höhen passiert dasselbe) -> nun klappt das mit dem Anklicken, aber warum sind die <a> jetzt 100% breit??
Für Eure Hilfe wäre ich sehr dankbar.
Wichtig wäre mir allerdings eine reine CSS-Lösung ohne zusätzlichem Markup.
Vielen Dank im voraus,
Ralf
hi,
Die <a>s (also die eigentliche Klickfläche) habe ich in diesem Beispiel zur Verdeutlichung mal rot umrandet. Das Anklicken klappt überall wie gewünscht - nur unser geliebter IE6 macht mir wieder einen Strich durch die Rechnung: der Padding-left (wo sich das Icon befindet) ist nicht anklickbar. Nur der Text.
Ersetze mal das display:block durch display:inline-block.
In meinem Workaround-Wahn habe ich den <a>s eine height: 0; verpasst. (Mit anderen Höhen passiert dasselbe) -> nun klappt das mit dem Anklicken, aber warum sind die <a> jetzt 100% breit??
Das wird vermutlich mal wieder in hasLayout begründet liegen.
Nach meinem kurzen Test mit deiner Beispielseite brauchst du die height-Angabe aber nicht mehr, wenn du die Links als inline-block formatierst.
gruß,
wahsaga
Hi,
Das wird vermutlich mal wieder in hasLayout begründet liegen.
Nach meinem kurzen Test mit deiner Beispielseite brauchst du die height-Angabe aber nicht mehr, wenn du die Links als inline-block formatierst.
Inline-block habe ich noch nie benutzt, weil ich dachte, daß der IE das sowieso nicht versteht. Ich hätte jetzt dem a-Element nur für den IE ein "height: 1px" gegeben und dann keine display-Eigenschaft mehr.
LG
netinja
Hallo!
Inline-block habe ich noch nie benutzt, weil ich dachte, daß der IE das sowieso nicht versteht.
Das stimmt AFAIK nicht. Auch in SELFHTML steht nichts davon.
ciao, ww
Ersetze mal das display:block durch display:inline-block.
Super. Vielen Dank! :)
Gruß
Ralf