28172 sujets

CSS et mise en forme, CSS3

IE6 : float + position relative

Bonjour à tous !

Me voici avec un nouveau défi Smiley smile
Bon, j'ai voulu faire une mise en page 3 colonnes (gauche : float left, droite : float right, centre : normal), mais bug sous IE6. Donc j'ai opté pour : gauche : float left, droite : float right, centre : float left.

Maintenant, dans le centre, à un moment je charge une div ("preview" on va dire) qui est en position relative. En fait quand je dis "je", je parle du code du client chez qui je travaille, et que je dois reprendre.
Dans cette div en position relative, on a certaines choses, dont des liens en position absolute.

Alors le truc, c'est que tel que c'est actuellement, la scrollbar apparaît bien dans la div centrale quand "preview" est plus haute... Sauf que "preview" apparaît par-dessus la div centrale, au lieu d'à l'intérieur (ça marche bien sous FF3).

Alors voilà, j'ai deux options :
1) soit je règle ce problème pour IE6 en gardant la position:relative de "preview" (je sais pas trop à quoi elle sert en fait, c'est ptet pour les liens en position:absolute)
2) soit je la mets en "normal". Là ça marche bien, mais du coup les liens se retrouvent à pétaouchnok.

Quelqu'un aurait une idée svp ?

Merci à tous ! Smiley smile
Bonjour,

Peux-tu nous mettre les portions html/css concernées par ton problème s'il te plaît ?

De plus, si tu as l'url de ta page Smiley cligne

Merci !
Hello !

Non non ce n'est pas accessible depuis l'extérieur.
Et pour le code... C'est un vrai capharnaüm, donc je veux bien essayer d'en mettre un peu, mais attention les yeux !!

(je mets le code généré pour plus de clarté)

<body>
    <div id="header">blabla</div>
    <div id="menu">blabla</div>
    <div id="allContent">
        <div id="leftCol">blabla</div>
        <div id="listContent">
            <div id="content">
                <h3>blabla</h3>
                <div class="previewPage">
                    <div id="previewMapImage" class="previewMapImage">
                        <img id="myImage" />
                        <a id="myLink" href="#"></a>
                    </div>
                </div>
            </div>
        </div>
        <div id="rightcol">blabla</div>
        <div class="clear"></div>
    </div>
</body>


myImage est une image générée qui est en fait une preview d'un document. Et on place des liens sur cette image pour permettre d'éditer les propriétés de certaines zones (en fait il y a un seul lien qui est déplacé et affiché quand on bouge la souris sur des maparea).

Et le CSS :

#leftCol
{
	float: left;
	width: 13px;
}

#rightCol
{
	float: right;
}

#listContent
{
	float: left;
  	overflow: auto;
	height: 300px;
	-height: 1%;
}

#content
{
	/* FIX IE6 : Mettre une valeur suffisamment petite pour que ça ne gêne pas sous IE6
	(si on met 100%, IE6 prend trop de place et passe à la ligne le bloc) */
	-width:95%;
	/* FIX IE6 : Mettre la scrollbar sur le content */
	overflow: auto;
}

.previewPage {
	text-align:center;
	padding-top:2px;
	position:relative;
}

.previewMapImage {

	position:relative !important;

}

#myImage {
	position:relative !important;
	z-index:1;
}

#myLink, #myLinkEdit {
	z-index:10;
	position:absolute;
	display:none;
}


Au fait, bizarre, je croyais qu'IE6 ne comprenait pas les "!important", et pourtant si je commente les lignes où il y en a, ça change (bcp) le rendu sous IE6.

Merci en tous cas ! Smiley cligne
Merci pour l'info !

Maintenant que IE7 est devenu mise à jour de sécurité, j'espère qu'IE6 va (enfin) couler et qu'on pourra (enfin) coder tranquillement.
Up !

Je suis assez gêné par ce bug IE6, car une bonne partie de nos clients utilise encore ce navigateur.

Toute aide sera fortement appréciée ! Smiley smile

Merci à tous !
Sujet clos
Aller à