Problème de mise en forme css sous IE 7

Bonjour à tous,

Sur un site que je suis en train de réaliser j'ai un problème d'affichage sous IE7, mais aucun problème sous firefox!

La partie recherche (div search) ne s'affiche pas bien hélas, alors qu'une fois passé entre les mains du validator css : Aucune erreur ou avertissement (0 ignorés)

J'ai joint les deux images des rendu :
Sous IE 7 :


Sous Firefox 1.5 :



Voilà la css de cette div :

#tabs { background: #fff url(images/bigbox.gif) no-repeat top left; color: #000;  height: 64px; text-align: center; padding: 0 0 0 210px; }
#tabs li { display: inline; height: 45px; }
#tabs li a { float: left; background: #fff url(images/barbg.gif) no-repeat; color: #808080; padding: 7px 0; width: 82px; text-align: center; font-weight: bold; text-decoration: none; }
#tabs li a:hover { background: #fff url(images/barcurrent.gif) no-repeat; color: #000; }	
#tabs li a.current { background: #fff url(images/barcurrent.gif) no-repeat; color: #2C71AE; }	
.key { text-decoration: underline; }

#search { 
	float: left;
	clear: both;
	color: #000;
	background: #fff url(images/searchbg.gif) no-repeat;
	padding: 14px 0 20px 5px;
	width: 500px;
	margin: 5px 0 0 0;
}

Ainsi que la partie HTML :

<div id="tabs">
<ul>	
<li><a href="#" accesskey="m"><span class="key">M</span>usic</a></li>
<li><a class="current" href="#" accesskey="v"><span class="key">V</span>ideos</a></li>
</ul>

<div id="search">
<form method="post" action="?">
<p><input type="text" name="search" class="search" /> <input type="submit" value="Search" class="button" /></p>
</form>

</div>
</div>

Quelqu'un peut-il m'aider ?
Merci d'avance.

Salut

fieldset {
	border: none;
}

Je pense que c'est au niveau des css, faire une classe pour le formulaire...

Bonjour yank,

Je suis aussi persuadé que le problème vient des css, mais je ne comprends pas trop ta réponse :

a écrit :

fieldset {

border: none;

}

Quelles modifications dois-je effectuer selon toi ?
Merci.

Tu devrais essayer

margin:0;

margin: 5px 0 0 0;

J'ai essayé mais ça ne change rien hélas...

Et à ce niveau ?

padding: 7px

de mettre 0

Non plus

HTML

<form action="/switch.php" method="post" id="switcher">
<div id="habillage">
<label for="style">Choisissez un style...</label>
<select id="style" name="style" title="Choisissez un style" tabindex="72">
<option value="bambou">Bambou</option>
<option value="blog">Blog</option>
<option value="jungle">Jungle</option>
</select>
<input type="hidden" name="redirection" value="http://xxxx.xxxx.fr/" />
<input type="submit" value="Changer" title="Changer" tabindex="76" />
</div>
</form>

CSS

#switcher {
	margin : 20px 0 0;
	padding : 0;
}
#habillage label {
	vertical-align : 50%;
	color : #ffffff;
}
#habillage select, input {
	font-family: "Trebuchet MS", Arial, Heveltica, sans-serif;
	font-size: 0.9em;
	font-style: normal;
	font-weight: bold;
	color: #ffffff;
	border: 1px solid #ffffff;
	background-color: #402d20;
}

Si ça peut aider ... Il me semble que j'avais eu le même problème...

Je vais fouiller

Merci Yank

Personne d'autre à une idée pour résoudre ce problème ?

Re tout le monde

J'ai mis en ligne ce projet car j'ai l'impression que le problème vient plutôt d'une la class du dessous....
http://bondereduction-fr.com/comparer-acheter/

En passant de firefox à IE on voit bien le pb...

Bonjour,

A priori c'est ta classe .gboxtop qui te coupe le formulaire en 2 !!
Elle est bien en clear:both mais le problème c'est que ton bloc contenant #tabs à un height défini et ne peux pas suivre le contenu, soit tu modifies le height (tant qu'a faire un overflow: hidden) soit tu rajustes le height de ton bloc search (les paddings peut être).
Teste avec un overflow: hidden sur #tabs tu verras, c'est un cas de dépassement de flottant.

Merci bcp ghost !!

J'ai supprimé la height et mis un overflow: hidden;
Par contre suite à ça sous IE le bouton Rechercher est décallé...

As tu une solution ?

Re,

Essaye d'enlever ton height à input.search, tu auras peut être moins de problème et ton bouton sera toujours centré quelque soit la taille de la police.
Vertical-align: middle peut servir aussi mais interprété différemment sous FF et IE mais les formulaires sont ce qu'il y a de pire à "styler"...

Bonne continuation