28173 sujets

CSS et mise en forme, CSS3

[Résolu]Un hack juste pour firefox ? -> aligner des input en vertic

Bonjour à tous,

J'ai un soucis avec une barre de recherche, elle se comporte bien sur tous les navigateurs que j'ai testé (ie6, ie7, opera) mais elle possède un décalage sur firefox. Voyez plutot :

Voila l'affichage que j'ai sous IE6, IE7 et Opera ca marche comme je veux :

http://img172.imageshack.us/img172/4209/searchothershf3.png

Et voila l'affichage sous firefox, notez le petit décalage du bouton :

http://img245.imageshack.us/img245/5210/searchffoi8.png

Voila mon html :


<!-- Search box -->
<form action="/fr/search/node"  method="post" id="search-theme-form">
  <div><label for="edit-search_theme_form_keys">Recherche : </label>
    <input type="text" maxlength="128" name="search_theme_form_keys" id="edit-search_theme_form_keys"  size="15" value="" />
    <input type="submit" id="submit-button" name="op" value="Go"  />
    <input type="hidden" name="form_id" id="edit-search-theme-form" value="search_theme_form" />
    <input type="hidden" name="form_token" id="a-unique-id" value="f87dc168cecd9b0bca64eff3b342fe10" />
  </div>
</form>


voici le CSS

/* Search block */
#search-theme-form { position:absolute; bottom:6px; right:10px; }
#search-theme-form input { border:1px solid #185701; background:#bbdea8; }
#search-theme-form input#edit-search_theme_form_keys {  }
#search-theme-form  #submit-button { position:relative; right:0.4em; height:18px; padding:0 0.1em; }


Donc un simple top:1px; à #search-theme-form #submit-button suffit pour que l'affichage soit bon sur firefox, le problème, c'est que je n'ai pas trouvé de hack juste pour ce dernier (pourtant j'ai cherché je vous assure !).

Donc comment faire cela ?

D'avance merci

zmove
Modifié par zmove (16 Apr 2007 - 10:37)
Florent V. a écrit :
Bonjour,

Tu as essayé de gérer l'alignement vertical avec vertical-align (à appliquer sur les input, pas sur le conteneur) ?

Pas sûr que ça permette d'avoir le bon résultat, mais c'est à tenter.
http://wiki.media-box.net/documentation/css/vertical-align


Mais mais..... mais c'est génial !!! Smiley biggrin

Ca marche niquel chrome, merciiiiiiii Smiley smile

Sujet résolu

PS : j'ai changé un peu le titre du sujet car il ne correspondait plus à la solution que tu as trouvé ^^
Modifié par zmove (16 Apr 2007 - 10:38)
Bonjour à tous,

J'aimerais connaître la solution car j'ai le même souci avec FF. J'ai bien tenté avec vertical-align, mais mon bouton ne s'aligne pas avec mon input text.
J'ai même essayé de remplacer le bouton par une image, mais c'est toujours pareil.

Voilà ce que ça donne :
Firefox :
http://img182.imageshack.us/img182/8927/fffw4.gif

IE :
http://img527.imageshack.us/img527/9660/iekh1.gif

Pour une fois que c'est FF qui donne du fil à retordre, j'avoue que j'ai du mal.

Voici mon code : 
<form action="" method="post" id="form-formulaire_rechercher">
<input type="text" name="rechercher" id="form-text_rechercher" value="Recherche" />
<input type="submit" name="rechercher-btn" id="form-btn_rechercher" value=">" />
</form>

Et la CSS :
#form-text_rechercher {
	border: 1px solid #424242;
	background-image: url(../images/rechercher.gif);
	background-position: 3px 1px;
	background-repeat: no-repeat;
	padding-left: 20px;
	height: 20px;
}

#form-btn_rechercher {
	margin-top: 0px;
	background-color: #FFFFFF;
	border-top: 1px solid #424242;
	border-right: 1px solid #424242;
	border-bottom: 1px solid #424242;
	border-left: 1px solid #FFFFFF;
}


Merci beaucoup pour vos éclairages !

uado.
Le sujet n'est pas clos pour moi, regardez le message juste au dessus SVP Smiley decu

Merci, uado.
Modifié par uado (15 May 2007 - 19:07)
Bonjour,

solution pour hacker seulement firefox:


attribut:valeur_firefox [#red]!important[/#];
attribut:valeur_ie6&ie7 [#red]!important[/#][#darkblue]![/#];


dc juste remettre !important en ajoutant un point d'exclamation à la fin...
Les hacks, céleumal.
Lire la FAQ à ce sujet. Lire aussi la partie sur les commentaires conditionnels.

Sur ce, je ferme ce sujet. uado, si tu repasse par là: dire «Le sujet n'est pas clos pour moi» ne sert à rien, il aurait mieux valu créer un nouveau sujet (quitte à faire référence à celui-ci via un lien). Il est logique qu'on obtienne peu de réponses quand on poste dans un sujet marqué comme résolu...

Sur ce, je ferme ce sujet pour éviter de futurs embouteillages. Smiley cligne
Sujet clos
Aller à