[Résolu] Vide non désiré en haut d'écran sous firefox

Bonjour à toutes et tous

Sous firefox et opéra, j'ai un vide indésiré en haut de l'écran et je n'arrive pas à en trouver la cause. ... sous IE je n'ai pas ce problème, j'ai toutes mes marges à "0", j'ai fais divers, tests par exemple, en virant les "float" ça ne change rien, quelque chose m'échappe, mais je ne vois pas quoi.

Merci d'avance si quelqu'un peut m'aider à trouver une solution, voici l'adresse des pages en tests : http://www.chroniques-taoistes.com/site/

voici le css partiel :

a écrit :
body {
width:100%;
background:#d9be91 url(../IMG/deco/bg_ct2.jpg) no-repeat fixed 730px bottom;
margin:0;
padding:0;
font-family: Tahoma, Arial, Verdana, sans-serif;
font-size:1em;
color: #694f23;
}

#conteneur {
width:780px;
background:#faf4ea;
margin:0;
padding:0;
}

/* Affichage de l'entete */

#header {
width:100%;
height:250px;
margin:0;
padding:0;
}

/* Affichage du sommaire du site */

#navigation {
float: left;
width:100px;
margin:30px 0 0 25px;
padding:0;
}

#navigation ul {
list-style:none;
margin:0;
padding:0;
}

#navigation li {
font-size:0.8em;
margin:0 0 0.4em 0;
padding:0;
color:#80590e;
}

#navigation a:hover {
}

Modifié le 23 Nov 2004 - 09:08

J'ai un code source assez curieux chez moi :

<div class="non-voyant"><!-- Titre en texte pour les personnes non-voyantes -->
      <h1>Chroniques tao&iuml;stes</h1>
      <br />

<b>Warning</b>:  main(raccourcis.php): failed to open stream: No such file or directory in <b>/home/chroniqu3/www/site/CACHE/1/site-.f3a33a</b> on line <b>35</b><br />
<br />
<b>Warning</b>:  main(): Failed opening 'raccourcis.php' for inclusion (include_path='.:/usr/local/lib/php') in <b>/home/chroniqu3/www/site/CACHE/1/site-.f3a33a</b> on line <b>35</b><br />
 <!-- Raccourcis pour non-voyants -->

    </div><!-- fin de non-voyant -->

Mais dans tous les cas, ton problème est dû à des marges puisqu'il suffit d'appliquer la règle suivante pour supprimer ton vide :

* {margin:0}

EDIT : trouvé !

form {margin:0}

Oupssss ! merci pour ton aide Raphaël,

- pour l'erreur que tu as détectée dans le code, il s'agissait d'un fichier d'appel spip pour un morceau de la page, j'avais oublié de le transférer sur le site, c'est corrigé.

Le message n'apparaissait pas à l'écran à cause d'un "display:none".

- pour le décalage, c'est bien le formulaire qui provoque cet espace :
- si je l'enlève, plus de vide
- si je l'affiche avec les marges à "0" le vide revient

Voici le css actuel du formulaire :

a écrit :
#formrecherche {
float:left;
width:300px;
margin:0;
border: 1px solid #FF0000;

}

#formrecherche label {
font-size:0.8em;
margin:0 0 3px 0;
}

merci d'avance si quelqu'un à une idée, d'autant que le formulaire doit s'afficher plus bas dans cet espace par rapport à l'image de fond qui n'est pas encore prête
Modifié le 22 Nov 2004 - 15:47

Trouvé!

La balise <div> est fille de <form>, si tu inverses pas (plus) de problème

(fille: incluse, "nested")

Càd inverser les lignes 77-78 d'une part et 81-82 d'autre part.

           <div id="formrecherche">
          <form method="get" action="recherche.php3">
             <label for="recherche">Recherche </label>
             <input name="recherche" id="recherche" accesskey="4" value="Accès clavier touche 4" tabindex="4" onfocus="this.value=''" type="text">
          </form>
            </div>

EDIT: du coup, c'est bieng môche sous IE6 ... Bah bonne nuit donc!

Felipe a écrit :
Trouvé!

La balise <div> est fille de <form>, si tu inverses pas (plus) de problème

Non car ensuite tu te retrouves avec un code où <form> contient directement des <input>, ce qui n'est pas valide :

Dominique a écrit :
- si je l'affiche avec les marges à "0" le vide revient

Pourtant je t'ai donné la solution, non ?

form {margin:0}

vi vi ! merci Raphaël.... seulement, il faut que j'apprenne à mieux lire, je ne sais pas pourquoi, j'ignorais complètement la balise "form". puis après d'autres essais hier soir et ta réponse en mémoire, j'ai fini par trouver

La balise "form" a, sous certains navigateurs une marge haut par defaut à partir de la fenêtre du navigateur, c'est pour ça qu'elle entraîne avec elle les div qui la contienne. Donc il faut une marge à "0" rien que pour elle.

Ensuite, pour placer le formulaire à l'endroit voulu, j'ai placé une marge à la balise div qui suit dans la code (voir ci-dessous). Le résultat est visible à l'adresse indiquée plus haut. Merci à tous pour votre aide !

form {
	margin:0;
	padding:0;
}


#formrecherche {
	float: left;
	width:300px;
	margin:150px 0 0 180px;
}

Han, c'est pas parce que la div et le form sont étroitement liés que c'est la même chose, mea culpa également

Raphael a écrit :

Non car ensuite tu te retrouves avec un code où <form> contient directement des <input>, ce qui n'est pas valide :

C'est un détail quoi