28173 sujets

CSS et mise en forme, CSS3

Bonjour, toujours dans le cadre de création d'un blog professionnel (voir ici http://forum.alsacreations.com/topic-4-25750-1-Hauteur-fluide-pour-une-barre-laterale.html),
je souhaite rajouter un menu horizontal sous la bannière d'en tete.
Dans ce menu figurent des liens vers des pages connexes.

Pour faire le menu j'utilise classiquement l'attribut display:inline des balises <ul> et <li>. Jusque là tout va bien. Mais j'aimerais aussi rajouter la boite de recherche de la forme suivante :

	<div id="search">
		<form action="/blog/index.php" method="get">
		
			<h2><label for="q">Rechercher</label></h2>
			<p class="field"><input name="q" id="q" type="text" size="10"
			value="" accesskey="4" />
			<input type="submit" class="submit" value="ok" /></p>
		
		</form>
	</div>
	


La classe "search" a les memes propriétés que le menu de navigation (#nav-box, voir ci-dessous), mis à part qu'il est positionné à gauche, alors que le menu des liens est aligné à droite.


#nav-box {
        margin : 0;
        padding : 0;
        background-color: transparent;
        border-bottom: 1px dashed #3A6F06;
        font-weight : bold;
        font-size : 0.9em;
        text-align: right;
}

#nav-box ul {
        margin : 0;
        margin-top: -2px;
        margin-left: 12px;
        margin-right: 2px;
        padding : 5px 1em 5px 0;
        list-style-type : none;
}

#nav-box ul li {
    display: inline;
    padding : 5px 0;
}



Ma feuille de style fonctionne parfaitement sous firefox, mais sous IE, la balise "form" est attribuée d'une marge inférieure supplémentaire que je n'arrive pas à enlever.

Est-ce normal ? Comment faire pour supprimmer cette marge ?

Merci pour votre aide Smiley smile
Salut Luxtin

Je ne sais pas si tu as fini par résudre ton pb, mais moi, je viens de trouver: il suffit de définir un style avec marges et paddings nuls pour ta balise form.

<form id="style" ...


et

.style
{margin: 0;
padding: 0;
}