28172 sujets

CSS et mise en forme, CSS3

Bonjour,

ici http://xsoftware.fr/vierge_v02.html un exemple délibéré épuré de mon problème : des balises div se positionnent, à mon avis correctement avec Firefox 3 mais pas avec Internet explorer.
J'aimerais comprendre pourquoi.

Voici la feuille de style associée :

body {
	font-family: Arial, Helvetica, FreeSans, sans-serif;
	margin: 0;
	margin-top: -08px;
	background-color: #f2f2f2;
	height: 100%;
}
#page {
	min-height: 100%;
	position: relative;
}
#entete {
	background-color: #CCC;
	background-repeat: repeat-x;
	height: 152px;
	min-width:1024px;
}
#logo_image {
	position:absolute;
}
#centre_entete {
	width:738px;
	margin-left:auto;
	margin-right:auto;
	position:relative;
}
#logo_texte {
	position:absolute;
}


Ici, http://xsoftware.fr/vierge_v03.html, j'ai changé, dans mon code l'emplacement de ma balise div contenant l'image et c'est visible de la même manière dans Firefox3 et dans internet explorer.
Ici la feuille de style associée :

body {
	font-family: Arial, Helvetica, FreeSans, sans-serif;
	margin: 0;
	margin-top: -08px;
	background-color: #f2f2f2;
	height: 100%;
}
#page {
	min-height: 100%;
	position: relative;
}
#entete {
	background-image: url(img/css/fond_header_total.png);
	background-repeat: repeat-x;
	height: 152px;
	min-width:1024px;
}
#logo_image {
	position:absolute;
}
#centre_entete {
	width:738px;
	margin-left:auto;
	margin-right:auto;
	position:relative;
}

#logo_texte {
	position:absolute;
}

Mais cela m'oblige à revoir tout mon code, ce que je suis prêt à faire, si c'est la seule solution et si quelqu'un peut m'expliquer ce qui dans ma feuille de style est erroné.
A moins que ce soit Internet Explorer qui ne gère pas correctement certaines fonctionnalités ?

D'avance, merci pour votre aide.

On peut également voir les copies d'écran ici :
http://browsershots.org/http://xsoftware.fr/vierge_v02.html
Bonjour,

Pour ta première page, à priori la différence vient du fait que tu ne précises pas de valeur pour la propriété left de ton élément positionné en absolu. En effet, IE 6-7 a souvent un peu de mal à positionner en absolu des éléments si on ne leur donne pas des coordonnées explicites.
Merci.
En effet,
#logo_image {
	position:absolute;
	left:0;
}
remet les choses à leur place : http://xsoftware.fr/vierge_v04.html.
Mieux même : http://xsoftware.fr/vierge_v04_bis.html me redonne l'espoir ... qui retombe lorsque je veux intégrer de nouveaux éléments http://xsoftware.fr/vierge_v05.html dont voici la css
a img {
	border:none;
}
a
{
	border: none;
}
body {
	font-family: Arial, Helvetica, FreeSans, sans-serif;
	margin: 0;
	margin-top: -08px;
	background-color: #f2f2f2;
	height: 100%;
}
#page {
	min-height: 100%;
	position: relative;
}
#entete {
	background-image: url(img/css/fond_header_total.png);
	background-repeat: repeat-x;
	height: 152px;
	min-width:1024px;
}
#logo_image {
	position:absolute;
	left:0;
}
#centre_entete {
	width:738px;
	margin-left:auto;
	margin-right:auto;
}
#logo_texte {
	position:absolute;
}



.menu {
	margin-left:266px;
	letter-spacing: -1px;
	font-weight:lighter;
}

.listemenu {
	list-style-image:none;
	list-style-position:outside;
	list-style-type:none;
}

.listemenu li {
	float:left;
	margin-top: 25px;
}

.listedebut {
	background-image: url(img/css/menu/normalgauche.png);
	display: block;
	height: 127px;
	width: 72px;
}
.listedebut:hover {
	background-image: url(img/css/menu/hovergauche.png);
	display: block;
	height: 127px;
	width: 72px;
}
.listedebut a {
	text-decoration: none;
	text-align: center;
	color: white;
	display: block;
	height: 72px;
	width: 72px;
	padding-top: 75%;
}
.listenormale {
	background-image: url(img/css/menu/normalcentre.png);
	display: block;
	height: 127px;
	width: 72px;
}
.listenormale:hover {
	background-image: url(img/css/menu/hovercentre.png);
	display: block;
	height: 127px;
	width: 72px;
}
.listenormale a {
	text-decoration: none;
	text-align: center;
	color: white;
	display: block;
	height: 72px;
	width: 72px;
	padding-top: 75%;
}
.listefin {
	background-image: url(img/css/menu/normaldroite.png);
	display: block;
	height: 127px;
	width: 72px;
}

.listefin:hover {
	background-image: url(img/css/menu/hoverdroite.png);
	display: block;
	height: 127px;
	width: 72px;
}
.listefin a {
	text-decoration: none;
	text-align: center;
	color: white;
	display: block;
	height: 72px;
	width: 72px;
	padding-top: 75%;
}

Et, a priori, pas question de mettre left=0 sur logo_texte sinon il revient vraiment à gauche !!
Dans quel piège tombe-je cette fois ?
La présence d'un ascenseur vertical grisé en IE7 est-il en rapport ?

D'avance merci pour ton (votre) aide.

Cordialement,
Christophe Charron
christophe charron a écrit :
La présence d'un ascenseur vertical grisé en IE7 est-il en rapport ?

Il y a toujours un ascenseur vertical dans IE6-7:
- normal s'il est utilisable;
- grisé s'il n'a pas lieu d'être (correspond à pas d'ascenceur vertical dans les autres navigateurs).
Florent V. a écrit :

Il y a toujours un ascenseur vertical dans IE6-7:
- normal s'il est utilisable;
- grisé s'il n'a pas lieu d'être (correspond à pas d'ascenceur vertical dans les autres navigateurs).

Ok ... je ne pratique pas Internet Explorer Smiley confused ... donc c'est sans rapport.
Sinon, une idée pour le souci de positionnement ?