Internet Explorer et les margin négative
Bonjour,
j'ai personnaliser un champ de recherche sur mon site, sous tous les navigateur internet, ça donne ça :
http://i49.servimg.com/u/f49/12/59/88/86/sans_t10.png
Tous sauf Internet Explorer 9 bien évidement qui lui affiche ça :
http://i49.servimg.com/u/f49/12/59/88/86/sans_t11.png
(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.
http://i49.servimg.com/u/f49/12/59/88/86/sans_t12.png
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:
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:
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:
1
2
3
| #searchBar {
width: 50px;
} |
Auriez vous des suggestions ? J'ai épuisé mon stock de ruse ...
