28220 sujets

CSS et mise en forme, CSS3

[Résolu] Problème de positionnement sous IE

Bonjour tout le monde

Je suis en train de refondre mon site et j'ai un soucis de positionnement sous IE. Sous Firefox, c'est parfait. Sous IE, c'est la cata.

Voir la page

Si une âme charitable pouvait me guider pour positionner tout ça sous IE, ça serait génial. Smiley sweatdrop

Je crois que le problème vient des "position: fixed" mais si je le mets pas, ça ne se comportera pas comme je veux.

Merci
Modifié par LittleBlackCat (04 Aug 2005 - 23:07)
effectivement, ça rend moins bien sous IE Smiley biggol

Il faudrait que tu donnes ta feuille de style pour que qqn puisse t'aider.
hop voilà


body {
	background-image: url(images/fond.png);
	margin: 0px;
	padding: 0px;
	height: 100%;
}

#titre {
	background-image: url(images/fond_fonce.png);
	position:fixed;
	left: 620px;
	top: 32px;	
	margin: 0px;
	padding: 0px;
	height: 228px;	
	width: 100%;
}

h1 {
	padding:0px;
	margin: 0px;
	text-indent: -100em;
	overflow: hidden;
	background-image: url(images/tit_1.png);
	width: 16px;
	height: 228px;		
}

h1 a {
	display: block;
}
	
#menu {
	position: fixed;
	top: 32px;
	left: 0px;
	background-image: url(images/fond_fonce.png);
	width: 227px;
	padding: 12px 0 0 0;
	margin: 0px;
	height: 218px;
}

#menu a{
	text-decoration: none;
	display: block;
	height: 48px;
	text-indent: 100em;
	margin-left: auto;
	margin-top: auto;
	margin-right: 0px;
	margin-bottom: 5px;
}

#menu li {
	text-align: right;
	padding-right: 0px;
}

#menu_1 {
	background: url(images/menu_1_out.png) right top no-repeat;
	width: 48px;
}

#menu_1:hover {
	background: url(images/menu_1_ov.png) right top no-repeat;
	width: 193px;
}

#menu_2 {
	background: url(images/menu_2_out.png) right top no-repeat;
	width: 48px;
}

#menu_2:hover {
	background: url(images/menu_2_ov.png) right top no-repeat;
	width: 193px;
}

#menu_3 {
	background: url(images/menu_3_out.png) right top no-repeat;
	width: 48px;
}

#menu_3:hover {
	background: url(images/menu_3_ov.png) right top no-repeat;
	width: 193px;
}

#menu_4 {
	background: url(images/menu_4_out.png) right top no-repeat;
	width: 48px;
}

#menu_4:hover {
	background: url(images/menu_4_ov.png) right top no-repeat;
	width: 193px;
}


#fond {
	border-right: solid 1px #CCC08F;
	border-left: solid 1px #CCC08F;
	background-position: fixed;
	padding:0px;
	width: 391px;
	background: #FFF;
	height: 100%;
	position: fixed;
	top:0px;
	left: 227px;
}

#contenu {
	position: absolute;
	top:0px;
	left: 227px;
	width: 371px;	
	padding: 10px;
}

#zanimo {
	background-image: url(images/fond_1.png);
	width: 130px;
	height: 214px;
	position: fixed;
	bottom: 0px;
	left:  620px;
}
Apparement, IE ne gère tout simplement pas du tout les position:fixed Smiley fache

Il y a des trucs pour, je cite, "émuler le schéma de positionnement CSS2 position:fixed". Mais ça a l'air d'être de la bonne cuisine bien artisanale :
http://tagsoup.com/-dev/null-/css/fixed/

Faudrait demander leur avis aux experts, moi je ne suis encore qu'un touriste.

Sinon, sous Fx, c'est très joli !
Merci pour le coup de main (et aussi ton avis sur le design qui n'est évidemment pas terminé Smiley langue ).

Je crois que je vais opter pour deux comportements différents (un fixe pou FF et un "flottant" pour IE).
Avant de sortir l'artillerie lourde d'une solution douteuse qui force une pseudo position fixe problématique, ou de ce bizarre "float" sans rapport avec le sujet, une question simple : pourquoi ne pas tout simplement dégrader le positionnement fixe en positionnement absolu dans IE Smiley cligne 

#foo {
position: absolute;
position: fixed;
}


IE ne lit que la première règle, car il ignore la seconde qu'il ne connaît pas.
Les navigateurs implémentant la position fixe lisent les deux, mais n'appliquent que la seconde (règles de la cascade).

Simple, propre, facile.
Modifié par Laurent Denis (04 Aug 2005 - 22:53)
Sopo a écrit :

Il faudrait que tu donnes ta feuille de style pour que qqn puisse t'aider.


Pourrait-on éviter de faire ce genre de demande quand la feuille de style est déjà accessible à partir de l'url du site ?

Les feuilles de styles listées intégralement dans le forum sont loin d'en améliorer la lisibilité.
Bon ben j'ai fait un hack avec body > #foo pour donner la propriété absolute sous IE et fixed pour les autres. J'ai encore des problèmes de positionnement avec IE mais ça devrait aller maintenant. Smiley smile

Merci
Sujet clos
Aller à