Display:none sur IE

**chantren** · 04/08/2010, 14h08

Bonjour à tous,

voilà le morceau de code que j'utilise sur Firefox et qui fonctionne parfaitement.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
<html>
<body>
 
<style type="text/css">#dialog\:cancel-button { display:none; } </style>
<br/>
bla bla bla
<br/>
<input id="dialog:ok-button" name="dialog:ok-button" type="button" OnClick="javascript:history.back();" value="Ok"/>
<input id="dialog:cancel-button" name="dialog:cancel-button" type="button" OnClick="javascript:history.back();" value="Annuler"/>
</body>
</html>

Je souhaite donc cacher le second bouton. Le problème est que je ne peux pas changer son nom (qui contient un caractère ':'), car il s'agit d'un bouton dans une application web complète dont je ne peux pas modifier les sources, j'y ajoute donc du contenu et je voudrais seulement cacher le bouton en "trichant" un peu.

Merci de votre aide.

Cordialement,

Nathan

**ornitho13** · 04/08/2010, 15h21

Salut,

je te conseille de rajouter une classe à ton input id="dialog:cancel-button" et donc d'utiliser cette classe pour appliquer le "display:none"

Par exemple

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
<html>
<body>
 
<style type="text/css">.cancelButton { display:none; } </style>
<br/>
bla bla bla
<br/>
<input id="dialog:ok-button" name="dialog:ok-button" type="button" OnClick="javascript:history.back();" value="Ok"/>
<input id="dialog:cancel-button" class="cancelButton" name="dialog:cancel-button" type="button" OnClick="javascript:history.back();" value="Annuler"/>
</body>
</html>

Au passage, mettre des ":cancel-button" dans un "id" ou une "class" n'est pas une très bonne idée. En effet les ":" sont réservés pour les pseudo-éléments et les pseudo-classes en CSS.

voila j'espere que cela t'aidera

++

**chantren** · 04/08/2010, 16h00

Hello,

merci pour ta réponse mais je savais déjà tout ça

Mon souci ici est que j'applique du code supplémentaire à un code déjà existant, je ne peux donc pas modifier la déclaration du bouton que je veux cacher (que ce soit le nom ou même rajouter une classe). En fait, je souhaite juste avoir le même comportement que j'ai avec Firefox sur IE (avec le code mentionné en haut mais qui n'est bien sûr pas exhaustif).

Cordialement,

Nathan.

**ornitho13** · 04/08/2010, 16h12

Bon et bien, j'ai bien une solution mais elle ne fonctionnera que sur les navigateurs acceptant le CSS2 (ça devrait aller)
utilise le pseudo-element :last-child.

Exemple

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<html>
    <body>
        <style type="text/css">
	    input:last-child{ display:none; } 
        </style>
        <br/>
            bla bla bla
        <br/>
        <input id="dialog:ok-button" name="dialog:ok-button" type="button" OnClick="javascript:history.back();" value="Ok"/>
        <input id="dialog:cancel-button" name="dialog:cancel-button" type="button" OnClick="javascript:history.back();" value="Annuler"/>
    </body>
</html>

et ainsi le dernier input (donc le "cancel") sera en "display:none"

**Bisûnûrs** · 04/08/2010, 16h29

Au pire tu peux affecter ta valeur en Javascript.

**chantren** · 04/08/2010, 16h59

Même constat en utilisant "last-child", cela fonctionne sur Firefox mais pas IE (version 7).

Sinon, je ne suis pas expert en Javascript, comment puis-je procéder ? En général j'utilise le javascript pour réaliser un event lors d'un clic, dans mon cas il faut que l'input soit cachée directement sans intervention de l'utilisateur.

Cordialement,

Nathan.

Display:none sur IE

CSS

Vue hybride

Discussions similaires

Partager

Partager