Die Raute im CSS

Beim bearbeiten einer CSS Datei viel mir folgendes Stück Quellcode ins Auge:

a {
	padding: 5px;
	#margin-left: -12px;
}

Die Eigenschaft „#margin-left“ ist nicht standardkonform und sollte nicht interpretiert werden, was zur Frage führte was sie in der CSS Datei zu suchen hatte. Nach einiger Suche ergab sich die Lösung, es handelt sich dabei um eine Form der Browserweiche welche nur vom Internet Explorer ausgewertet wird.

Weitere Informationen gibt es unter:
http://de.selfhtml.org/css/layouts/browserweichen.htm

Header senden, HTTPS und der Internet Explorer

Manchmal ist es gewünscht das eine PHP Anwendung eine Datei an den Client sendet. Das könnte dann z.B. so aussehen:

header("Content-type: application/pdf");
header("Content-Length: " . strlen($tmp));
echo $tmp;

Diese Variante funktioniert im ersten Moment erst einmal ohne Probleme in allen Browsern. Zum Problem wird dies erst, wenn die Seite über HTTPS zu erreichen sein soll. In diesem Fall stürzt der Internet Explorer ohne Fehlermeldung ab. Der Trick hier ist es einen „Cache-Control“ Eintrag hinzuzufügen (welchen der Internet Explorer bei HTTPS anscheinend benötigt)

header("Cache-Control:  maxage=1");
header("Pragma: public");
header("Content-type: application/pdf");
header("Content-Length: " . strlen($tmp));
echo $tmp;

Mit dieser Variante funktioniert das ganze dann auch im Internet Explorer unter HTTPS.

Weitere Informationen gibt es unter:
http://stackoverflow.com/questions/773308/ie-https-generating-pdf-from-php-file-doesnt-work

Per Javascript Parameter per POST an ein PHP Skript schicken

Wenn man in Javascript einem PHP Skript etwas schicken möchte so kann man dies per GET Methode machen. Das bedeutet das die Parameter an die URL des PHP Skriptes angehangen werden. Für größere Datenmengen ist die Methode POST allerdings wesentlich sinnvoller. Das Problem ist das man die Daten dann mittels eines Formulars senden muss. Das macht nicht wirklich Spaß. Einfacher geht es mit der Methode postToUrl welche ich auf Stack Overflow gefunden habe:

function postToUrl(path, params, method)
{
 method = method || "post"; // Standardmethode wird auf POST gesetzt, wenn keine andere angegeben

 var form = document.createElement("form");
 form.setAttribute("method", method);
 form.setAttribute("action", path);

 for(var key in params) {
 var hiddenField = document.createElement("input");
 hiddenField.setAttribute("type", "hidden");
 hiddenField.setAttribute("name", key);
 hiddenField.setAttribute("value", params[key]);

 form.appendChild(hiddenField);
 }

 document.body.appendChild(form);
 form.submit();
}

Die Funktion funktioniert dabei auch im allseits beliebten Internet Explorer ;)

Update: Mit dem Internet Explorer 8 macht das ganze Probleme. Die umgeschriebene Funktion mit der es in allen Browsern funktionieren sollte sieht dann so aus:

function postToUrl(path, params, method) 
{
 method = method || "post"; // Set method to post by default, if not specified.

 // The rest of this code assumes you are not using a library.
 // It can be made less wordy if you use one.
 //var form = document.createElement("select");
 var form = document.createElement("form");
 form.setAttribute("method", method);
 form.setAttribute("action", path);

 for(i=0; i<params.length; i++)
 {
 var key=i;
 
 var hiddenField = document.createElement("input");
 hiddenField.setAttribute("type", "hidden");
 hiddenField.setAttribute("name", key);
 hiddenField.setAttribute("value", params[key]);

 form.appendChild(hiddenField);
 }

 document.body.appendChild(form);    // Not entirely sure if this is necessary
 form.submit();
 return false;
}

Weitere Informationen gibt es unter:
http://stackoverflow.com/questions/133925/javascript-post-request-like-a-form-submit

Der Internet Explorer und Comboboxen

AJAX ist schon eine feine Sache. Wenn die Daten dann zurückkommen und man damit eine Combobox füllen möchte so sieht das meist so aus:

function showData() {
  if (xmlHttp.readyState == 4 || xmlHttp.readyState == "complete") {
    document.getElementById("combobox").innerHTML = xmlHttp.responseText;
  }
}

Es gibt hierbei bloß ein Problem, der Internet Explorer mag es einfach nicht. Während dieser Code mit Chrome, Firefox, Opera et cetera wunderbar funktioniert, gibt es beim Internet Explorer ein Problem. Er hat Probleme mit dem innerHTML und füllt es einfach nicht.

Damit man nun nicht seinen ganzen Code umschreiben muss gibt es auf http://www.fpruefer.de/blog/archives/innerHTML-und-die-Select-Box-2009-08-04.html eine interessante Funktion welche sich das outerHTML nimmt (welches der Internet Explorer unterstützt) und dort die <select> Tags ausspart und nur alles zwischen diesen Tags ändert. Die Funktion welche die Arbeit dabei erledigt sieht dabei so aus:

function fillSelect(pList, pOptionHTML)
{
  if (pList) {
    if (pList.outerHTML) {
      var begin = pList.outerHTML.match(/(<select .*?>)/i);
      var end   = pList.outerHTML.match(/(<\/select>)/i);

      if (begin && end) {
        var s = begin[1] + pOptionHTML + end[1];
        pList.outerHTML = s;
      }
   }
  else {
    pList.innerHTML = pOptionHTML;
    }
  }
}

Angewendet wird sie dann so:

fillSelect(document.getElementById("combobox"), xmlHttp.responseText);

Und schon ist dieses Problem Geschichte :)

Weitere Informationen gibt es unter:
http://support.microsoft.com/kb/276228/de

Die Internet Explorer Hölle

Man nehme ein hübsches HTML Formular:

<form>Vorname:
<input maxlength="30" name="vorname" size="30" type="text" />

Nachname:
<input maxlength="30" name="nachname" size="30" type="text" />

</form>

In fast allen Browser sieht das prima aus, nur der Internet Explorer ist der Meinung nach dem Formular einen Zeilenumbruch einzufügen, was in einigen Konstellationen doch recht seltsam aussieht. Glücklicherweise kann man das ganze leicht per CSS verhindern. Dazu müssen wir dem Form Tag die Eigenschaft display:inline zuweisen. Das ganze sieht dann so aus:

<form style="display: inline;">Vorname:
<input maxlength="30" name="vorname" size="30" type="text" />&nbsp;

Nachname:
<input maxlength="30" name="nachname" size="30" type="text" />

</form>