firefox user: Tag Positionen vertauschen

Hallo liebe Community

Ich arbeite zur Zeit an einer Webseite in der ich unter anderem auch 2 jquery plugins benutze: validation & datepicker.

Nun habe ich aber leider einen kleinen Konflikt zwischen den beiden, aber vielleicht zuerst einmal den betreffenden html code:

  
<td>  
  <input type="text" name="expenseDate" id="expenseDate" />  
  <img class="ui-datepicker-trigger" src="./img/calendar.gif" alt="Calendar" title="Calendar"/>  
</td>  

Soweit so gut, der image tag wird allerdings vom datepicker plugin per javascript ins html reingeschrieben .. was aber eigentlich ganz gut ist.

Nun, wenn ich das Formular absenden will und ich noch kein Datum eingegeben habe, meldet mir das validation plugin die entsprechende Meldung und schreibt diese gleich neben dem betreffenden input tag, was dann wie folgt aussieht:

  
<td>  
  <input type="text" name="expenseDate" id="expenseDate" />  
  <label class="error" for="expenseDate" generated="true">This field is required.</label>  
  <img class="ui-datepicker-trigger" src="./img/calendar.gif" alt="Calendar" title="Calendar"/>  
</td>  

Die Anzeige ist, wie ihr euch denken könnt, dann etwas unschön da zuerst das input tag kommt, gefolgt von der Fehlermeldung und dann das Bild um den Kalender zu öffnen.

Nun würde ich aber gerne per css das <label> tag mit dem <img> tag austauschen (positionsmässig) oder aber dem <label> tag einen grossen margin-left verpassen und dem <img> tag sagen, er solle diesen ignorieren ..

Tut mir Leid wenn ich mich nicht allzu verständlich ausgedrückt habe, allerdings war ich nie der beste Erklärer .. Aber einfach gesagt:
Ich will die Anzeige von [input] [fehlermeldung] [img] zu [input] [img] [fehlermeldung] ändern. - Über css, da ich die css Eigenschaften von [img] bzw. [fehlermeldung] selber definieren kann.

Ich denke mal, dass so etwas per css möglich ist, nur sind meine Kentnisse in diesem Bereich nicht vertieft genug .. aber für etwas gibt es ja das Internet :)

so long
firefox user

  1. Du kannst mit absoluter Positionierung Dein Ziel erreichen - allerdings würde ich Dir davon abraten, mit CSS die Aufgaben, die eigentlich das JS übernehmen sollte, zu emulieren.

    Ich weiß nicht, welches Validation-Plugin Du verwendest, aber eine entsprechende Anpassung ist sehr einfach: an der Stelle, an der das label eingefügt wird, musst Du nur die Einfügung so modifizieren, dass ein img-Tag mit der Klasse ui-datepicker-trigger übersprungen wird.

    Gruß, LX

    --
    X-Self-Code: sh:( fo:) ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
    X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
    X-Will-Answer-Email: Unusual
    X-Please-Search-Archive-First: Absolutely Yes