28172 sujets

CSS et mise en forme, CSS3

IE7 et les DIV

Pages :
Bonjour,

J'ai un problème sur un site qui doit impérativement être compatible IE7.

Certains boutons sont constitués d'un élément BUTTON avec 3 DIVs dedans pour faire de beaux boutons avec arrondis et icônes à gauche.

Voilà un exemple de code pour ces boutons :
<html>
  <head>
  <title></title>
  <style>
    .gauche, .milieu, .droite
    {    
      float: left;
      height: 23px;
    }
  
    .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>


Ca fonctionne bien sous IE8, IE9, FF3.5, FF4, GC11, Safari 5 et Opéra 11 mais pas sous IE7 (encore lui).

IE7, au lieu d'élargir l'élément BUTTON l'agrandit, mettant les 3 DIV les uns en dessous des autres (au lieu d'être les uns à côté des autres).

Il y a une solution 100% CSS à ça ?
salut,

pourquoi n'utilises tu pas plutôt la propriété background pour définir l'aspect de tes boutons ?

A+
Hello o06,

Comme tu t'en doutes, le code associé à mon post n'est qu'un exemple.
Comme je veux définir la uniquement couleur de fond, je cible et utilise "background-color".

Tu devrais ouvrir un autre sujet sur les propriétés CSS dotées de raccourcis (border, font, etc...) si tu veux plus d'infos sur le sujet.

Mais on s'écarte du sujet original...

@+
Modifié par wcompaore (19 May 2011 - 12:10)
Alors là...

Vraiment je comprend pas pourquoi tu appliques pas une simple image en background sur ton bouton...
Oui, j'ai le DOCTYPE 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
.

Je ne peux pas utiliser une image de fond car les boutons du site ont tous des largeurs différentes. C'est pour cela que j'ai :
- un côté gauche (avec une icone et une image background, sur le site) avec arrondis haut et bas
- le milieu du bouton (contient le texte et une image de fond répétée sur toute la largeur qui est variable, sur le site)
- le côté droit avec arrondis haut et bas (avec une image background, sur le site).

D'où mon exemple volontairement plus simpliste et orienté sur mon problème.

Thx
Modifié par wcompaore (19 May 2011 - 14:44)
ok, effectivement l'obligation de 'terminer' le bouton avec une couleur différente complique les choses.
sinon par curiosité comment as tu procédé en javascript ?
Modifié par o06 (19 May 2011 - 15:59)
o06 a écrit :
ok, effectivement l'obligation de 'terminer' le bouton avec une couleur différente complique les choses.
sinon par curiosité comment as tu procédé en javascript ?


Je ne comprends pas en quoi une couleur différente complique quoi que ce soit...

Sinon, la solution en JS est de calculer la largeur des trois DIV et d'affecter leur somme au BUTTON parent.
je voulais dire compliqué avec la solution de la propriété background.
si le bouton n'avait pas de vert à la fin, une image 'calée' à gauche, un couleur de fond (si uni et pas de dégradé) et le texte avec un padding-left de la largeur de l'image de gauche.

et du coup dans le cas - rare - du javascript désactivé, tes boutons donnent quoi ? t'as prévu qque chose ?

sinon c'est vrai qu'on s'est éloigné de ton sujet. à mon humble avis si tes 3 divs ne s'alignent pas avec une propriété float:left, c'est qu'il doit y avoir un souci plutôt dans le code html. non ?
Modifié par o06 (19 May 2011 - 16:16)
Non, pas de solution de replis, le JS est un pré-requis pour le site concerné : il y a du jQuery partout.

C'est pour cela que je cherche désespérément une solution propre en CSS.

Thx
o06 a écrit :
sinon c'est vrai qu'on s'est éloigné de ton sujet. à mon humble avis si tes 3 divs ne s'alignent pas avec une propriété float:left, c'est qu'il doit y avoir un souci plutôt dans le code html. non ?


Comme moi, tu disposes du code, si tu vois une raison logique pour laquelle seul IE7 ne l'accepterais pas, je suis tout ouïe ! Moi, je ne vois pas.
comme tu disais avoir fournit une version simplifiée de ton code , je pensais que ton bouton était peut être contenu dans un élément parent ou coexister avec des élément frères qui pourraient poser pb.
si le code de ton bouton est celui mentionné au début du post, je suis comme toi, je sèche Smiley smile
Oui, le code que j'ai fourni ne fonctionne pas non plus exclusivement sur IE7 et possède la même structure que sur mon site et les mêmes symptômes.
o06 a écrit :
je voulais dire compliqué avec la solution de la propriété background.
si le bouton n'avait pas de vert à la fin, une image 'calée' à gauche, un couleur de fond (si uni et pas de dégradé) et le texte avec un padding-left de la largeur de l'image de gauche.


Je vois en quoi ça complique que le bouton doive se terminer par du vert :

- Une image avec les parties rouge et jaune calée à gauche.
- Fond vert sur le bouton.

Et voilà.


button {
background: green url(images-rouge-et-jaune.jpg) left top repeat-y;
}
@jb_gfx

je pensais qu'il ne voulait pas de texte sur la partie verte.
comme tu le suggères, si le texte dépasse la largeur de image-rouge-et-jaune.jpg, la fin se retrouvera sur du vert. non ?
jb_gfx,

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

En réalité, j'ai 3 images qui composent les boutons dont la largeur varie.

Donc, pas question d'image de taille fixe, et pas de couleur de fond : ce sont des images en réalité.

Et sinon, pour le problème de positionnement IE7, tu as une idée ?

Thx.
Modifié par wcompaore (19 May 2011 - 17:58)
Pages :
Sujet clos
Aller à