HTML / CSS - Praxistutorial 4 - Hacks für den Internet Explorer
1. Die Abschnitte
- Überblick
- Standardanweisungen
- Das Formular
- Abschnitte zusammenfassen
- Allgemeine Formatierungen Teil 1
- Allgemeine Formatierungen Teil 2
- Adresse und Anstellung
- Daten und Kenntnisse
- Mitteilung und Buttons
- Darstellungsunterschiede
- Lösungsmöglichkeiten
- Die letzte Rettung
2. Die Wurzel allen Übels
... ist die unterschiedliche Darstellung von Formularelementen in den einzelnen Browsern. Und dagegen kann man sehr oft herzlich wenig machen. Das Problem ist sozusagen gottgegeben. Allerdings gibt es eine Möglichkeit, mit der man schon Vieles erreichen kann.
3. Grundsätzliches
Wenn man mit klassischem CSS nicht mehr weiterkommt, so muss man entweder auf JavaScript oder PHP zurückgreifen. Da das Vorgehen
(fast) identisch ist, sollte man PHP nehmen, da schon alles serverseitig abgearbeitet wird. Dafür erstellt man eine Datei, die zum
Beispiel browser.php
heißt. Und die bindet man nun als CSS-Datei ein. Ja, das funktioniert wirklich.
<!-- Einbindung in HTML-Datei -->
<link rel="stylesheet" href="browser.php" type="text/css" />
/* Einbindung in CSS-Datei */
@import url(browser.php);
4. Die Datei
Zunächst mal sollte man einen korrekten Header senden.
<?php
header('Content-Type: text/css');
?>
Anschließend nimmt man dann die entsprechenden Unterscheidungen vor und gibt den gewünschten CSS-Code aus. Dies gilt ganz besonders für alle unterschiedlichen Abstände und Höhen der einzelnen Elemente. Die muss man tatsächlich für (fast) jeden Browser einzeln setzen. Aber das macht ihr mal schön selbst.
// Unterscheidung nach Browser
if (strpos($_SERVER['HTTP_USER_AGENT'], 'Firefox')
{
// Hier weitere Unterscheidung nach Versionen
if (...)
{
// Ausgabe der CSS-Anweisungen
echo 'option {padding-left: 3px;}';
}
else
{
...
}
}
else if (...)
{
}
Wichtig
Bei dieser Vorgehensweise braucht ihr euch keine Sorgen um dieses Problem machen. Das tritt in diesem Fall nicht auf, wenn ihr schon eine Ausgabe gesendet habt.
5. Fazit
Man kann tatsächlich Formulare sauber und ohne Layouttabellen aufbauen und per CSS formatieren. Leider machen uns die Browserhersteller immer wieder einen Strich durch die Rechnung, indem sie die Darstellung von Formularelementen individuell umsetzen. In diesem Fall geht es ausnahmsweise nicht nur um die Machwerke von Microsoft. Nein! Man muss auch mal die anderen Firmen an den Pranger stellen. Ach ja, alles was ihr nicht formatiert bekommt, geht einfach nicht, weil die Browser es nicht zulassen. Isso.