28220 sujets

CSS et mise en forme, CSS3

[Résolu]Taille fixe d'un div sous IE6

Bonjours à tous

Après avoir parcouru en long et en large le forum et après avoir testé les méthodologies, je n'arrive toujours pas à venir à bout de mon problème:

Bien que je fixe une taille en pixel à un Div , Ie6 ne veut pas s'y plier

http://img80.imageshack.us/img80/8909/menufirefox7rk.png

Voici ce que ça donne sous Firefox

http://img300.imageshack.us/img300/4884/menuie63bp.png

Et voici ce que me donne IE6 Smiley bawling

Mon code html:

<div id="cadre">
	<div id="menu_vt_bas">
	<div id="bloccadre">
		
		<ul>
		
			<li><a href="#">Espace libre</a></li>
			<li><a href="#">Espace commun</a></li>
			<li><a href="#">Espace personnel</a></li>
			<li><a href="#">Espace d'échange</a></li>
			<li><a href="#">Classes</a></li>
	
		</ul>
		
	</div>
	</div>
	</div>


Et mon code CSS :

#cadre {			
	
	padding-top: 10px;
	background: url(images/haut_cadre.png) top left no-repeat;
	}

#bloccadre {
	width: 160px;
	background: url(images/bas_cadre.png) bottom left no-repeat;
	padding-bottom: 0px;
	}

#menu_vt_bas {

	left: 1%;
	width: 9em;
    padding: 0 0 1em 0;
    margin-bottom: 1em;
    font-family: 'Trebuchet MS', 'Lucida Grande',
       Verdana, Lucida, Geneva, Helvetica,
       Arial, sans-serif;
	font-size: small;   
	   }

#menu_vt_bas ul {
    
	width: 145px;/*taille que je fixe et que ie ne respecte pas*/
	list-style: none;
    margin: 0;
    padding:0 7px 10px 7px;
    
	border: none;
}

#menu_vt_bas li {
    
	border-bottom: 1px solid #223256;
    margin: 0;
	}

#menu_vt_bas li a {
	
	display: block;
	padding: 5px 5px 5px 5px;
	border-left: 10px solid #5175c9;
	border-right: 10px solid #32487c;
	background-color: #415ea2;
	color: #fff;
	text-decoration: none;
	width: 100%;
}

html>body #menu_vt_haut li a, #menu_vt_bas li a {
	width: auto;
}
	
#menu_vt_bas li a:hover {
	border-left: 10px solid #645b66;
	border-right: 10px solid #5b5d66;
	background-color: #9c99a4;
	color: #fff;
}


De plus on peut observerver un petit décallage entre le lien "espace personnel" et "espace d'échange" dans firefox qui n'apparait pas sous ie...

Voilà si quelqu'un a la solution Smiley cligne
Modifié par SugataSan (23 Aug 2005 - 14:40)
Salut, bon il faut savoir que dans la plupart des cas et encore plus qd tu utilises des tailles fixes , les paddings merde ou sont interpretés différents que pour les autres navigateurs. Enfait ton ul depasse de 14 px car tu lui a assigné un padding de 7px à gauche et à droite.

Bon seul moyen c'est de proceder par hack , chose qui ne doit ps être abusif mais qui permet de ne ps se prendre la tête Smiley lol

Ce la va donner:


#menu_vt_bas ul {

width: 145px;/*taille que je fixe et que ie ne respecte pas*/
list-style: none;
margin: 0;
padding:0 7px 10px 7px;

border: none;
}

* html #menu_vt_bas ul {

width: 131px;

}

Modifié par Vlili30 (16 Aug 2005 - 11:27)
Alors tu risques d'avoir encore un décallage car tes "li" sont aussi en padding. Mais la ton utilisation de "width:100%" doit être obsolete car un display block va directement te permettre d'etre en 100% si aucune autre taille n'est definie.

Donc enleve ton 100%.

J'espere que tout cela va fonctionner car je n'ai rien testé.
Bon je viens de tester et c'est bien le "width:100%" qui emmerdait le monde...
Un grand merci à toi donc
Par contre pour le hack j'ai du fixer le width à 145px, donc je sais pas si il sert encore à quelque chose (peut etre pour des navigateur anterieurs style ie5)

Reste ce décallage sous firefox qui me rajoute une vilaine bordure...
Une piste : en supprimant de la règle body le


line-height: 180%;


ce problème disparaît. Ça disparaît également avec une hauteur de ligne en pixels.

Je pense que Firefox doit avoir une précision supérieure au pixel et que l'arrondi de la hauteur de ligne fait que dans certains cas on a 1 pixel de décalage, et dans d'autres cas non.

<note>On peut éditer un message, il suffit de se logguer en bas de la page d'accueil du forum. Oui, c'est bien caché, j'ai mis du temps à trouver Smiley lol </note>
Modifié par Lanza (23 Aug 2005 - 09:51)
Sujet clos
Aller à