Suivez les fils RSS
 
Rechercher dans le sujet :
Forum
» CSS et mise en forme, CSS3
» [Résolu] Background sur input en IE
Auteur
Babali
# 10 Feb 2009 - 09:10:40
Citer
67 Posts
 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)
Si je sais ce que je cherche, est ce que saurai ce que je trouverai ?
^
Babali
# 10 Feb 2009 - 11:56:22
Citer
67 Posts
 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 cligne
Si je sais ce que je cherche, est ce que saurai ce que je trouverai ?
^
BeliG
# 10 Feb 2009 - 12:30:31
Citer
870 Posts
 Hello 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 ?
http://www.kdigit-studio.com 
^
Mikerob
# 10 Feb 2009 - 13:16:02
Citer
152 Posts
 Salut Babali,

Apparement tu peux règler ton problème en utilisant la propriété background-attachment : fixed;

Maintenant si préfère une autre solution, regarde les commentaires de ce post
Modifié par Mikerob (10 Feb 2009 - 13:16)
Si vous avez besoin de quelque chose, appelez-moi. Je vous dirai comment vous en passer
http://www.lajoiedevivre.net msn 
^
Raphael
# 10 Feb 2009 - 15:22:01
Citer
twitter.com/goetter
Administrateur
12017 Posts
 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 cligne
Modifié par Raphael (10 Feb 2009 - 15:22)
Le livre qui va vous permettre d'aller (vraiment) plus loin avec CSS : "CSS avancées - vers HTML5 et CSS3"
http://www.goetter.fr 
^
Mikerob
# 10 Feb 2009 - 16:54:22
Citer
152 Posts
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) 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à 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 smile
Modifié par Mikerob (10 Feb 2009 - 16:55)
Si vous avez besoin de quelque chose, appelez-moi. Je vous dirai comment vous en passer
http://www.lajoiedevivre.net msn 
^
Raphael
# 10 Feb 2009 - 17:28:41
Citer
twitter.com/goetter
Administrateur
12017 Posts
Mikerob a écrit :

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

Ah ben testé sur IE7 et ça ne fonctionne pas smile
Le livre qui va vous permettre d'aller (vraiment) plus loin avec CSS : "CSS avancées - vers HTML5 et CSS3"
http://www.goetter.fr 
^
Mikerob
# 10 Feb 2009 - 17:57:02
Citer
152 Posts
Raphael a écrit :

Ah ben testé sur IE7 et ça ne fonctionne pas 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 smile
Si vous avez besoin de quelque chose, appelez-moi. Je vous dirai comment vous en passer
http://www.lajoiedevivre.net msn 
^
Babali
# 10 Feb 2009 - 22:30:10
Citer
67 Posts
 J'ai suivi les conseils et mis background-attachment : fixed dans une css pour IE.

Merci à tous.
Si je sais ce que je cherche, est ce que saurai ce que je trouverai ?
^
Raphael
# 11 Feb 2009 - 10:02:35
Citer
twitter.com/goetter
Administrateur
12017 Posts
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 decu
Le livre qui va vous permettre d'aller (vraiment) plus loin avec CSS : "CSS avancées - vers HTML5 et CSS3"
http://www.goetter.fr 
^
BeliG
# 11 Feb 2009 - 10:09:43
Citer
870 Posts
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 smile
Euh... ok lol

http://www.kdigit-studio.com 
^
Mikerob
# 11 Feb 2009 - 10:41:10
Citer
152 Posts
 mouarf... faute de copier coller de nom.. autant pour moi BeliG rolleyes
Si vous avez besoin de quelque chose, appelez-moi. Je vous dirai comment vous en passer
http://www.lajoiedevivre.net msn 
^
BeliG
# 11 Feb 2009 - 10:50:39
Citer
870 Posts
 Y a aucun souçi smile




Allez... biere

http://www.kdigit-studio.com 
^
Le sujet est clos.
Aller à