nicht angemeldet
:active bei untergeordneten Elementen (IE)
Hallo,
ich habe in einer HTML Seite einen Link der wie ein Button aussehen soll:
<a href="#" class="button"><span>Hier steht der Text.</span></a>
Mit etwas HTML kommt dann auch eine Hintergrundgrafik zum Einsatz, die entsprechend positioniert wird. Beim Mouseover schiebt der die Grafik etwas nach oben und zeigt den zweiten Teil der Grafik an. Beim Klick kommt der dritte Teil zum Einsatz.
a.button {
display: inline-block;display: -moz-inline-box; height:22px;
background: url(/img/n-button.png) no-repeat right 0px;
margin:0 0 0 12px;
padding: 0 20px 0 0;
color: white;
text-decoration:none;
}
* html a.button { display: inline;}
*:first-child+html a.button { display: inline;}
a.button span{
display: inline-block;display: -moz-inline-box;
height:22px; line-height: 22px;
background: url(/img/n-button.png) no-repeat left 0px;
margin:0 0 0 -12px; padding: 0 0 0 12px;
}
* html a.button span{ display: inline;}
*:first-child+html a.button span{ display: inline;}
a.button:hover, a.button:focus {background-position: right -22px;}
a.button:hover span, a.button:focus span{background-position: left -22px;}
a.button:active {background-position: right -44px;}
a.button:active span{background-position: left -44px;}
Soweit so gut. Es wird in allen "richtigen" Browsern auch korrekt angezeigt und funktioniert wie gewünscht.
Nur beim IE funktioniert es nicht wie es soll. Der Hover wird noch dargestellt, jedoch :active nicht.
Inzwischen habe ich herausgefunden das nur das oberste Element davon beeinflusst wird. Quasi "a.button span:active" funktioniert. Jedoch kann ich so nicht das a Element selbst beeinflussen.
Gibt es eine IE Lösung welche den "click" an das untere Element weiterleitet oder womit ich das untere Element beeinflussen kann?
-
Om nah hoo pez nyeetz, Pryos.org!
ich sehe den Sinn des
<span>-Elementes nicht.Matthias
--
-
ich sehe den Sinn des
<span>-Elementes nicht.Ich habe eine 200px x 66px Button Grafik. Diese besteht aus 3 Buttons a 200px x 22px.
Da aber nicht jeder Button auf der Webseite 200px breit ist, wurde die Hintergrundgrafik des <a> Elements nach rechts ausgerichtet mit den 20px Abstand für die rechte Rundung und Verzierungen.
Die Hintergrundgrafik des <span> Elements ist jedoch nach Links ausgerichtet und zeigt mit 12px Abstand die linke Rundung des Buttons.
Danach habe ich das <a> Element nach rechts eingerückt (margin-left: 12px) und das <span>Element etwas nach Links vorgezogen (margin-left: -12px).Optisch sorgt das dafür das beide Ende des Buttons sichtbar sind obwohl der Button kleiner als 200px ist. Dummerweise spinnt aber der IE deshalb beim :active rum.
-
Om nah hoo pez nyeetz, Pryos.org!
Dummerweise spinnt aber der IE deshalb beim :active rum.
welcher? alle? Im IE gibt es unter F12 die Entwicklertools. HTML und CSS validiert? Schreibfehler? Quirksmodus?
Grundsätzlich ist
.button:active spanein gültiger selektor.Matthias
--
-
welcher? alle?
IE6-8.
Im IE gibt es unter F12 die Entwicklertools.
HTML und CSS validiert?Validate by Direct Input: Success
Schreibfehler?
Nein, alle anderen funktionieren wie gewünscht.
Quirksmodus?
Nein.
Grundsätzlich ist
.button:active spanein gültiger selektor.Grundsätzlich nimmt jeder richtige Browser mein Beispiel an und führt es wie gewünscht aus, nur der IE nicht.
/-A----------------------------------------------\ |/-SPAN-------------------\ |
||TEXT (Hier kein :active | (hier geht :active) |
|------------------------/ |
------------------------------------------------/Die derzeitige komplette Test-Webseite:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Test</title> <meta http-equiv="X-UA-Compatible" content="IE=8" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> a.button {display: inline-block;display: -moz-inline-box; height:22px; background: url(n-button.png) no-repeat right 0px; margin:0 0 0 3px;padding: 0 20px 0 0;color: white;text-decoration:none;} * html a.button { display: inline;} *:first-child+html a.button { display: inline;} a.button span{display: inline-block;display: -moz-inline-box; height:22px; line-height: 22px;background: url(n-button.png) no-repeat left 0px; margin:0 0 0 -3px; padding: 0 0 0 12px;} * html a.button span{ display: inline;} *:first-child+html a.button span{ display: inline;} a.button:hover, a.button:focus {background-position: right -22px;} a.button:hover span, a.button:focus span{background-position: left -22px;} a.button:active {background-position: right -44px;} a.button:active span{background-position: left -44px;} </style> </head> <body> <a href="#" class="button"><span>GRATIS ANFORDERN</span></a> </body> </html>Die Grafik kann ich hier ja leider nicht hoch laden.
mfg Pryos
Matthias
-
Om nah hoo pez nyeetz, Pryos.org!
{width: 100%}? ich weiß, das macht wieder Probleme an anderer Stelle.
aber zumindest für IE8 sollte es klappen und wenns im IE<8 nicht so schön ist, pgh
Matthias
--
-
Om nah hoo pez nyeetz, Pryos.org!
{width: 100%}? ich weiß, das macht wieder Probleme an anderer Stelle.
das würde nur bei
aber zumindest für IE8 sollte es klappen und wenns im IE<8 nicht so schön ist, pgh
".button span:active" helfen, jedoch gibt es mir keine Möglichkeit das andere Element zu beeinflussen. Dies muss ich aber machen um den Hintergrund beider Elemente und damit der ganzen Button Grafik zu verändern.
Ich habe aber eine Notlösung gefunden, auch wenn Sie mir nicht gefällt. Ein Javascript setzt beim onmousedown/up eine klasse "active" bzw entfernt sie.
Matthias
mfg Pryos
-
-
-
-
-