Display none

Bonjour à tous ,

J'suis pas fortiche en Css alors ne rigolez pas ,

voilà c'est simple (et difficile pour moi!)

Au depart j'avais ça :

.PSR_stars input {
display: none;
}

C'est parfait avec Firefox MAIS ça bloque avec IE8 (et surement les autres ie7 ...6 ..5 etc..!)

Alors j'ai fais

.Stars input {

/* pour IE */
filter:alpha(opacity=0);

/* Pour le monde entier en CSS standard */

opacity:0;
width: 0; height: 0;
} 

Et ça marche pour IE8 mais pas pour les autres

y a t il un hack pour que le display:none ne soit pas lu par IE ?
comme avec le filter qui n'est pas lu par Firefox!

Je ne sais pas si je me suis je bien fais comprendre ?
Modifié par jefblog (19 Aug 2009 - 12:41)

Salut,

C'est tout à fait bizarre comme problème, j'utilise le display:none sur un site et ça marche parfaitement sur IE6,7,8 etc... tu as une page en ligne qu'on puisse voir le problème ?

c'est sur http://jefblog.free.fr/wordpress/?p=23220
C'est le Star rating qui bloque
le deuxieme Post star rating (le premier c'est w-p star rating qui bloque aussi mais pour d'autres raisons) pour l'instant je laisse display none et donc ça marche donc sur Firefox seulement
Modifié par jefblog (19 Aug 2009 - 12:39)

Chez moi le rating dans les articles fonctionne sur ie8 et FF et chrome, c'est juste sur l'index que je n'ai rien.

Bizarre . chez moi cela ne marche pas avec IE8 (essai avec plusieurs PC et toujours le meme probleme (mais
pas fais d'essai avec un MAC)

+1 avec N-J ça marche aussi chez moi sous ie8

Vous etes sûr que lorsque vous votez le vote passe ? car il n'est pas enregisrté dans les votes avec IE alors que sous chrome et FF cela passe .

jefblog a écrit :
Vous etes sûr que lorsque vous votez le vote passe ?

Ça, c'est une question toute différente qui n'a rien à voir avec le CSS à priori. Mais plutôt avec un problème en bug JavaScript, par exemple.

ok , c'est donc pas un probleme d'affichage ....je me plonge sur le code et je vois ça
merci

jefblog a écrit :
ok , c'est donc pas un probleme d'affichage ...

Disons que dans 99% des cas un problème d'affichage ça se... voit. Si ça ne se voit pas, il y a de fortes chances pour que ça soit autre chose. Par ailleurs, IE8 ayant un support très correct de CSS 2.1, ça limite les risques.

ok , mais j'ai pas les bons yeux de l'expert en Css

Ceci dit je comprend toujours pas pourquoi si je mets le second code , IE marche bien ? juste en enlevant le display:none ???

Effectivement il y a surement un problème autre mais c'est au dessus de mes compétences .
Encore merci pour vos conseils ..

Vous aviez raison ....mais j'avais pas tort:

Aprés étude du code php:
les lignes qui posent problème :

<div class="PSR_container">
<form id="PSR_form_22710" action="/wordpress/index.php" method="post" class="PSR_stars" onmouseout="PSR_star_out(this)">

<input type="radio" id="psr_star_22710_1" class="star" name="psr_stars" value="1" onclick="PSR_save_vote(22710,1)" />
<label class="PSR_full_voting_star" for="psr_star_22710_1" onmouseover="PSR_star_over(this, 1)">1</label> 

<input type="radio" id="psr_star_22607_1" class="star" name="psr_stars" value="1" onclick="PSR_save_vote(22607,1)" />
<label class="PSR_no_voting_star" for="psr_star_22607_1" onmouseover="PSR_star_over(this, 1)">1</label>

<input type="radio" id="psr_star_22607_2" class="star" name="psr_stars" value="2" onclick="PSR_save_vote(22607,2)" />
<label class="PSR_no_voting_star" for="psr_star_22607_2" onmouseover="PSR_star_over(this, 2)">2</label> 

<input type="radio" id="psr_star_22607_3" class="star" name="psr_stars" value="3" onclick="PSR_save_vote(22607,3)" />
<label class="PSR_no_voting_star" for="psr_star_22607_3" onmouseover="PSR_star_over(this, 3)">3</label>

<input type="radio" id="psr_star_22607_4" class="star" name="psr_stars" value="4" onclick="PSR_save_vote(22607,4)" />
<label class="PSR_no_voting_star" for="psr_star_22607_4" onmouseover="PSR_star_over(this, 4)">4</label> 

<input type="radio" id="psr_star_22607_5" class="star" name="psr_stars" value="5" onclick="PSR_save_vote(22607,5)" />
<label class="PSR_no_voting_star" for="psr_star_22607_5" onmouseover="PSR_star_over(this, 5)">5</label>

<input type="submit" name="vote" value="Voter" />
<input type="hidden" name="p" value="22710" />

<span class="PSR_tvotes"> votants:</span>
<span class="PSR_votes">1</span>
<span class="PSR_tvote"> ...et si vous votiez?</span>
</form>
</div> 

et ici le css style des inputs est :

.PSR_Stars input {
display: none;
}

Et bien ,
Dans le cas de Chrome et FF : l'input de type "submit" au nom 'voter' des dernières lignes est bien SOUS les radios boutons (on clique sur les etoiles)

et chez IE il est ... ? ben je sais pas trop ou ? (on clique et il ne se passe rien paske y a pas de sumbmit dessous

J'ai bien essayé :
dans mon CSS:

.PSR_stars input{
  display: none; 
  }

/* pour IE */
 * html .PSR_stars input{
 display: block;
 filter:alpha(opacity=0);
opacity:0;
width: 0; height: 0;
  }

Mais ça marche pas ... comment ecraser le display:none ?

Modifié par jefblog (19 Aug 2009 - 12:40)

ce qu'il me faudrait , c'est un code css qui empeche de lire Display:none a IE car des que celui ci le lit , je ne sait pas lui enlever

c'est plutôt un 'quick fix' qu'une habitude à prendre car en général c'est mieux de trouver la base du problème plutôt que de le contourner:
http://www.alsacreations.com/astuce/lire/48-quest-ce-que-les-commentaires-conditionnels.html

Je préfèrerais tous mettre dans le CSS plutôt que de dupliquer des lignes de style . Mais j'aime pas le hack qui consiste a mettre !important! cela ne fait pas un code trés joli !

Hello,

jefblog a écrit :
j'aime pas le hack qui consiste a mettre !important! cela ne fait pas un code trés joli !

!important en soi n'est pas un hack : il sert à augmenter la priorité d'une déclaration css.

Il peut effectivement être utilisé dans un hack quelconque mais n'a pas de raison particulière de se trouver dans un commentaire conditionnel.
Modifié par Heyoan (15 Aug 2009 - 14:36)

oui, c'est précisément ce que je voudrais faire :
Ne pas mettre de un commentaire conditionnel <--if IE> dans le html , mais de mettre cette séparation directement en dans le style CSS (c'est pour cela que j'avais essayé le :
*html .....display:block

qui devait remettre le "display : none" a "display :block" dans ie

mais ça marche pô! et je sais pas pourquoi?

jefblog a écrit :
Ne pas mettre de un commentaire conditionnel <--if IE> dans le html

Il est vrai que devoir placer un commentaire conditionnel dans le code HTML n'est pas une situation idéale. Mais les commentaires conditionnels, bien utilisés, sont fiables. Les hacks CSS le sont sensiblement moins.