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
- Allgemeines Lösungsmöglichkeiten
- Hacks für den Internet Explorer
- Die letzte Rettung
2. Hintergrundfarbe der <fieldset>-Elemente ist zu hoch
Hierbei handelt es sich um den schon mehrmals erwähnten Fieldset Bleed Bug, von dem der Internet Explorer 6 und 7 offiziell und der 8
und 9 auch noch (bei mir) betroffen sind. Eine genauere Erläuterung dazu findet ihr an dieser
Stelle. Hier gibt es erst mal nur die Lösung (ie.css).
fieldset
{
position: relative;
margin: 10px 0 20px 0;
}
legend
{
position: absolute;
top: -10px;
left: 10px;
}
.ie
{
padding-top: 10px;
}
Wichtig ist, dass ihr allen(!) Elementen, die als Erstes auf das <legend> folgen, die Klasse ie zuweist.
Schaut euch gegebenenfalls dazu mal den Quellcode der formular.htm im Lösungsordner an.
3. Textfelder stehen unterhalb der <label>-Elemente
Dieses Problem tritt im Internet Explorer 6 sehr gerne dann auf, wenn man ein Element floated, das darauf folgende aber nicht. Darum hilft
hier ein einfacher Hack (ie.css).
* html fieldset.adresse input
{
float: left;
}
Leider ist jetzt das Feld für den Ort zu klein, aber auch das kann man schnell korrigieren.
* html fieldset.adresse input.ort
{
width: 241px;
}
4. legend-Elemente stehen zu weit rechts
Hier greift man auf den üblichen Pfusch mit negativen Margins zurück. Dabei benötigen wir zwei separate Angaben. Eine für den 6er und eine für den 7er.
* html legend
{
margin-left: -8px;
}
*+html legend
{
margin-left: -8px;
}
5. Und was ist mit dem Rest
Nun, da sieht es erst mal finster aus. Denn mit den gängigen Mitteln geht erst mal gar nichts. Aber Gottlob gibt es auch hier einen Rettungsring, an dem wir uns klammern können.