28173 sujets

CSS et mise en forme, CSS3

Bonjour,

comme c'est bizarre ! j'ai un soucis de décalage intempestif entre 2 blocs sous IE et pas sous Safari ni FF.
Alors j'ai testé la méthodologie fournie dans la faq (bordure de couleur etc...) et j'ai parcouru le forum, mais je n'ai tj pas trouvé de solution à mon pb. En effet, je ne comprend pas pourquoi la hauteur de mon premier bloc est plus haute sous IE qu'ailleurs, vu que j'ai défini sa hauteur en px et qu'il n'y a aucune marge...

Bref, treve de longs discours, çà se passe ici : http://jpbenadjer.free.fr

ma css (enfin... ce qui concerne mon pb)


body
{
	background: url(images/bg_main.jpg) left top repeat-x #EBEBEA; 
	margin: 0; 
	padding: 0;
	font-family: "Trebuchet MS", Verdana, sans-serif;
	font-size: 11px;
	line-height: 1.5em;
	color: #333
}
	

/* POSITIONNEMENT DES DIVS */

#nav
{
	height: 40px;
	padding: 0;
	margin: 0 auto;
	text-align: center;
}

#head
{
  	background: white url(images/logo.jpg) no-repeat top left;
	width: 600px;
	height: 130px;
	padding: 0;
	margin: 0 auto;
}

/* MISE EN PLACE DE LA NAV PRINCIPALE */

#nav ul
{
	padding: 0;
	margin: 0;
	width: 100%;
}

#nav li
{
	display: inline;
    margin:0;
    padding:0
}



#nav a
{
	text-decoration: none; 
	color: #ffffff; 
	font-weight: bold;
	text-transform: lowercase
}


Merci Smiley smile
Salut.

Bon à savoir : IE6 ne comprend pas la propriété height comme étant une hauteur fixe mais comme une hauteur minimale (min-height pour les autre navigateurs). Donc si le contenu est suffisamment long, et même si la hauteur est fixée en px, le bloc va s'allonger dans IE Smiley cligne
arf, je peux pas supprimer les espaces car le contenu est généré par un CMS...

et le pb n'est pas le décalage des <li> les uns par rapport aux autres, mais un décalage vertical.

merci quand meme Smiley smile

EDIT
J'ai réussi à virer tout espace dans le code concernant les balises <ul> et <li>, et effectivement çà marche. Par contre, le code est vraiment moche maintenant... Merci en tout cas.
Modifié par KorAmA (24 Nov 2006 - 12:12)
Tu as un décalage des <li> les uns par rapport aux autres (un CTRL+A sur ta page te fera apparaître les espaces entre tes <li>), ceux-ci entraînant le décalage vertical.

Si tu ne peux pas les supprimer dans le code HTML une autre solution est de mettre un font-size:1px; à ton #nav ul Smiley smile