28173 sujets

CSS et mise en forme, CSS3

Bonjour tout le monde,

Sous mon site propulsé avec DotClear 2 bétâ, et un habillage maison, je fais apparaitre une loupe dans le coin en haut à droite pour afficher le mini formulaire de recherche :
En jQuery, j'ai bricolé :
	$("#search h2").hide();
		$("#search form").show();
		$("#sidebar h2").click(function(){
			var target = $(this).next('#sidebar ul')
			$("#sidebar ul:visible").not(target).slideUp();
			target.slideToggle();
			$("#footer").blur();
                       return false;
     		});

		$("#search input").hide();
		$("#search p").prepend("<span title=\"Recherche\"></span>");
		$("#search span").mouseover(function () {
			$(this).css("cursor","pointer")
			            .animate( { color:'#CCFF37' }, 1500)
                 }).mouseout(function () {
			$(this).css("cursor","pointer")
			            .animate( { color:'#DDD' }, 1500)
                 });
		$("#search span").toggle(function(){
			$("#search input").fadeIn("8000");
     		},function(){
			$("#search input").fadeOut("8000");
                 });


Tandis qu'en Css, j'ai :
#search {margin:0;padding:0;text-align:left;position:fixed;top:0;right:0}
#search label{font-size:100%  }
#search fieldset{border:none}
#search p{margin:0;padding:0;}
#search form {margin:0;padding:5px }
#search input[type=text] {font-size:100%;margin:0;padding:3px 0;width:10em; } 
#search input[type=submit] {font-size:100%;margin:0;padding:3px;} 
#search span{background:transparent url(img/search.png) no-repeat center left;padding:17px;margin:0;}


Le site en question est : http://www.sakeco.net/blog
Et le thème pour DotClear est disponible là : http://themes.dotaddict.org/galerie-dc2/details/Wjsdark-Simple

J'ai dex petites pistes :
- Mon <span> vide de contenu est la cause de la non apparition de ma loupe sous Opera (tout comme Ie d'ailleurs)
- Des z-index manquent ?

Qu'en pensez vous ? Faut il que je fasse autrement pour avoir l'effet escompté sur tous les navigateur ?

Merci pour vos aides et passez de bonnes fêtes.
Bonjour,

Si je ne m'abuse, tu as ceci côté HTML:
<div id="sidebar">
	<div id="search">...</div>
</div>
et ceci côté CSS:
#sidebar {overflow: hidden;}

Je dirais donc que le comportement d'Opera est logique, et que pour une raison de cuisine interne Firefox ne cache pas les éléments en position: fixed qui sortent d'un bloc en overflow: hidden.

Ou bien peut-être le comportement de Firefox correspond-il aux spécifications. Je ne les ai pas épluchées pour l'occasion, mais il se pourrait qu'il s'agisse d'une zone d'ombre de la spécification (car un cas très particulier: positionner en fixed un élément enfant d'un conteneur également positionné en fixed et en overflow: hidden... ça s'appelle chercher les ennuis Smiley cligne ).