28173 sujets

CSS et mise en forme, CSS3

Bonjour à tous,

Voila mon problème :


* {margin:0; padding:0;}
body {padding:0; margin:0; background-color:#9CBDB2; font-family:arial; behavior:url(csshover.htc);}/*WinIE behavior call*/
div#global {width:770px; margin:0 auto 0 auto; padding:auto;}
div#header {height:150px; background-image:url(images/banniere1.gif);}
div#nav {width:770px; float:left; padding:0 0 0 0; margin:0; height:1.5em; background-color:#F28E00; color:#FFFFFF; font-size:small; vertical-align:middle;
		background-image:url(images/img_menu.gif); background-position:right; background-repeat:no-repeat;}
div#nav ul {margin:0; padding:0;}
div#nav li {position:relative; list-style:none; margin:0; float:left; width:7em; line-height:1.5em; text-align:center;}
div#nav li:hover {background:#fab14a;}
div#nav li.submenu {background:#F28E00;}
div#nav li.submenu:hover {background:#fab14a;}
div#nav a {display:block; padding:0; text-decoration:none; width:7em; color:#FFFFFF; font-weight:bold;}
div#nav>ul a {font-weight:normal;}
div#nav>ul ul a {font-weight:normal;}
div#nav ul ul {position:absolute; display:none; left:0;}
div#nav ul ul li {width:21em; background:#f28e00; text-align:left; padding-left:0.5em;}
div#nav ul ul a {width:21em;}
div#nav ul.level1 li.submenu:hover ul.level2 {display:block;}
div#main {background:#fff; padding:1em 1em 1em 3em;}
h1 {color:#f28e00; font-size:large;}
p {color:#548AC8; font-size:small; margin:0.5em 0 0.5em 0;}


J'ai donc 3 DIV qui se suivent (#header, #nav et #main)... sous IE l'enchaînement fonctionne bien : à la fin du header, il y a le nav puis à la fin du nav commence le main ...

Ailleurs (Safari et FireFox), le nav et le main se superposent (le main est en dessous) avec 1 ou 2 px de décalage ...

C'est compliqué à expliquer mais c'est la première fois que ça m'arrive ...

http://www.hopale-formation.com/Test/index.htm

Merci d'avance de votre aide ...