Discussion :

[Nheavy]

Bonjour,

j'ai personnaliser un champ de recherche sur mon site, sous tous les navigateur internet, ça donne ça :



Tous sauf Internet Explorer 9 bien évidement qui lui affiche ça :



(mode de compatibilité non sélectionné)

Donc, j'ai fait des test avec le code CSS de mon champ et j'ai constater que selon le width du champ, il y a possibilité d'obtenir un résultat acceptable.



Le soucis, c'est que j'aimerais que le width ne soit modifié que sous IE, j'ai donc tenter de bidouiller avec les hacks IE de cette manière :

Code CSS

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
#motrech { width: 125px; height: 32px; margin: 6px 5px 0; display: hidden }
 
.search { margin: 0; padding: 0; border: 0 }
 
#searchBar {
	width: 100%; 
	float: left; padding: 10px 60px 10px 10px;
	background: #ededed url(../img/default/navigation/bar-bg.png) repeat-x;
	border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;
	font: italic 12px Georgia; color: #898989;
	outline: none; /*Remove Chrome and Safari glows on focus*/
}	
	#searchBar:hover, #searchBar.active { background: #ebf3fc url(../img/default/navigation/bar-bg-active.png) repeat-x }
 
#searchButton {
	width: 30px; height: 30px; float: left; margin: 3px 0 0 -40px;
	background: url(../img/default/navigation/search.png); text-indent: -9999px;
	padding: 0 0 0 30px; /*IE fix*/
	cursor: pointer;
}
	#searchButton:hover { background-position: 0 -94px }

Code HTML

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div id="motrech">
				<!--[if IE]>
				<div style="width:50px">
				<![endif]-->
				<form action="http://www.x-recherche.com/cgi-bin/xsearch" method="get" accept-charset="utf-8" target="xrres" class="search">
					<fieldset class="search">
						<input type="hidden" name="name" value="nheavy" class="search"/>
						<input type="hidden" name="lang" value="fr" class="search"/>
						<input type="text" id="searchBar" class="search" />
						<input type="submit" value="Search" id="searchButton" class="search"/>
					</fieldset>
				</form>
				<!--[if IE]>
				</div>
				<![endif]-->
				</div>

Malheureusement, ça ne fonctionne pas alors que ça fonctionne si je supprime le hack et modifie le CSS de cette manière :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
#searchBar {
	width: 50px; 
}

Auriez vous des suggestions ? J'ai épuisé mon stock de ruse ...

[Muchos]

Et en plaçant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
<!--[if IE]>
  <style type="text/css">
    #searchBar {width: 50px;}
  </style>
<![endif]-->

PS: selon moi, les commentaires conditionnels ne sont pas des hacks.

[Nheavy]

Ça fonctionne, merci beaucoup !