IE : div coupée en autant de div contenue (aaarrrgghhh)

Question

webslave

19 Apr 2010 à 14:59

Bonjour,
une petite question... dont la réponse me permettra peut-être de régler un problème sur lequel je galère depuis plusieurs heures !!! Smiley bawling

J'ai essayé de le simplifier ainsi

*{margin:auto;padding:0;}
#conteneur{
width:580px;
height:200px;
background-color:#999999;
}
.element{
float:left;
margin-right:20px;
margin-top:30px;
}
.gauche{
width:50px;
background-color:#CC0000;
float:left;
}
.droite{
width:30px;
background-color:#66CC66;
float:left;
}
a{
float:left;
}
</style>
</head>

<body>
<div id="conteneur">
	<div class="element">
    	<div class="gauche">&nbsp;</div>
        <a href="">toto le toto</a>
        <div class="droite">&nbsp;</div>
    </div>
    
    <div class="element">
    	<div class="gauche">&nbsp;</div>
        <a href="">toto le toto</a>
        <div class="droite">&nbsp;</div>
    </div>
    
    <div class="element">
    	<div class="gauche">&nbsp;</div>
        <a href="">toto le toto</a>
        <div class="droite">&nbsp;</div>
    </div>
    
    <div class="element">
    	<div class="gauche">&nbsp;</div>
        <a href="">toto le toto</a>
        <div class="droite">&nbsp;</div>
    </div>
    
    <div class="element">
    	<div class="gauche">&nbsp;</div>
        <a href="">toto le toto</a>
        <div class="droite">&nbsp;</div>
    </div>
</div>

Dans FF, si la div element toute entière dépasse du conteneur, elle est décalée en dessous

Dans IE, la div element est découpée et chaque div contenue ds element est mis en dessous l'une de l'autre !!!

Comment faire pour avoir dans IE le même comportement que dans FF ?
Je suis étonné de ne pas avoir été confronté au problème avant.. je pète les plombs ou quoi ?

Merci pour votre aide.

Webslave Smiley sweatdrop

(modif : class .milieu virée)
Modifié par webslave (26 Apr 2010 - 12:00)

spiral123

19 Apr 2010 à 17:32

Peut être une largeur à ta classe .element est nécessaire, sinon essayes aussi d'y ajouter un : white-space:nowrap

webslave

20 Apr 2010 à 10:19

Merci Spiral123,
en fait, la largeur des div "elements" est générée en php et elles ont donc des largeurs différentes dans le code d'origine...
Le white-space:nowrap fonctionne mais uniquement sur certaines d'entre elles... Smiley crazy

Webslave

webslave

21 Apr 2010 à 10:37

Vraiment personne ? Smiley cavapa

creadiff

24 Apr 2010 à 23:22

Tu aurais une meilleure mise en forme comme ceci:


#conteneur {
    width:560px;
    height:170px;
    padding-right:20px;
    padding-top:30px;
    background-color:#999999;
}
.element {
    display:inline-block;
    height:[hauteur voulue];
}

Pour faire ce que tu souhaites, il est important de préciser une hauteur pour les blocs; c'est pour ça que leur hauteur n'est pas fixe dans ton exemple sous IE.

gc-nomade

24 Apr 2010 à 23:40

bonsoir,

autre possibilité si tu souhaite affiché des fond differents a droite et a gauche , tout en restant en css 2.1 , c'est d'imbriqué ces éléments.


<div class="gauche"><a href="#" class="droite">0+0=toto</a></div>

.gauche {float:left;padding-left:50px;background:url(gauche.png) repeat-y left;/* width:230px; <a> = .milieu ? */}
.droite {display:block;padding-right:30px;background:url(droite.png) repeat-y right;}

.. si j'ai saisi ce que tu veut .

GC

webslave

26 Apr 2010 à 11:57

Bonjour et merci pour votre aide,
@creadiff -> si je mets ta solution, IE n'est toujours pas satisfait et me fait passer chaque bloc conteneur à la ligne ! Normal, il n'y a plus de float... et en rajoutant donc un float:left dans .element, bah ça donne ça :

@gc-nomade -> je suis obligé de laisser 2 divs de chaque côté du lien (elles contiendront des images en fait)
(et pour la classe ".milieu", c'est un reliquat d'essais, désolé, j'ai oublié de la virer (puisque c'est l'hyperlien <a href="">, pas besoin... je la vire dans mon 1er message)
dur.........

Webslave
Modifié par webslave (26 Apr 2010 - 11:59)

fvsch

26 Apr 2010 à 12:06

webslave a écrit :
@creadiff -> si je mets ta solution, IE n'est toujours pas satisfait et me fait passer chaque bloc conteneur à la ligne !

D'une, ce n'est pas le cas de IE8 et IE9.
De deux, ce n'est pas «normal Smiley car

il n'y a plus de float», c'est juste une conséquence du support partiel de display:inline-block dans IE7. Smiley cligne

webslave a écrit :
@gc-nomade -> je suis obligé de laisser 2 divs de chaque côté du lien (elles contiendront des images en fait)

Ça a l'air d'être typiquement le genre de chose pour lesquelles on utiliserait des éléments imbriqués (<a href="#"><span>...</span></a>) plutôt que de mettre des éléments de décoration avant et après (<div></div><a href="#">...</a><div></div>). Problème de structure HTML?

On peut voir le design exact qui est visé?

webslave

26 Apr 2010 à 13:10

Florent V. a écrit :
De deux, ce n'est pas «normal il n'y a plus de float», c'est juste une conséquence du support partiel de display:inline-block dans IE7.

Exact, je suis sous IE7... je n'ai pas de version supérieure. Mea culpa !

Florent V. a écrit :
Ça a l'air d'être typiquement le genre de chose pour lesquelles on utiliserait des éléments imbriqués (<a href="#"><span>...</span></a>) plutôt que de mettre des éléments de décoration avant et après (<div></div><a href="#">...</a><div></div>). Problème de structure HTML?

On peut voir le design exact qui est visé?


<div class="element">
   <img (coin gauche) />
   <a href="">
      <img  (petite)/> 
      <span class="titre">Je suis le titre qui change</span>
   </a>
   <img (coin droit) />
</div>

J'espère que c'est clair. Smiley smile

Merci.

fvsch

26 Apr 2010 à 13:53

webslave a écrit :
upload/29008-design.jpg

Un SPAN dans un A devrait suffire. Pour un menu de navigation, on peut avoir une liste non ordonnée (ul#nav, li flottants...), et ensuite le code suivant:

#nav a {
  display: block;
  padding-right: 12px;
  color: white;
  background: #444 url(menu-item.png) no-repeat right top;
}
#nav a span {
  display: block;
  padding: 4px 0 4px 40px;
  background: url(menu-item.png) no-repeat left top;
}

Avec une image menu-item.png qui représente une barre grise suffisamment large (ex: 400px) avec coins arrondis de chaque côté, le tour est joué. Si tu as besoin d'un pictogramme, il faut voir si ça vaut le coup de l'inclure comme une image séparée (élément <img> dans le code HTML, attribut alt vide, positionné en absolu...) ou de l'inclure dans l'image de fond menu-item.png (avec une technique de type Sprites CSS). Pour quelques icones, les Sprites CSS devraient être pas mal. Pour des icones nombreuses et changeantes, faut voir.

webslave

26 Apr 2010 à 14:56

Mes div sont toujours coupées dans IE7...
Pour info, il ne s'agit pas d'un menu... ce sont des résultats de recherche générés en php (avec le titre du produit et l'icône du produit). Chaque résultat de recherche est un produit, donc de largeur variable en fonction du nom du produit, et mis les uns derrière les autres (chaque produit est une div .element).

Je vais essayer de continuer en m'inspirant de vos remarques...
et de peut-être mettre en ligne un meilleur exemple qui serait plus parlant.

Merci.

gc-nomade

26 Apr 2010 à 16:59

webslave a écrit :
Mes div sont toujours coupées dans IE7...
Pour info, il ne s'agit pas d'un menu... ce sont des résultats de recherche générés en php (avec le titre du produit et l'icône du produit). Chaque résultat de recherche est un produit, donc de largeur variable en fonction du nom du produit, et mis les uns derrière les autres

C'est tout bonnement une liste de résultat de recherche a mon sens et une icone probablement muette .

une structure en :

<ul><li><img src="icone.gif" alt=""/><a href="pageproduit.html">désignation produit</a></li> ... </ul>

me semble convenir avec les coins en background ...

visuel : http://gcyrillus.free.fr/essai/serachresult.html

un dessin vaut mieux que de se repeter maladroitement Smiley smile

, cordialement

GC

webslave

26 Apr 2010 à 17:56

Bon, j'ai essayé cette possibilité... même si c'était mieux, je me retrouve quand même avec du texte qui dépasse ds IE7 !!!

Alors, ce que j'ai fait... c'est que j'ai calculé une largeur de la div ".element" en php en fonction du nombre de caractère du nom du produit. Ca a l'air de tenir la route...(même ds IE6 !!!).

Vraiment un grand merci pour votre aide à tous. Et désolé Smiley ohwell

pour le choix de ma solution qui est un peu.... "spéciale" !
(mais là j'en peux plus... Smiley sweatdrop

)

Webslave

fvsch

26 Apr 2010 à 21:21

webslave a écrit :
Alors, ce que j'ai fait... c'est que j'ai calculé une largeur de la div ".element" en php en fonction du nombre de caractère du nom du produit. Ca a l'air de tenir la route...(même ds IE6 !!!).

Note pour la prochaine fois: embaucher un intégrateur web pour faire de l'intégration web. Smiley ohwell

webslave

26 Apr 2010 à 22:04

euh... c'est pas très gentil ça... Smiley decu

gc-nomade

26 Apr 2010 à 22:27

:) , pour ie6/7 , qui pour une fois sont d'accord , il suffit de corriger leur effets de bords sur le float et jouer sur le display .
<hs note="pour moi même"> se foutre des versions de firefox 2 et moins qui n'existe probablement plus , plus tard faire fis de float pour ce type de truc et passer tous en inline-block , ça vire les puce pour sur !</hs>

Demo a jour , exit ff2<=

phpdoesnotcare

26 Apr 2010 à 22:27

webslave a écrit :
Alors, ce que j'ai fait... c'est que j'ai calculé une largeur de la div ".element" en php en fonction du nombre de caractère du nom du produit. Ca a l'air de tenir la route...(même ds IE6 !!!).

Si l'utilisateur a besoin d'augmenter la taille de ton texte, ça réduit à néant ce que tu as fait, et tu ne peux pas vraiment négliger cette possibilité.
Modifié par phpdoesnotcare (26 Apr 2010 - 22:29)

fvsch

26 Apr 2010 à 22:35

phpdoesnotcare a écrit :
Si l'utilisateur a besoin d'augmenter la taille de ton texte

Ou si le texte, de lui-même, décide de prendre plus de place que les savants calculs faits par le développeur PHP. De nombreuses raisons à cela: arrondis de taille de police, utilisation d'une police générique, type de lissage du texte (et/ou hinting) variable suivant l'OS et la configuration.

Calculer des dimensions de bloc à partir d'un nombre de caractères, c'est mal™.

gc-nomade

26 Apr 2010 à 22:35

phpdoesnotcare a écrit :
Si l'utilisateur a besoin d'augmenter la taille de ton texte, ça réduit à néant ce que tu as fait, et tu ne peux pas vraiment négliger cette possibilité.

trés jolie et pertinent rappel , qui ne me fait pas de mal non plus .

Cordialement

<edit> je te renvoi a la mise a jour de mon exemple visuel : http://gcyrillus.free.fr/essai/serachresult.html qui prend entre autre aussi cet etat de fait autant dans IE6/7 ...
voir le second ul et le css qui s'y rattache .
Modifié par gc-nomade (26 Apr 2010 - 22:38)

webslave

27 Apr 2010 à 10:27

Bonjour et merci encore pour votre aide et vos remarques tout à fait pertinentes,
je vais essayer de m'y recoller... mais peut-être pas cette semaine. Smiley sweatdrop

Pour info, le développeur php, c'est moi, l'intégrateur html c'est bibi,
le graphiste, designer, développeur AS3, etc... c'est tjs le même... Smiley biggol

alors vous comprendrez que j'ai des lacunes (pas mauvais en tout, excellent en rien ! Smiley cligne

).

WS

Sujet clos

CSS et mise en forme, CSS3

IE : div coupée en autant de div contenue (aaarrrgghhh)