[Résolu] Div décalée sous IE7

Bonjour,

http://s192858473.onlinehome.fr/archi/html/agence.php

la page suivante n'a pas le même rendu sous firefox et IE7, je ne vois pas quelle propriété css pose problème.

Voici le code des div concernée:

#contentmain{
	position: relative;
	background:transparent;
	 color: #ffffff;
}
#transparence{
	color: #ffffff;
	position: absolute;
	background:#4A4A4A;
	 height: 318px;
	 filter:alpha(opacity=70);
     -moz-opacity:0.8;
     opacity: 0.8;
	 margin-top: 0px;
	 width: 966px;
	border-bottom: 2px solid #778992;
	border-top: 2px solid #778992;
	
}

Vous avez certainement une idée?

Merci pour votre aide!
Modifié par Mook (11 Aug 2008 - 15:57)

Hello,

Il y a un problème de flux, ton #transparence est placé en position:absolute, mais sans lui préciser de margin-left ou left, IE7 le place (étrangement) après le premier élément en position:relative qu'il trouve.

ton div#contentmain est en float:left aussi, est-ce utile ?


De façon plus générale, pourquoi ne pas créer une image de fond en png24 d'opacité 70 et de la placer en image de fond de #conteneur ?

la transparence etant geree par IE et les autres navigateurs, je suppose que c'est inutil de faire charger une image pour cela.

enfin je dis ca, je dis rien

Merci pour vos réponses,

En effet, pour faire cette transparence je souhaite utiliser les propriétés de transparence gérées par IE et FF.

Quand je défini un margin-left (par ex de 20px) sur #transparence ça ne change rien, le div est placé à droite après le flux #contentmain et il se décale de 20 par rapport à celui-ci.

Bonjour,

En passant, -moz-opacity est complètement inutile depuis... longtemps. Le support de la propriété CSS opacity est inclus à Firefox depuis la version... 0.9. Tu peux oublier -moz-opacity.

tfe a écrit :
la transparence etant geree par IE et les autres navigateurs, je suppose que c'est inutil de faire charger une image pour cela.

enfin je dis ca, je dis rien

Hmm non, l'application de transparence à un élément sous IE6 (au minimum) pose des soucis de descendance (les enfants héritent aussi de cette transparence). En tout cas, c'est les souvenirs que j'en ai.
C'est corrigeable à coup de position:relative et autres hasLayout mais le plus simple reste, par expérience, de placer une image de fond transparente.
Modifié par Tymlis (06 Aug 2008 - 18:53)

J'ai finalement utilisé une image en background transparente pour ma div #transparence, mais le problème reste le même pour IE. le calque sort du flux. Et quand je met une position: relative , le calque #contentmain passe en dessous (ce qui semble logique), comment peut-on corriger cela?

#transparence{
	color: #ffffff;
	position: absolute;
	height: 318px;
	background: url('images/transparence.png') no-repeat top; 
	 margin-top: 0px;
	 width: 966px;
	border-bottom: 2px solid #778992;
	border-top: 2px solid #778992;
}

Modifié par Florent V. (09 Aug 2008 - 13:16)

Bonjour,

Quelques remarques en vrac:

1. Ça serait pas mal de baliser correctement le code que tu cites sur le forum, avec les balises [ code] et [ /code] (sans espace après le crochet ouvrant). Parce que tout le monde est censé le faire, que ça rend les messages plus lisibles, que c'est une règle du forum, et que sinon je vais me fâcher tout rouge. Si si.

2. Je n'ai pas compris pourquoi tu utilises deux éléments séparés (un pour le fond translucide, et un pour le contenu). Du coup tu te retrouves à positionner le premier en absolu, donc forcément il sort du flux. Pourquoi ne pas tout simplement faire un seul bloc, avec le contenu, en opacité normale (1), et ayant comme fond une image en PNG-24 avec transparence alpha?

3. Pour gérer la transparence alpha du PNG avec IE6, voir la FAQ.

Désolé pour les balises, j'y penserais la prochaine fois.
J'ai résolu mon problème de décalage sous IE en supprimant la div #transparence et en ajoutant le background avec l'image png transparente dans #contentmain.

Merci pour vos réponses!