28172 sujets

CSS et mise en forme, CSS3

IE7 et les DIV

Pages :
wcompaore a écrit :

Je répète encore une fois : cet un exemple que j'ai fourni !


Alors donne un (ou plusieurs) exemples concrets du résultat que tu veux. Parce que dans l'état actuel c'est incompréhensible. Smiley cligne
Mon exemple est largement suffisant.

Si tu veux comprendre, tu prends le code, l'enregistres et ouvres la page HTML sous IE8 : tu as le bon résultat. Tu l'ouvres sous IE7, tu as le problème.
ptitvincent a écrit :
Bonjour Wcompaore.

j'ai la désagréable impression qu'on ne lit pas mes post aujourd'hui Smiley confus
est-ce ton cas ? Smiley confused


C'est lu, mais comme tu remarques, j'ai un problème bien précis sous IE7 et tu me parles de balise FORM obligatoire...

Je me concentre sur les posts qui visent à résoudre mon problème, pour le reste, je laisse ça à ceux qui ont le temps.

Si une balise manque, explique donc pourquoi pour notre culture générale (même si ça ne résoudra pas mon problème).

Thx.
Modifié par wcompaore (20 May 2011 - 14:26)
wcompaore a écrit :


C'est lu, mais comme tu remarques, j'ai un problème bien précis sous IE7 et tu me parles de balise FORM obligatoire...

Je me concentre sur les posts qui visent à résoudre mon problème, pour le reste, je laisse ça à ceux qui ont le temps.

Si une balise manque, explique donc pourquoi pour notre culture générale (même si ça ne résoudra pas mon problème).

Thx.


Je te prierai à l’avenir de ne pas me manquer de respect. Moi aussi je perd mon temps dans ce cas à chercher à t'aider.

Voici la réponse à ton problème :

button
    {
        white-space : nowrap;
    }
    
    .gauche, .milieu, .droite 
    {     
      height: 23px; 
      display : inline;
    }
Je viens d'essayer ta solution et ça ne fonctionne complètement non plus sous IE7.

Les DIVs gauche et droite perdent leur largeur et sont donc non visibles (width=0px).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
  <title></title>
  <style>
    button
    {
      white-space : nowrap;
    }
  
    .gauche, .milieu, .droite
    {    
      /*float: left;*/
      height: 23px;
      display: inline;
    }
  
    .gauche
    {
      width: 23px;
      background-color: Red;
    }
    
    .milieu
    {
      width: auto;
      background-color: Yellow;
    }
    
    .droite
    {
      width: 5px;
      background-color: Green;
    }
  </style>
  </head>
  <body>
    <button>
      <div class="gauche"></div>
      <div class="milieu">Texte du bouton</div>
      <div class="droite"></div>
    </button>
  </body>
</html>


Je reste donc sur ma solution JS pour l'instant.

Thx.
Modifié par wcompaore (23 May 2011 - 14:51)
oui, met le doctype suivant pour ie7 :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">

(ie7 c'est le bien Smiley smile )
Modifié par ptitvincent (23 May 2011 - 15:38)
ptitvincent a écrit :
oui, met le doctype suivant pour ie7 :
&lt;!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 3.2 Final//EN&quot;&gt;

(ie7 c'est le bien Smiley smile )


Effectivement, dans mon exemple ça fonctionne bien mais malheureusement modifier le DOCTYPE de tout le site est trop impactant, je ne peux pas m'engager dans cette voix.

Je me souviendrai de ta solution malgré tout.

Merci.
n'aurais tu pas une solution d'include ou autre ? de ce fait tu pourrait faire un head pour ie7 et un autre pour les autres navigateur ? (c'est ce que je fais en php pour ma part de manière générales.)
Ce serait possible mais le fait d'utiliser ce DOCTYPE uniquement sur les pages qui présentent le problème sous IE7 m'oblige à revoir leur structure complète (l'affichage est à revoir totalement).

C'est techniquement faisable mais les effets de bords sont trop nombreux sur l'affichage : trop risqué.

Sinon, je pense effectivement que créer des feuilles de style pour chaque navigateur (ou par groupe) est une bonne pratique si elle se justifie par de grosses différences d'affichage à homogénéiser.

Je pense vraiment que cette structure de bouton n'est pas compatible simplement sur IE7 et les autres navigateurs avec ce DOCTYPE.

Merci pour tes conseils !
Modifié par wcompaore (24 May 2011 - 12:25)
sinon tu as toujours la solution des conditionals comments (après tout.. Smiley smile autant que ça serve)


<!--[if lte IE 7]>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<![endif]-->
<!--[if gt IE 7]>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<![endif]-->


désolé si ça ne t'aide pas plus que ça, à bientot.
Solution à retenir mais ça me contraint à modifier chaque page où le cas se présente (elles sont nombreuses). Dans mon cas, ce n'est pas la meilleure solution, il me faut quelque chose de plus centralisé comme du CSS (oui, je cherche encore un peu) ou du JS (j'ai un fichier de script inclus dans chaque page).

Avec toutes les solutions évoquées il y a de quoi s'aiguiller correctement suivant le contexte et les contraintes rencontrés.

Merci à toi, et aux autres.

@+
Modifié par wcompaore (24 May 2011 - 14:50)
Pages :
Sujet clos
Aller à