[Résolu] Menu en css - décalage de 2 pixels sous IE

Dernier message :
/******************************************************
Finalement je le met en ligne sinon ca vas être dur de vous faire une idée.

http://gdromer.free.fr/

Je rappel mes contraintes :
- pas de Doctype
- Le rollover des boutons doit dépasser sur les deux border blanc et gris d'un pixel chacun placés en bas du menu.

Mon problème : IE

Merci

/******************************************************

Bonjour,

Je fais un menu en list et je rencontre une difficulté sur IE.
Je ne peux pas déclarer une doctype (à cause d'une apli java déjà installée malheureusement).
Je voudrais donc savoir s'il est possible de remédier à ce décalage de 2 pixels qui se trouve sous le menu. (cf.image)

Merci !



Code html :

<div id="topFrame">
	<ul>
		<li class="topFrameMenu">
			<a href="#">
				<img src="img/icone_home.gif" alt="" />
				<p>Mon Compte</p>
			</a>
		</li>
	</ul>
</div>

Page Css :

div#topFrame{
	border-bottom:1px solid #A8A7A5;
}
div#topFrame ul{
    border-bottom:1px solid #fff;
	margin:0px;
	padding:0px;
	height: 58px;
}
div#topFrame .topFrameMenu {
	margin:30px 3px 0px 3px ;
	float:right;
    height:30px;
    width: 140px;
    text-align: center;
    list-style-type: none;
	position:relative;
	background: url(img/onglet_off.gif) no-repeat;
}
div#topFrame a {
    margin:0px;
    font: bold 12px Arial, Helvetica, sans-serif;
	color:#999;
    display: block;
    width: 100%;
    height: 28px;
    text-decoration: none;
}
div#topFrame a:hover {
    font: bold 12px Arial, Helvetica, sans-serif;
	color:#E78E3C;
    height: 30px;
	background: url(img/onglet_on.gif) no-repeat;
}
div#topFrame .topFrameMenu p{
	margin:0px;
    padding:8px 0px 0px 10px ;
}
div#topFrame .topFrameMenu img{
	margin:5px 0px 0px -60px ;
	padding:0px 0px 0px 0px ;
	position:absolute;
	border:0px;
}

Modifié par Bringdal (19 Jun 2007 - 18:02)

Bringdal a écrit :
Je ne peux pas déclarer une doctype (à cause d'une apli java déjà installée malheureusement).

Tu veux dire que l'application Java en question ne fonctionne pas en mode standard ?

Ben je vais laisser les autres se creuser les méninges... le débugage de pages en mode Quirks, c'est pas trop ma tasse de thé.

Re...

L'application a été implémentée avec une Doctype incomplète (il n'y avais pas le liens de la validation w3c) donc inopérante, du coup quand on rajoute une Doctype, plus rien ne vas...

Pensant qu'il y avait ce qu'il fallait comme déclaration, j'ai donc pondu ça.

mais merci quand meme
Modifié par Bringdal (19 Jun 2007 - 16:10)

Aurais-tu un lien pour voir ton menu?

Tu délclares les <li> avec une hauteur de 30px, et tes balises <a> sont déclarés a une hauteur de 28px, et les a:hover une hauteur de 30px..

il y a peut etre à réfléchir de ce côté-ci, à moins que ce soit un effet voulu genre rollover etc...

--> La page n'est pas en ligne, mais l'image illustre vraiment bien le phénomène, et il y a effectivement un effet de rolover voulu sur chaque bouton, ce rolover est censé dépasser sur les deux lignes (blanc et gris) ce qui explique les différentes hauteurs. C'est peut être un mauvaise méthode ???

J'ai omis de le préciser mais je me demande si IE ne charge pas l'image du rollover avant l'action, ce qui pourrais expliquer ce décalage, mais ca me parait étonnant quand même.

Jtrouve un peu casse tête comme tu as mis en forme ton menu, perso j'ai un peu un meme menu que toi sur un de mes sites
d'abord j'ai tout mit les padding et margin a 0 et après réglé
par contre dans ton cas faut voir avec les marges des paragraphes, des ul du bloc etc :s

Finalement je le met en ligne sinon ca vas être dur de vous faire une idée.

http://gdromer.free.fr/

Je rappel mes contraintes :
- pas de Doctype
- Le rollover des boutons doit dépasser sur les deux border blanc et gris d'un pixel chacun placés en bas du menu.

Mon problème : IE

Merci
Modifié par Bringdal (19 Jun 2007 - 17:25)

bonjour

IE a la facheuse habitude de dimensionner a sa guise , un element block vide , fera par exemple 1em de hauteur par defaut , si la police est fixée a 14px , alors la hauteur minimale de cette élément sera de 14px , même si on indique 12px dans la feuille de style.

En réadaptant la taille de la police , ou à l'aide un overflow:hidden on peut rattraper cette écart.

Autre particularité de IE6 , il comprends height comme un min-height (idem pour width) , il laisse donc l'élément s'agrandir ... cela semble etre le cas aussi en mode quirk pour IE7.

Du coup les 2 px en trop des li (30px en hauteur au lieu de 28px) etire le conteneur ul d'autant.

++ gc

Parfait, tout a fait ce que je voulais, t'es un champion gcyrillus. Merci

Pour la résolution, j'ai utilisé overflow:hidden.