Bonjour à tous

Je suis en train de personnaliser un formulaire avec le plugin jqueryui tab (http://jqueryui.com/tabs/).

Cependant, j'ai un soucis avec l'éxécution qui me plante le design de certains champs select. Voici mon code html:
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<div id="tabs">
<ul>
<li><a href="#tabs-1">Carte d'identité</a></li>
<li><a href="#tabs-2">Coordonnées de communication</a></li>
<li><a href="#tabs-3">Listes des Fonctions</a></li>
</ul>
<div class="tabs" id="tabs-1">
<dl>
<dt><label for="MemberName">Nom de famille : </label></dt>
<dd><input name="data[Member][name]" size="20" maxlength="250" type="text" id="MemberName"/></dd> </dl>
<dl>
<dt><label for="MemberSurname">Prénom : </label></dt>
<dd><input name="data[Member][surname]" size="20" maxlength="250" type="text" id="MemberSurname"/></dd> </dl>
<dl>
<dt><label for="MemberAdresse">Adresse : </label></dt>
<dd><textarea name="data[Member][adresse]" size="20" cols="30" rows="6" id="MemberAdresse"></textarea></dd> </dl>
<dl>
<dt><label for="MemberCodePostal">Code postal : </label></dt>
<dd><input name="data[Member][code_postal]" size="20" maxlength="5" type="text" id="MemberCodePostal"/></dd> </dl>
<dl>
<dt><label for="MemberVille">Ville : </label></dt>
<dd><input name="data[Member][ville]" size="20" maxlength="250" type="text" id="MemberVille"/></dd> </dl>
<div class="clear"></div>
</div>
<div class="tabs" id="tabs-2">
<dl>
<dt><label for="MemberMobile">Téléphone Mobile : </label></dt>
<dd><input name="data[Member][mobile]" size="20" maxlength="12" type="text" id="MemberMobile"/></dd> </dl>
<dl>
<dt><label for="MemberFixe">Téléphone fixe : </label></dt>
<dd><input name="data[Member][fixe]" size="20" maxlength="12" type="text" id="MemberFixe"/></dd> </dl>
<dl>
<dt><label for="MemberFax">Téléphone Fax : </label></dt>
<dd><input name="data[Member][fax]" size="20" maxlength="12" type="text" id="MemberFax"/></dd> </dl>
<dl>
<dt><label for="MemberEmail">Votre adresse mail : </label></dt>
<dd><input name="data[Member][email]" size="20" type="text" id="MemberEmail"/></dd> </dl>
<div class="clear"></div>
</div>
<div class="tabs" id="tabs-3">
<dl>
<dt><label for="FonctionFonction">Selectionnez une fonction: </label></dt>
<dd>
<select name="data[Fonction][Fonction]" id="FonctionFonction">
<option value="">Choisissez</option>
<option value="1">Fonction principale</option>
<option value="2">Fonction secondaire</option>
<option value="3">Fonction associative</option>
<option value="4">Fonction régionale</option>
</select>
</dd>
</dl>
<input type="hidden" name="data[Member][Groups]" value="1" id="MemberGroups"/> <dl class="submit">
<div class="submit"><input type="submit" value="Enregistrer les modifications"/></div></form> </dl>
<div class="clear"></div>
</div>
</div>

Voici ce que j'obtiens en aperçu:


Cependant, si je met le tab "liste des fonctions" (cf imprim ecran) en première position, pas de soucis. Regardez:


j'ai testé avec mes plugins chrome (webdev, firebug) et je ne trouve rien. C'est pour cela que je pose ici. Je ne comprend pas d'où vient le problème.
J'espère que je suis dans la bonne partie car pour moi, cela vient d'un soucis css et non jquery pur.
Si vous avez des questions, n'hésitez pas.

lemirandais