28172 sujets

CSS et mise en forme, CSS3

[résolu] overflow : hidden & IE

Bonjour,

bon, mon premier post sur alsacreation, pourtant c'est loin de la première fois que je viens sur ce site ô combien utile...

Je suis en train de me réaliser un petit site vitrine / portfolio. Jusque là, tout baigne dans firefox, code valide w3c / css, etc... Et à ma grande surprise quand j'ouvre IE, rien ne va plus !
Après avoir retourné le problème dans tous les sens, je m'en remets à vous.
Le site utilise pas mal JavaScript / jQuery, mais je pense que c'est plus un problème CSS, d'où mon post dans cette partie du forum.

Voici le site incriminé : http://nikophil.free.fr/dl/site

J'ai essayé de faire une navigation un peu originale pour les sous-menus "cv" "web" "audiovisuel" et "links". Je l'explique rapidement :

voici la div de mon sous-menu pour la partie CV :


<div class="sub_menu">
	<a id="arrow_up" href="#up"></a>
	<div id="slider_fix">
		<div id="slider_move">
			<div class="vignette"><a id="vign_me" class="vign vign_me_not_clicked" href="#me"></a></div>
			<div class="vignette"><a id="vign_stu" class="vign vign_stu_not_clicked" href="#studies"></a></div>
			<div class="vignette"><a id="vign_comp" class="vign vign_comp_not_clicked" href="#competencies"></a></div>
			<div class="vignette"><a id="vign_exp" class="vign vign_exp_not_clicked" href="#experience"></a></div>
			<div class="vignette"><a id="vign_pdf" class="vign" href="#"></a></div>
		</div>
	</div>
	<a id="arrow_down" href="#down"></a>
</div>


la div sub_menu dans la css ressemble à ceci :

.sub_menu{
	position:absolute;
	display:block;
	left:467px;
	top:110px;
	background: url(../img/sub_menu_bg.gif);
	width:98px;
	height:429px;
}


rien de bien sorcier.

la div slider_fix sert de "cache", avec une taille fixe, et un overflow:hidden, tandis que la div slider_move n'a pas de taille fixe sur la hauteur, cela dépend du nombre de sous-rubriques, et cette div slider_move navigue dans son parent (slider_fix) quand on clique sur les fleches, grâce à un petit script JS.


#slider_fix{
	height:330px;
	overflow:hidden;
}

#slider_move{
	position:relative;
	top:0px;
}


à l'intérieur de ce slider_fixe, des div de class ".vignette", qui contiennent des liens de class ".vign" :


.vignette{
	position:relative;
	left:50%;
	margin-left:-35px;
	padding-top:6px;
	padding-bottom:6px;
}

.vign{
	display:block;
	width:70px;
	height:70px;
}


les liens de class ".vign" sont vides, mais ont une taille fixe et chacun un id différent pour afficher une image en background


.vign_me_not_clicked{
	background: url(../img/cv_sub_menu_me_non.gif) left top no-repeat;
}

#vign_me:hover, .vign_me_clicked{
	background: url(../img/cv_sub_menu_me_oui.gif) left top no-repeat;
}


Bon le code est peut-être un peu lourd, mais il me parait bon tout de même.

voila ce qui s'affiche sur FF :
http://nikophil.free.fr/dl/pasbug.jpg

et voici ce que m'affiche IE6 :
http://nikophil.free.fr/dl/bug.jpg

de une, le overflow:hidden n'est pas respecté, de deux, les images sont coupées en deux, alors que ca ne devrait pas être le cas.

Voila, j'espère avoir été assez clair, pas trop long, et vous remercie d'avance pour votre aide !

NikOo
Modifié par NikOo (24 Oct 2007 - 11:48)
j'me permets de faire un ptit up....
dsl mais ce problème m'embarasse beaucoup... :s

personne n'aurait rien que le soup^çon d'une ptite idée, pour que je puisse fouiller svp ?

merci !
Modifié par NikOo (23 Oct 2007 - 21:50)
Salut,

Bon, joli code un peu compliqué Smiley cligne
Sinon une piste: défaillance de positionnement de ton bloc .vignette qui est excentré te coupant ainsi l'image en 2, du positionnement de ton bloc .vign et du positionnement de ton background. (ouf !! Smiley biggol )
Essaye:
 
.vignette{
	position:relative;
	padding-top:6px;
	padding-bottom:6px;
}

.vign{
	display:block;
	width:70px;
	height:70px;
	margin: auto
}


Avec tes backgrounds en center center

A tester !! Bon courage
hello,

compliqué mon code ?? rooooh Smiley langue

merci de ta réponse, ça marche très bien... je n'avais pas percuté que la div parent puisse empiéter sur un de ses child...

sinon une idée pour l'histoire d'overflow ???
à priori IE reconnait ces histoire d'overflow:hidden, no ?

en tous cas merci !


edit: Bon j'ai résolu mon problème d'overflow !!!
grâce à un pos de gcyrillus qui nous dit :
"Pour IE , il faut passer le conteneur en overflow aussi en position:relative; , c'est un effet secondaire de IE qui force l'affichage des element en position:relative (donc celui qui defile est passé en avant plan ) en mettant son parent aussi en position relative , alors il n'est plus visible que dans la zone de celui-ci."

merci gcyrillus !
Modifié par NikOo (24 Oct 2007 - 02:40)
Merci pour l'astuce ! J'avais cherché longtemps, et finalement, un simple position:relative solutionne l'affaire....
Bonjour,

j'ai le même problème , mais jai besoin de la mettre la propriété position en absolute dans mon cas Smiley smile
Sujet clos
Aller à