Espace entre 2 image sous IE

Bonjour,

J'ai besoin de faire une en tete de page web (visible ici) composée de 2 images : la première (à droite) placée en background dans la css et la seconde dans le code html (elle change en fonction des pages).

J'ai donc défini 2 boites : banner (float right) et rheader (avec une marge à droite).

Tout marche parfaitement sous FF mais sour IE j'ai un espace entre les images ....

le code CSS est le suivant :

html {padding: 0;	margin:0;}

body {
	text-align: center;
	margin:0;
	padding:0;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #666;
	font-size: 90%;
	background-color: White;
}

a:link, a:visited, a:active  {color: #666666; text-decoration: none;}
a:hover {color: #666; text-decoration: underline;}

p {margin-top: 2px;	margin-bottom: 2px;}
td {font-size: 90%;}

/* layout */
#page {
	width: 990px;
	text-align: left;
	margin: 10px auto 10px auto;
	background-color: White;
}

#header {
	width: 990px;
	height: 234px;
	margin: 0px;
	padding: 0px;
}

#banner {
	float: left;
	width: 810px;
	height: 234px;
}

#rheader {
	height: 234px;
	margin: 0px 0px 0px 810px;
	background: #fff url(_Images/RHeader.gif) 0px 0px no-repeat;
}

#navigation {
	height: 30px;
}

des idées ?

Merci par avance

Salut,

Ou est l'interêt d'avoir deux images pour ta bannière ? Chargement plus rapide ? Si j'étais à ta place je mettrais juste une image, c'est plus simple

Sinon tu peux mettre ton image banner_green.gif dans le css, dans header par exemple puis rajouter ton div rheader en float right. Ca devrait marcher jpense.

Bonjour,

Il s'agit du "three pixels jog", un bug d'IE Windows faisant apparaître un espace de 3 pixels à côté d'un élément image en flux adjacent à un flottant. Il est imparable.

Tu peux cependant l'éviter simplement en faisant flotter ton élément img (ajouter la largeur d'image dans la CSS), ce qui te sortira des conditions déclenchant le bug.

@Gunn: un header tout en arrière-plan CSS n'a plus de contenu. A proscrire définitivement.
Modifié par Laurent Denis (28 Jul 2006 - 12:33)

Joli :

a écrit :
Il est inévitable.

Tu peux cependant l'éviter simplement

@Laurent : "...n'a plus de contenu" ? jvois pas trop le truc là. Tu pourrais me donner quelques explications supplémentaires =) Merci
Modifié par Gunn (28 Jul 2006 - 12:14)

"imparable" aurait en effet été plus approprié dans la première phrase. Je corrige, merci

Une image d'arrière-plan CSS n'a pas d'existence en dehors de CSS. Pas de mécanisme d'alternative textuelle. Pas d'accessibilité. Pas de "référençabilité" (sic). C'est la conséquence logique de l'utilisation de CSS sans maîtrise de son rôle: le contenu devient de la présentation.

Je sais, on peut bricoler avec la méthode de Bowman pour avoir un texte HTML masqué à l'écran dans les navigateurs graphiques avec CSS activée et accessible ailleurs. Mais pourquoi bricoler quand on peut s'en passer ?
Modifié par Laurent Denis (28 Jul 2006 - 12:36)

Génial ça fonctionne nickel et en plus c'est propre !
J'ai fait les modifications suivantes :
- passer le banner en fixe
- intégrer le rheader dans le conteneur banner et le mettre en float right
- ajouter un align=left à l'image du banner (qui reste dans le html)

@gunn : j'avais impérativement besoin des 2 images dans la mesure où c un site dynamique où le banner doit changer en fonction de la page et où, toujours en fonction des pages, je peux avoir des éléments différents dans la zone rheader (ou pas).

Merci pour vos réponses !

Fred