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:
<?xml version=”1.0″ encoding=”UTF-8″ ?>
<!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.