[Résolu] Firefox et IE ... 20px de décalage !

Bonjour, je suis en train de boucler le squelette de la structure des pages de mon projet, et je n'arrive pas à régler 1 petit problème ...

Le site

Login : admin
Pass : admin

(pas d'inquiétude, c'est juste pour montrer)

Pour ceux qui n'auraient pas le plugin webdevelopper et ne pourraient pas accèder à la feuille de style :

body {
	margin:0;
	padding:0;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 0.8em;
}

ul {
	list-style-type: none;
} 

a img {
	border:none;
}

#global {
	position:absolute;
	width:100%;
	background-color:#a5ed94;
	/* #a5ed94 */
	/* #f89b44 */
}

#header {
	position:relative;
	height: 40px;
	margin:0;
	padding:0;
	border-bottom:1px solid gray;
	background-color: #4f7bc8;
	/* #4f7bc8 */
	/* #e194ed */
}

#haut {
	position:relative;
	height: 22px;
	margin:0;
	padding-left:0;
	padding-right:0;
	padding-top:0;
	padding-bottom:0;
	margin-left: 150px;
}

#gauche {
	position: absolute;
	left:0;
	width: 150px;
	height:400px;
}

#centre {
	min-height:200px;
	margin-left: 150px;
	padding-left:2em;
	padding-right:2em;
	padding-top:2ex;
	padding-bottom:2ex;
	border-left:1px solid gray;
	border-top:1px solid gray;
	border-right:0;
	border-bottom:0;
	background-color:#fff6c2;
}

#bas {
	height: 40px;
	margin:0;
	padding:0;
	border-top:1px solid gray;
	border-bottom:1px solid gray;
	background-color: #4f7bc8
	/* #4f7bc8 */
	/* #e194ed */
}

.onglet {
	float:left;
	margin: 0;
	padding-left:20px;
	padding-right:0;
	padding-top:7px;
	padding-bottom:0;
}

.onglet li {
	float: left;
}

.onglet a {
	width: 143px;
	height: 20px;
	margin-left:5px;
	padding-top:2px;	
	display: block;
	text-align: center;
	border: 1px solid gray;
	text-decoration: none;
	color: #000;
	background: #fff;
}

.onglet a:hover {
	border: 1px solid gray;
	background: #f07a7a;
}

.onglet a:active {
	border: 1px solid gray; 
	color: #fff;
	background: gray;
}

.current-onglet {
	width: 143px;
	height: 20px;
	margin-left:5px;
	padding-top:2px;	
	display: block;
	text-align: center;
	border: 1px solid gray;
	font-weight:bold;
	background: #fff6c2;
}	

.menu {
	float:left;
	margin: 0;
	padding-left:5px;
	padding-right:0;
	padding-top:20px;
	padding-bottom:0;
}

.menu li {
	margin-bottom: 5px;
}

.menu a {
	width: 149px; 
	height: 20px;
	margin: 0;
	padding-top:2px;	
	display: block;
	text-align: center;
	border: 1px solid gray;
	text-decoration: none;
	color: #000;
	background: #fff;
}
	 
.menu a:hover {
	border: 1px solid gray;
	background: #f07a7a;
}

.menu a:active {
	border: 1px solid gray; 
	color: #fff;
	background: gray;
}

.current-menu {
	width: 149px;
	height: 20px;
	padding-top:2px;	
	display: block;
	text-align: center;
	border: 1px solid gray;
	font-weight:bold;
	background: #fff6c2;
}	

.deconnexion {
	position:absolute;
	width:150px;
	padding-top:47px;
}

.deconnexion a {
	width: 149px;
	height: 19px;
	margin-left:5px;
	padding-top:2px;
	display: block;
	text-align: center;
	text-decoration: none;
	color: #ff0000;
}
	
.deconnexion a:hover {
	font-weight:bold;
	border: 2px solid #f07a7a;
}

.icones1 {
	position:absolute;
	left:0;
	display: inline;
	width:150px;
	margin-top:5px;
	margin-left:2px;
	padding:0;
	text-align:center;
}

.description {
	text-align:justify;
	margin:0;
	padding:0;
}

.description h3 {
	width:200px;
	border-bottom: 1px solid #f34b4b;
	font-size:15px;
	color:#f34b4b;
}

.description p {
	margin-left:3em;
	margin-right:2em;
	margin-bottom:1ex;
}

.icones2 {
	display: inline;
	float:right;
	margin-top:4px;
	margin-right:4px;
	padding:0;
}

Le problème :

Sous Firefox, les onglets mordent sur le contenu principal, c'est volontaire.

Sous IE, ils ne mordent pas, pourquoi ?! Je voudrais moi !




Merci d'avance pour votre aide, et si quelqu'un à des propositions pour améliorer la syntaxe, je suis open
Modifié par Ptit JJ (25 Jan 2006 - 08:08)

Salut,
Il est difficile de comprendre le problème, l'accès au site est impossible.

oui c'est vrai, j'avais fais des modifs et n'avais pas mis à jour le post.
j'ai entièrement revu mon premier post.

Si quelqu'un trouve la solution ...

bonjour,

Sans avoir tester sous IE, essaie d'appliquer un overflow:hidden;a #haut . IE considere height comme min-height, il "agrandit" donc #haut pour accueillir ul.onglet.
Pour garder ul.onglet entierement visible sous IE, il faudrait aussi ajouter position:relative; et z-index:1; .
Cette surcharge semble necessaire que pour IE ....
Note que je suis parti du fait que tu indique une hauteur a #haut et que je comprend que c'est l'aspect dans IE qui te deplait, a l'opposée il suffira de changer la valeur de la hauteur pour obtenir l'aspect d'IE, environ 31px.

a plus
<edit> en faisant usage des commentaire conditionnel par exemple, essai ceci

<!--[if IE]>
<style type="text/css">
#haut {
	overflow:hidden;
	position:static;
}
.onglet a {
	position:relative;
	z-index:1;
}
</style>
<![endif]-->
</head>

juste avant head.
</edit>
Modifié par gcyrillus (20 Jan 2006 - 15:41)

merci pour cette piste gcyrillus,
mais ça ne résoud pas le problème.

Effectivement "overflow: hidden" place les onglets à la hauteur désiré, mais comme tu le prévoyais ils sont masqués par la partie #centre.

Et le z-index n'y fait rien

Sans vouloir te vexer je crois que la manip que tu propose n'est pas très adapté, car elle revient à faire des choses contradictoires (on cache ce qui dépasse et en même temps on le fait passer au premier plan ...).

Mais je n'utilise pas CSS depuis longtemps, peut être que ce que tu proposes est la bonne méthode, nécessaire pour fonctionner avec IE.


Existe t il une propriété permettant d'interdire le re-size d'un bloc ?
car à ce moment là "overflow: visible" serait bien ...

bonjour,
en repassant un peu tardivement sur le topic...
Remarque que le css de "correction", que je te propose n'est que pour IE ...et qu'il est place en commentaire conditionnel, (d'ailleurs la position:relative; necssaire a firefoxe est la ecraser par une valeur :static; )...
Pour IE un height ou width correspond a une valeur minimale, et pour l'empecher de visuellement s'agrandir, 2 soluces me viennent de suite a l'esprit, overflow hidden ou auto, tu ne veut pas de scroll bar , alors, hidden servira ...
Pas de chance, les contenus debordants restent invisibles dans IE (pas dans firefoxe, !),... alors le z-index pour repasser ça au dessus du reste, ....
IE applique plutot mal les regles css et a des rendus parfois tres surprenant, alors , les hacks ou bricolages en le surchargeant d'attributs css peuvent t'amener a obtenir des resultats proche de celui que tu veut au depart.... j'invente rien. (il arrive parfois que l'on fasse la même chose a l'inverse pour les autres navigateurs, .... le celebre clear:both; ou overflow:hidden; pour englober les elements flottants ... )

A propos , j'ai tester sur ma version d'ie (IE6 sp2 XP home) et ça marche, au vue des differences je ne suis sur que ça vaut une prise de tete pour quelque pixel .

a plus

gcyrillus a écrit :
bonjour,
en repassant un peu tardivement sur le topic...

il n'est jamais trop tard surtout quand on apporte (a apporté) la solution

en fait je viens de réessayer ce que tu proposais en faisant un bête copier-coller de ce que ton morceau de code, et ça marche

Merci beaucoup donc !

Problème résolu