[ résolu] Mise en page foireuse sous IE

Bonjour à tous,


je débute en CSS. J'ai lu et je tente de mettre en oeuvre. Comme plusieurs personnes avant moi, tout marche à merveille sous FFox et Safari (je suis sur Mac) et quand vient le test IE... catastrophe.

Si quelqu'un avait la gentillesse de me mettre sur la piste de mes erreurs de code (je sais que c'est ça mais comme je maîtrise mal voire très mal).

voilà l'adresse où voir mes prouesses :

http://www.kimlico.com/TC/TCmenu_haut.html

le code :

page elle-même

/* BODY */
body {
	margin: 5px auto;
	padding: 0;
	border: 0;
}
img {
	border:none;
}

/* DIVS NAVIGATION */

#principal {
   width: 780px;
   margin: auto;
   padding: 0;
}

#entete {
position:relative;
width:780px;
height:140px;
float:left;
background:url(design/Layout/header/ht_degrade.png);
background-repeat:no-repeat;
}

#selects {
width:500px;
float:left;
margin-left:10px;
margin-top: 6px;
}

#connexion {
float:right;
width:250px;
margin-top:5px;
margin-right:10px;
}

#imputation {
width:60px;
float:left;
margin-left:10px;
margin-top:10px;
}

#logo {
width:240px;
float:left;
margin-top:30px;
}

#separateur {
width:780px;
float:left;
}

Les menus sous forme de listes

/* ADMINISTRATION */

#admin {
	position:relative;
    float:right;
    width:700px;
    font-size:93%;
    line-height:normal;
    }
	
 #admin ul {
 	float:right;
    margin:0;
	margin-right:15px;
    padding:0px 0px 0px;
    list-style:none;
    }
	
#admin li {
    float:left;
    background:url(design/Layout/Menu/onglets/admin/left_admin.png)
      no-repeat left top;
    margin:0;
    padding:0 1px 0 4px;
    }
	
#admin a {
    /* Pour IE Mac uniquement \*//*/   
    float:left;
    /**/
    display:block;
	background:url(design/Layout/Menu/onglets/admin/right_admin.png)
      no-repeat right top;
    padding:6px 10px 6px 8px;
	font-family:Verdana;
	font-size:10px;
    text-decoration:none;
    font-weight:normal;
    color:#FFFFFF;
    }
	
#admin a:active {
    color:#3366CC;
    }
	
#admin a:hover {
    color:#3366CC;
    }
	
#admin #current {
    background-image:url(design/Layout/Menu/onglets/admin/left_admin_ON.png);
    }
#admin #current a {
    background-image:url(design/Layout/Menu/onglets/admin/right_admin_ON.png);
    }

/* MenuTC1 */

#menuTC1 {
	width:450px;
    float:right;
	margin-top:12px;
	margin-right:10px;
}

 #menuTC1 ul {
	float:right;
	margin:0;
    list-style:none;
    }
	
#menuTC1 li {
    float:left;
	margin:0;
    padding:0 0 0 5px;
    }
	
	
/* ---------- MINI MENU --------------- */

#mini_menu {
	width:200px;
    float:right;
	margin-right:10px
}

#mini_menu ul {
	float:right;
    margin:0;
	list-style:none;
}

#mini_menu li {
	float:right;
	margin:0;
	padding:0 2px 0 0;
}

Voilà. Il y en a encore une mais de texte et ça même si je ne suis pas encore Picasso, c'est moins problématique.

Merci à l'avance pour votre aide.

Aurélia.
Modifié par Fugugirl (13 Nov 2006 - 18:16)

bonsoir,

IE applique par defaut une hauteur de 1em a tout elements vide et de type block (ou flottant , ou absolute ou qui ont le "haslayout" )

Pour changer cela il suffit de redefinir la taille de police a la hauteur voulue (ou de mettre overflow:hidden , ce qui risque de caché tout ou partie d'element ou texte posés sur la "baseline" )

#separateur {
width:780px;
float:left;
font-size:6px; /* s'applique au span contenu par effet de cascade */
}

++

Merci pour ta réponse. Je ne comprends pas encore tout ce qu'implique ta réponse. Seul la div de séparateur nécessite cet ajout ??? ou toute autre div flottante presque vide ??

bonjour,

je n'ai releve que ça sur ta page , et je dois avoué qu'il etait bien tard , je ne suis pas allez plus loin (un petit souci peut-etre avec la ligne de pointillées qui n'apparait pas ).

Generalement , lorsque tu veut dimensionné une balise de type block (ou qui herite de ce comportement par le biais d'une regle css) il te faut garder a l'esprit qu'ele ne fera pas moins d'1em de hauteur dans IE (1em = taille de police , environ 14px en generale , mais cela depend du reglage de police et de taille d'affichage de IE) , alors il suffit de lui appliquer une taille de police equivalente a la hauteur recherché .

++

Merci de ton aide quoiqu'il en soit. J'ai déjà fait la petite modif et ça améliore très nettement ma page.

Bonne journée à tous.