Barrierefreies Formular

[deostift]

Hallo zusammen,

im Netz gibt es ja einige Beispiele für "barrierefreie" Formulare. Was nervig ist, dass alle Formulare nur in einer Spalte dagestellt werden.

ich möchte aber dass Vorname und Nachname auf einer Höhe stehen, PLZ und Ort sowie Vorwalh und Rufnummer...

Ich hab das auch nur mit CSS (ohne divs oder tables) hinbekommen. NUR rückt der IE das Vornamefeld um 3 Pixel nach Links ein. Mozilla stellt es richtig dar. Hat jemand eine andere Lösung als dem Feld ein margin-left von 3px mittzugeben?

Hier der Code

<style type="text/css">

label.left {float:left; text-align:right; width:200px; margin-right:10px;}

input.left {float:left;}

label.right {text-align:right; float:left; width:100px; margin-right:10px;}

</style>


<form action="foo.php">
<fieldset>
<legend>Kontaktformular</legend>
Felder mit * sind Pflichtfelder<br /><br />

<label for="vorname" class="left">Vorname</label>
<input type="text" id="vorname" class="left" style="margin-left:3px;" value="Vorname" title="Bitte hier den Vornamen eingeben" />

<label for="nachname" class="right">Nachname</label>

<input type="text" id="nachname" value="Nachname" title="Bitte hier den Nachnamen eingeben" />

<br />

<label for="firma" class="left">Firma</label>

<input type="text" id="firma" value="Firma" title="Bitte hier die Firma eingeben" />

<br />

<label for="abteilung" class="left">Abteilung/Fachgebiet</label>

<input type="text" id="abteilung" value="Abteilung/Fachgebiet" title="Bitte hier die Abteilung eingeben" />

<br />

</fieldset>
</form>

 

[Sparks]

Hallo deostift,

also, bei mir (IE 5.50, was anderes hab' ich hier derzeit nicht) beim besten Willen alles auf einer Linie: Vorname, Firma, Abteilung exakt untereinander!

Gruss
Sparks

 

[deostift]

Richtig Wegen dem margin-left:3px - Du Pappnase *zwinker*

Aber ohne margin-left gehts net ... *HEUL*

 

[Quaese]

Hi,

Du kannst beispielsweise eine Browserweiche verwenden. Leitest Du eine CSS-Definition
mit * html ein, so wird diese nur vom IE interpretiert. Auf diese Weise könntest
Du die Einrückung um die 3 Pixel nur für den IE vornehmen.

Deine CSS-Deklaration könnte wie folgt aussehen:

label.left { float: left;
             text-align: right;
             width: 200px;
             margin-right: 10px;}

input.left { float:left;}
* html input.left { margin-left: 3px;}  /* 3-Pixel-Einrückung für IE */

label.right { text-align:right;
              float:left;
              width:100px;
              margin-right:10px;}

Hoffentlich hilft Dir das weiter.

Ciao
Quaese

 

[deostift]

Danke Genau sowas habe ich gesucht. Wusste bisher nicht wie ich explizit was für den IE angeben kann. Hast Du noch mehr solcher "Tricks" auf Lager?

 

[Quaese]

Hi,

es gibt einige Filter in dieser Art. Häufiger benötige ich noch Angaben, die nur von
Browsern mit Mozilla-Engine interpretiert werden können. Dererlei CSS-Definitionen
leite ich mit :root ein.

Einen Überblick über die meisten Filter findest Du hier.

Ciao
Quaese

 

[deostift]

Weisst Du, inwiefern diese Filter auch noch später unterstützt werden? Ich lese bei Gelegenheit die Seiten mal genauer durch. Aber kann es sein, dass z.B. * html nur auf einem IE Bug basiert - also bei einer [ACHTUNG UTOPIE:] verbesserten und CSS konformen IE Version nicht mehr funktioniert?

 

[Quaese]

Hi,

inwiefern die Filter später unterstützt werden, kann ich Dir nicht beantworten. Ich
setzte sie aus diesem Grund auch nur sparsam ein. Aber in einigen Fällen bleibt
einem häufig nichts anders übrig - wie z. B. das von dir beschriebene 3-Pixel-Problem
bei floatenden Elementen, das nur im IE auftritt.

Ciao
Quaese