[résolu] Float, Ie 6 et centrer

Bonjour,

j'ai un petit soucis avec le float. Sous ie 6 le centrage du div est perdu.

Merci

<div id="container">
  <div id="header">
			<div id="logo">
				<h1>weXpay</h1>	
			</div>

</div>

mon css

/******************************************************/
/*           Style Globales                           */
/******************************************************/
body {
	margin: 0;
	padding: 0;
	font-family: "Lucida Grande", "Trebuchet MS", Arial, sans-serif;
	text-align: center;
	background: url(../images/backgroud-top.gif) top left repeat-x;
}

#container {
	position: relative;
	height: 100%;
    voice-family: "\"}\"";
    voice-family: inherit;
    height: auto;
}

html>body #container {
    height: auto;
}


#content {
	width:expression(document.body.clientWidth > 840 ? "840px" : "auto");
 }
/*-----------------------------------------------------------------------------------------------
  header
-----------------------------------------------------------------------------------------------*/
#header {
	padding: 0;
	position: relative;
	min-width:  760px;
	margin: auto;
}
  Logo
-----------------------------------------------------------------------------------------------*/
#logo {
	padding: 0;
	margin: 2px 0 0 0;
	width:  244px;
	height: 146px;
	float: left;
	display:inline;
}

#logo h1 {
	width:  244px;
	height: 146px;
	padding: 0;
	margin: 0;
	background: url(../images/logo.gif) no-repeat;
	text-indent:  -9000px;
}

Modifié par bolo (17 Jan 2007 - 10:04)

Bonjour bolo,

Ça serait pas mal d'être un peu plus précis dans les informations que tu donnes. Quel centrage est perdu ? Celui de div#header ?

Si c'est le cas, ça n'est pas étonnant :

#header {
	padding: 0;
	position: relative;
	min-width:  760px;
	margin: auto;
}

Internet Explorer 6 a besoin d'une largeur fixe (width) pour pouvoir appliquer les marges automatiques. Les navigateurs plus récents, dont IE7, se débrouillent également avec une largeur maximale.

Par contre, il ne me semble pas que l'on puisse centrer un élément ayant seulement une largeur minimale. Un élément de type bloc prendra toute la largeur disponible dans son conteneur, même s'il a une instruction de largeur minimale. S'il prend toute la largeur disponible, il ne pourra donc pas être centré.

Donc dans tous les cas les marges automatiques sur div#header me semblent inutiles ou inefficaces.
Mais tu pensais peut-être à un autre élément ?

a écrit :
Internet Explorer 6 a besoin d'une largeur fixe (width) pour pouvoir appliquer les marges automatiques. Les navigateurs plus récents, dont IE7, se débrouillent également avec une largeur maximale.

Par contre, il ne me semble pas que l'on puisse centrer un élément ayant seulement une largeur minimale. Un élément de type bloc prendra toute la largeur disponible dans son conteneur, même s'il a une instruction de largeur minimale. S'il prend toute la largeur disponible, il ne pourra donc pas être centré.

Donc dans tous les cas les marges automatiques sur div#header me semblent inutiles ou inefficaces.
Mais tu pensais peut-être à un autre élément ?

C'est étrange par ce que ca marche avec Firefox
Maintenant que j'ai mis

#header {
	padding: 0;
	position: relative;
	width:  760px;
	margin: auto;
}

C'est quand même domage

Ben si tu utilises une largeur fixe (width: 760px, en l'occurrence), ça marchera avec tous les navigateurs.
Une largeur maximale, ça ne marchera avec tous sauf IE6 (je ne compte pas les IE5 PC et Mac, Netscape 6, etc.).
Une largeur minimale, ça ne marchera avec aucun navigateur.

Donc pour centrer un bloc avec la technique des marges automatiques, il faut lui attribuer une largeur fixe ou bien une largeur maximale. Je soulignais juste le fait que min-width ne marchera pas pour ça.

Oui mais avec Fireforx

#header {

	padding: 0;

	position: relative;

	min-width:  760px;

	margin: auto;

}

Ce code ne pose pas de problème
Merci pour la réponse

bolo a écrit :
Oui mais avec Fireforx

#header {
	padding: 0;
	position: relative;
	min-width: 760px;
	margin: auto;
}

Ce code ne pose pas de problème

Ce code ne pose pas de problème mais il ne centre absolument rien du tout. ON NE PEUT PAS centrer un bloc avec la technique des marges relatives en n'ayant pour toute indication de largeur qu'une LARGEUR MINIMALE.

Avec juste min-width: 760px, et pour peu que le conteneur du bloc ait une largeur supérieure à 760px, le bloc prendra toute la largeur disponible.

Avec max-width: 760px (donc une LARGEUR MAXIMALE), le bloc serait limité à 760px de large, et donc pourrait être centré dans un conteneur plus large.