28172 sujets

CSS et mise en forme, CSS3

[Résolu] Background sur input en IE

Bonjour,

J'ai associé à un input un background afin de remplacer la zone de saisie par une image.
Voici le code côté page

<div id=form>
	<label for="mail-inscription">
	<input id="mail-inscription" name="mail" value="Votre email" title="inscription" type="text" onfocus="if(value=='Votre email') this.value='';" onBlur="this.className=al_emailinsc(1);" /></label>				
	<input value="OK" name="recherche-submit" id="recherche-submit" type="submit" />
	<span id="al_userid"></span>
</div><!-- #form -->

et le code côté CSS


#mail-inscription{
	PADDING-RIGHT: 0px; 
	PADDING-LEFT: 18px; 
	BACKGROUND: url(images/input-label.png) no-repeat left top; 
	PADDING-BOTTOM: 0px; MARGIN: 0px; 
	VERTICAL-ALIGN: top; 
	WIDTH: 120px; 
	COLOR: white; 
	BORDER-TOP-STYLE: none; 
	PADDING-TOP: 5px; 
	BORDER-RIGHT-STYLE: none; 
	BORDER-LEFT-STYLE: none; 
	HEIGHT: 22px; 
	BORDER-BOTTOM-STYLE: none;
}


Sur FF et safari, pas de problème en revanche sur IE6, quand je saisi, l'image scrolle vers la gauche et ne reste pas fixe.
Avez vous une idée du problème ? Dois je mettre quelques chose en plus pour IE ?
Modifié par Babali (10 Feb 2009 - 22:31)
D'ailleurs se fonctionnement atypique est visible sur ce site dans la zone recherche de la page d'accueil (en haut dans le bandeau).
Sous IE6 si vous tapez suffisamment de caractères, l'image en background scrolle vers la gauche Smiley cligne
Hello Smiley smile

Babali a écrit :
<div id=form>
Attention si tu codes en XHTML cette écriture n'est pas valide (il manque les guillements).

Tu as une page en ligne où l'on pourrait constater le problème ?
Administrateur
Hello,

En effet, l'astuce de positionner le background en right bottom fonctionne très bien !
Par contre background-attachment : fixed ne marche qu'en mode quirks et ne fonctionne pas si le doctype est correct.

Merci Mikerob pour cette piste Smiley cligne
Modifié par Raphael (10 Feb 2009 - 15:22)
a écrit :

Par contre background-attachment : fixed ne marche qu'en mode quirks et ne fonctionne pas si le doctype est correct.


Euh.. non... ça c'est ce que dit un des commentaires de l'article (pour ie7 d'ailleurs) Smiley cligne , mais si on test avec ce code sous ie6: 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Text input with background image</title>
<style type="text/css">
   .inputboxSearch1 {
	width: 150px;
	margin: 0 0 1em 0;
	border: 1px solid  #333333;
	background:url('img/magnifying-glass.gif') no-repeat left center;
	padding-left:20px;
	background-attachment : fixed;
   }
</style>
</head>
   <body>
      <form id="loginForm" name="loginForm" method="post">
        <div class="inputlabel">Search</div>
	<input class="inputboxSearch1" type="text" size="15" value="" name="pass" />
      </form>
   </body>
</html>


ça fonctionne (le text pass par dessus l'image dans mon cas, mais le pb est pas là Smiley smile )

Par contre ça ne marche pas sur firefox (l'image de fond disparait), mais on est bien d'accord qu'il s'agit d'un hack pour i.e6 et qu'il sera placé dans un css propre à i.e6 Smiley smile
Modifié par Mikerob (10 Feb 2009 - 16:55)
Administrateur
Mikerob a écrit :

ça fonctionne (le text pass par dessus l'image dans mon cas, mais le pb est pas là Smiley smile )

Ah ben testé sur IE7 et ça ne fonctionne pas Smiley smile
Raphael a écrit :

Ah ben testé sur IE7 et ça ne fonctionne pas Smiley smile


Ok, donc au final BeliG soit tu utilise le background en right bottom (à valider quand même), soit tu met background-attachment : fixed; dans une css eulement pour i.e6 Smiley smile
J'ai suivi les conseils et mis background-attachment : fixed dans une css pour IE.

Merci à tous.
Administrateur
Mikerob a écrit :
soit tu met background-attachment : fixed; dans une css eulement pour i.e6


Babali a écrit :
J'ai suivi les conseils et mis background-attachment : fixed dans une css pour IE.


... Ce qui ne fonctionnera donc pas sur IE7 Smiley decu
Mikerob a écrit :
Ok, donc au final BeliG soit tu utilise le background en right bottom (à valider quand même), soit tu met background-attachment : fixed; dans une css eulement pour i.e6 Smiley smile
Euh... ok Smiley lol
Sujet clos
Aller à