Transparente Buttons im IE
Heute hatte ich wieder einmal ein Problem, was speziell den InternetExplorer betrifft. Ziel war es einen transparenten Button (INPUT Type=Submit) zu erzeugen, der sich über einen beliebigen Text legt. Hintergrund hierfür ist, dass der IE6 ja das Button-Problem hat und zusätzlich im JSF-Framework einfache Links nicht für die Navigation (Navigation-Rules) verwendet werden können. Die Idee dahinter ist daher einen SPAN-Tag mit dem gewünschten Inhalt zu haben und darüber ein transparentes INPUT-Feld zu legen.
In den Browsern Firefox, Safari und Opera funktioniert dies auf Anhieb problemlos. Hierzu musste einfach dem Span-Tag die Position relative verpasst werden und das innere Input-Feld wurde absolut positioniert (Breite / Höhe 100%).
Im IE gab es dann jedoch schon den ersten Fehler. Der Button war weg!
Da der Button als Value nichts hat und zusätzlich transparent ist und keinen Rand besitzt wurde dieser einfach gar nicht gerendert und die Größe ignoriert. Er war nicht anklickbar. Abhilfe schafft hier das Setzen eines Hintergrundbildes in Form eines transparenten GIF-Pixels.
Im IE6 gab es zusätzlich noch das Problem, dass dieser die geerbte Breite von 100% nicht vom Elternelement mit Position, als in unserem Fall das Span-Tag, bezog, sondern vom Body selbst. Damit war der Button natürlich viel zu Breit. Einen Hinweis hierzu habe ich auf http://www.satzansatz.de/cssd/onhavinglayout.html gefunden. Dort wird das Verhalten des IEs beim Rendern erläutert. Abhilfe schafft hier ein display:inline-block im Span-Tag.
Der fertige Code sieht dann wie folgt aus:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>
<html xmlns=“http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=“Content-Type” content=“text/html; charset=UTF-8″ />
<title>Insert title here</title>
</head>
<body>
<form method=“get” action=“http://google.de/search?q=”>
<p><input type=“hidden” name=“q” value=“text” />
text davor
<span style=“position: relative; display:inline-block“><a href=“#”>link</a><input style=“position: absolute; cursor:pointer; left: 0px; width:100%; top: 0px; height: 100%; background:transparent; background-image:url(‘trans.gif‘); border: 0px solid #0000ff ; margin: 0px; padding: 0px“ type=“submit” name=“button” value=“” /></span>
text danach
</p>
</form>
</body>
</html>
Dies kann nun als CommandLink-Code verwendet werden, ohne dass hierfür JavaScript auf der Client-Seite notwendig ist.
on Februar 28th, 2008 at 6:47 pm
Werde das Codefragment gleich einmal in meinem
Projekt testen.
Kein JavaScript……..super !!
Holger
on Juni 4th, 2008 at 1:51 pm
das Problem tritt doch nur unter IE 6 auf und dieser stirbt langsam aber sicher aus. Zwar wird dieser noch in den meisten Behörden genutzt. Aber die meisten Websurfer nutzen die aktuelleren Explorer oder steigen auf kostenlose Alternativen. Von daher würde ich mir da gar nicht so viele Gedanken machen
on Juni 11th, 2008 at 9:18 am
So pauschalisieren würde ich das nicht, denn für den IE7 kann dies auch sehr nützlich sein. Dieser hat zwar nicht mehr die Angewohnheit alle Buttons mitzusenden, sodass man den gedrückten auf Serverseite nicht erkennt, aber er ignoriert das Attribut Value vom Button und sendet lieber den Inhalt des Buttons mit. Wenn man auf den Value angewiesen ist, kann dies unter Umständen dann schon nerven.
BTW: Bei den von mir betreuten Seiten wird der IE7 zum IE6 erst im Verhältnis 10:6 benutzt. Ein Aussterben ist zwar sicher garantiert aber wird sich noch etwas hinziehen, sodass man diesen Browser meiner Meinung nach noch beachten sollte.
on Juli 24th, 2008 at 11:38 am
Danach habe ich gesucht - hatte das gleiche Problem.
Vielen Dank für den Code!
on August 6th, 2008 at 2:08 pm
Hallo,
das der IE 6 bald nicht mehr genutzt wird kann ich nicht wirklich glauben. lt. unseren Statistiken nutzen ihn noch fast 30% der User.
Gruß
Wolfgang
on August 6th, 2008 at 2:13 pm
Diese Zahl deckt sich auch seit Monaten mit unseren Statistiken. Was hier auch der Grund dafür ist, dass wir diese Umwege gehen.
on September 2nd, 2008 at 1:50 am
Bei mir hatte der IE die Buttons auch geschluckt…
Vielen Dank für den guten Lösungsansatz!
on September 4th, 2008 at 7:45 pm
Laut unserer Statistik nutzen die meisten Besucher den Firefox 2, gefolgt von Firefox 3, IE 6, IE 7
Bin mal gespannt was der neue Browser von Google “Chrome” mit sich bringt und ob es bei den Websurfer auch gut ankommt.
Gruß
on September 7th, 2008 at 5:01 pm
Hallo,
bei uns nutzen die meisten IE6 und Firefox 2. Ich hoffe, dass die IE6 Nutzer schnell auf ander Explorer umsteigen, denn die png-Grafiken werden mehr und mehr zum Standart.
Über den neuen Google Browser, hört man ja bis jetzt nichts positives