HTML / CSS - Praxistutorial 4 - Lösungsmöglichkeiten
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. Möglichkeiten
Wie ich schon zu Beginn sagte, gibt es diesmal keinen kompletten Lösungscode. Ich konzentriere mich hier nur auf die, die man relativ schnell beseitigen kann. Kommen wir nun zu denen, wo es auch ohne spezielle Hacks funktioniert.
3. Rahmen um <radio>-Elemente entfernen
Die einfachste Lösung liefe über den so genannten Attributselektor.
input[type="radio"]
{
border: none;
background: none;
}
4. Die unterschiedlichen Upload-Felder
Da kann man leider herzlich wenig tun. Außer im IE lassen alle anderen Browser da praktisch keine Formatierungmöglichkeiten zu. Und das ist auch ganz gut so, da es der Sicherheit dient. Denn sonst könnte man damit Schindluder treiben.
5. 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. Und vergesst um Himmels Willen nicht die
Conditional Comments.
<!--[if lt IE 10]>
<link rel="stylesheet" href="ie.css" type="text/css" />
<![endif]-->
zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt