Flux, float, z-index et safari... [resolu]

Bonjour

Je découvre le CSS et les feuilles de style, et j'ai un probleme avec safari:
j'ai un menu par onglet en haut avec un paddind assez important de manière a avoir flottant au dessus de la partie gauche du menu un formulaire de recherche rapide.
ceci fonctionne bien avec firefox mais avec safari le fond du menu passe par dessus le font du formulaire de recherche qui pourtant flotte et (je l'ai rajouté après, à un index supérieur à celui du menu)
PS: voici 2 capture d'écran pour vous aidez à comprendre ce que je veux dire:
avec firefox:


http://img403.imageshack.us/img403/548/captureguidancemozillafirefox0.png

avec safari (en vrai c'est firefox et j'ai trafiqué la capture pour montré ce que ca donne avec safari)
http://img63.imageshack.us/img63/1916/captureguidancemozillafirefox7.png

ma feuille de style:

.recherche {
z-index: 2;  
float: left;   
background-color: #FFF;
text-align: center;
width:15em;
border:inset 2px #F1F0EC;
padding-right:0px;
margin-top: -1em;
}

.recherche h1 {
z-index: 2;
margin-top:0px;
padding: 0.5em;
background-color: #EAE8E3;
font-size: 1.3em;
}

#menu {
    z-index:1;
    float:left;
    width:100%;
    margin:0em 0em 0em 0em;
    padding: 0em 0em 0em 0em;
    background:url("./images/interface/bg.png") repeat-x bottom;
    font-size:93%;
    line-height:normal;
    overflow: hidden;
}

voila donc je suis un peu ennuyé
sinon je profite de mon premier post sur ce forum pour remercier alsacréation de m'avoir fait découvrir l'importance des standards du web et la puissance du css (mais je maitrise pas encore, et comme dit pirelli...)

edit: le site est visible ici
Modifié par yobuntu (19 Apr 2006 - 09:19)

Content de voir un ubuntiste traîner par ici

Quelques petites remarques :
- pense à utiliser le balisage BBcode quand tu donnes du code HTML ou CSS, ça facilite la leccture ;
- tu donnes le code CSS, mais pas le HTML qui va avec, du coup on ne sait pas trop à quoi les règles CSS utilisées s'appliquent ;
- en règle général, le nec plus ultra de la demande de coup de main sur ce forum c'est une description détaillée du problème rencontré, et une page en ligne permettant non seulement de le visualiser, mais aussi de le tester avec divers navigateurs, voire même de tester des solutions en direct avec l'extension webdevelopper toolbar pour Firefox*, par exemple...

Pour ton problème, je n'ai pas toutes les données mais je suppute une petite subtilité dans la gestion des float. Si tu n'as pas l'habitude du comportement des éléments flottants, je te conseille la ressource suivante :
http://web.covertprestige.info/test/11-page-fluide-avec-trois-colonnes-1.html

----
* Indispensable. Version française par ici :
http://joliclic.free.fr/mozilla/webdeveloper/
Modifié par mpop (18 Apr 2006 - 21:27)

merci pour cette prompte réponse, j'ai corrigé ce que j'ai pu dans mon premier post

et je rajoute un peu de code html:
un menu très inspiré du tuto sur les portes coulissantes

  <div id="menu">
    <ul id="actus">
      <li id="li-actus"><a href="./index.php?contenu=actus">Actualités</a></li>
      <li id="li-forma"><a href="./index.php?contenu=forma">L'offre de formation</a></li>
      <li id="li-infos"><a href="./index.php?contenu=infos">Informations utiles</a></li>
    </ul>
  </div>

la recherche qui flotte à gauche

  <div class="recherche">
    <h1>Recherche de formation</h1>
    <form method="POST" action="./index.php?contenu=resultatrecherche&amp;action=recherche" >
      <p>Type de formation <p>
      <input type="text" value="nom de la rubrique" name="typeforma">
      <input type="submit" value="Rechercher" name="search">
    </form>
    <form method="POST" action="./index.php?contenu=actus&amp;action=adv_serch" >

      <input type="submit" value="Recherche avancée" name="adv_search">
    </form> 
  </div>

enfin j'ai suivi le lien vers les pages fluide à trois colones, et mon problème serait un peu comme si le background des colones 1 et 2 apparaissait sous le background du centre.

edit: après comparaison rigoureuse avec le site le probleme vient peut être de "overflow hidden" sur mon menu qui de toute facon n'a pas grand chose à faire la (vestige d'une autre facon de faire) je teste demain matin dès que j'ai accès à safari.

Merci pour l'extension webdevellopper, sinon pour le respect des standard y a celle la qui est pas mal non plus: html validator 0.7.9 basée sur tidy

Edit: bingo, le pb vennait bien de overflow: hidden
a dégager => maintenant safari se comporte correctement
Modifié par yobuntu (19 Apr 2006 - 09:01)