[résolu] Petit pb de marges sous ie alors que padding et margin 0.

Bonjour,

Je refais le petit bandeau de mon site mais j'ai un petit problème de marges sous Internet Explorer (sous ff aucun problème). Pitite image qui en dira plus qu'un long discours je crois .

http://www.yazerty.net/misc/bug-ie-marges.jpg

Je ne vois pas du tout d'où ça peut venir car tous mes margin et padding sont à 0 ...

http://www.yazerty.net/themes/yazerty/style.css

body {
	color: black;
	background-color: #eee;
	font-family: Verdana, Geneva, Helvetica, Arial, sans-serif;
	font-size: 73%;	/* Enables font size scaling in MSIE */
	margin: 0;
	padding: 0;
	min-width: 720px;
}

(...)

/* ##### Header ##### */

#header {
	margin: 0;
	padding: 0;
}

#leftHeader {
	width: 20%;
	height: 60px;
	float: left;
	clear: left;
	background: #ddd;
	text-align: center;
	vertical-align: middle;
	border-bottom: 1px solid #ccc;
}

#leftHeader a {
	color: #454a5f;
	text-decoration: none;
	font-size: 2em;
	font-weight: bold;
	font-style: italic;
}

#rightHeader {
	width: 20%;
	height: 60px;
	float: right;
	clear: right;
	background: #ddd url(../../images/topain-ninja.gif) no-repeat center;
	border-bottom: 1px solid #ccc;
}

#centralHeader {
	height: 60px;
	width: 80%
	color: black;
	background: #ddd;
	margin: 0 20% 0 20%;
	border-bottom: 1px solid #ccc;
}

http://www.yazerty.net/

		<div id="header">
		
		<div id="side-bar">
			<div id="leftHeader">
			<div id="titre">
			<a href="<?php dcInfo('url'); ?>"><?php dcInfo(); ?></a>
			</div>
			</div>
			
			<div id="rightHeader">
			<div id="topain">
			&nbsp;
			</div>
			</div>
		</div>	
			
		<div id="centralHeader">
		&nbsp;
		</div>
		
		</div>

Ah et puis mon "vertical-align: middle;" ne marche pas, est-elle mal mise en place ??


Est-ce que vous pourriez m'aider à résoudre ces 2 petits problèmes svp ?
Modifié par Yazerty (04 Jun 2005 - 19:14)

Salut,

a écrit :
Ah et puis mon "vertical-align: middle;" ne marche pas, est-elle mal mise en place ??

Sauf erreur, "vertical-align" ne s'applique pas à des balises bloc...

Ah oui effectivement . Merci bouquins.

Par contre j'ai essayé les solutions proposées sur ce sujet mais ça ne marche pas :^)...
Modifié par Yazerty (03 Jun 2005 - 14:11)

Bonjour ;
vertical-align ne s'applique qu'aux cellules, dans les tables, si je me souviens bien ; pour ton décalage de marge sous ie : tu dois pouvoir le "recouvrir" en jouant avec un "border" de même couleur.
Modifié par Macpom (03 Jun 2005 - 14:58)

Non, si je rajoute un border ça décalle le problème.
En fait j'ai deux espaces entre mes 3 cellules et je ne vois pas d'où il vient, pourquoi ces bougres sont là...

parce que iE laisse 1px souvent entre deux élémetns ; pour le recouvrir, il faut jouer entre border (qui couvre) et margin (qui redécale en place). Si tu veux ne les utiliser que ppour iE, un petit "hack" : tu places "_" devant l'élément que tu veux ne faire bouger que pour iE, pas très élégant, mais efficace. Exemple : "margin: 1em; _margin: 1.5em;" ; bien le placer derrière, puiqu'il conserve la dernière information qui lui est donnée en compte.
Modifié par Macpom (03 Jun 2005 - 16:34)

Je n'avais pas regardé toncode en détail ; mais pourquoi ne mets-tu pas qu'un seul bandeau de tête dans lequel tu placerais tes éléments, plutôt que de placer tes éléments par des "<div>" ? ce serait peut-être aussi simple ?

En fait je veux que mon titre soit centré par rapport à ma colonne de gauche et j'ajouterai sans doute une image dans la cellule centrale du bandeau.

Personne n'a une idée pour cessatannées marges :-?

problème résolu tout comme je veux je crois

Si quelqu'un a le même problème un jour, voir code sur mon site ou par mail : yazerty@yazerty.net


ps : en fait j'ai trouvé les astuces un peu partout (dont ici