Inline-block non géré par IE, tt versions
lelol
-
lelol -
lelol -
Bonjour,
Jai une série de vignettes avec légendes que je désire mettre en ligne, dans mon <div> "module2". Impeccable avec Ffx, mais rien avec IE.
HTML :
Et le CSS simplifié qui va avec :
Le résultat est visible ici : http://shop.euras.com/default.php?&g7=2820804N
Merci d'avance pour votre aide
Lelol.
PS : le code CSS est encore un peu "crado", désolé... Je nettoierai plus tard
Jai une série de vignettes avec légendes que je désire mettre en ligne, dans mon <div> "module2". Impeccable avec Ffx, mais rien avec IE.
HTML :
<div id="main">
<div id="colgauche">
<div class="module1">
bla bla bla
</div>
<div class="module2">
<h3>Nos offres</h3>
<div class="photo">
<img border="0" src="http://vintage-audio-technique.com/shop/accueil/KSS152.png" alt="bloc optique" /><p class="prix">Sony KSS152A<br />37,08 €</p></div>
</div></div></div>
Et le CSS simplifié qui va avec :
#colgauche div.module2 {
color: #FFFFFF;
text-align:center;
padding-right: 10px;
border:1px dotted #FD9707;
-moz-border-radius: 7px;
background-repeat: repeat-y;
margin-bottom: 15px;
}
.photo {
display:inline-block;
margin:0px 5px;
}
.prix {
padding-top:0px;
margin-top:0px;
margin-bottom:5px;
text-align:center;
font-size:90%;
color:#04f65d;
font-weight:bold;
}
Le résultat est visible ici : http://shop.euras.com/default.php?&g7=2820804N
Merci d'avance pour votre aide
Lelol.
PS : le code CSS est encore un peu "crado", désolé... Je nettoierai plus tard
A voir également:
- Inline-block non géré par IE, tt versions
- Block breaker - Accueil - Services en ligne
- Code block - Télécharger - Langages
- Peer block - Télécharger - Pare-feu
- Ie tab - Télécharger - Outils pour navigateurs
- Usb block - Télécharger - Pare-feu
9 réponses
Bon, ben, le problème s'est résolu, presque par hasard !!
j'ai recréé un div qui englobe tous mes >div class="photo">, et c'est à lui que j'ai fait porter le display:inline-block, ce qui me permet de les avoir bien centrés ds Firefox, comme je le voulais.
Et j'ai assigné un "float:left" aux div "photo", ce qui fait qu'elles s'affichent bien aussi sous IE, en se pliant à la largeur de fenêtre.. Elles ne sont pas centrées, mais c'est un moindre mal...
Merci encore !!
Lelol
j'ai recréé un div qui englobe tous mes >div class="photo">, et c'est à lui que j'ai fait porter le display:inline-block, ce qui me permet de les avoir bien centrés ds Firefox, comme je le voulais.
Et j'ai assigné un "float:left" aux div "photo", ce qui fait qu'elles s'affichent bien aussi sous IE, en se pliant à la largeur de fenêtre.. Elles ne sont pas centrées, mais c'est un moindre mal...
Merci encore !!
Lelol
Effectivement inline-block n'est pas parfaitement implémenté partout (IE6, FF versions inférieures à 3.x, etc).
Mais peut-être que cet article pourra t'aider :
http://covertprestige.info/css/inline-block/
Mais peut-être que cet article pourra t'aider :
http://covertprestige.info/css/inline-block/
Merci pour la réponse notobe,
J'avais déjà lu cette page avant de poster (avec une 20aine d'autres!)
Et je croyais avoir compris qu'IE8, au moins savait rendre ce style ?!! non ?
C'est pourquoi, je précise que j'ai aussi tenté un html avec <ul><li>, mais que dans ce cas, je pense que c'est ma syntaxe CSS qui était foireuse.
J'ai aussi essayé d'englober mes <div class="photo"> dans un autre div auquel j'appliquais le display.
mais dans tous les cas, l'affichage restait correct avec firefox, et en colonne (comme de simples div) avec IE.
Merci d'avance pour d'autres indices !! ;)
J'avais déjà lu cette page avant de poster (avec une 20aine d'autres!)
Et je croyais avoir compris qu'IE8, au moins savait rendre ce style ?!! non ?
C'est pourquoi, je précise que j'ai aussi tenté un html avec <ul><li>, mais que dans ce cas, je pense que c'est ma syntaxe CSS qui était foireuse.
J'ai aussi essayé d'englober mes <div class="photo"> dans un autre div auquel j'appliquais le display.
mais dans tous les cas, l'affichage restait correct avec firefox, et en colonne (comme de simples div) avec IE.
Merci d'avance pour d'autres indices !! ;)
J'avais déjà lu cette page avant de poster (avec une 20aine d'autres!)
Rah zut ! ;)
En allant voir ton code, je vois que tu as un doctype qui n'est pas adapté, du coup, IE est en mode Quirks.
Ça vient peut-être de là.
Remplace-le par celui-là plutôt :
Qui semble être le plus adapté à ton code (mais fais attention, tu mélanges le html 4.01 et le xhtml 1.0, faut essayer d'uniformiser tout cela)
Rah zut ! ;)
En allant voir ton code, je vois que tu as un doctype qui n'est pas adapté, du coup, IE est en mode Quirks.
Ça vient peut-être de là.
Remplace-le par celui-là plutôt :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Qui semble être le plus adapté à ton code (mais fais attention, tu mélanges le html 4.01 et le xhtml 1.0, faut essayer d'uniformiser tout cela)
Oui, je sais celà aussi, seulement, c'est un genre de bordel préhistorique proposé par mon fournisseur, et je n'ai accès qu'à une seule cellule de l'immonde truc fait de tableaux imbriqués et qu'ils appellent un site web.
Mon code est donc imbriqué dans une seule cellule de tableau, au 3eme ou quatrième niveau !! ET of, course, je n'ai pas accès au html !!!!
Tant pis, je continue..
Il y a 5 minutes, j'ai réussi un exploit : affichage correct sous IE (avec display:inline) mais foireux sous ffx, du coup !!
Pfou, chaud, cette affaire,
Mais merci beaucoup de te pencher sur mon pb !! :)
L.
Mon code est donc imbriqué dans une seule cellule de tableau, au 3eme ou quatrième niveau !! ET of, course, je n'ai pas accès au html !!!!
Tant pis, je continue..
Il y a 5 minutes, j'ai réussi un exploit : affichage correct sous IE (avec display:inline) mais foireux sous ffx, du coup !!
Pfou, chaud, cette affaire,
Mais merci beaucoup de te pencher sur mon pb !! :)
L.
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
c'est un genre de bordel préhistorique proposé par mon fournisseur, et je n'ai accès qu'à une seule cellule de l'immonde truc fait de tableaux imbriqués et qu'ils appellent un site web.
LOL ! :-D
Tu aurais peut-être intérêt à changer de boutique ? (si c'est possible... :\ )
Cela dit, une piste : faire une feuille de style spéciale IE avec un test conditionnel.
Peux-tu inclure dans quand même des choses dans le head ?
Si oui :
LOL ! :-D
Tu aurais peut-être intérêt à changer de boutique ? (si c'est possible... :\ )
Cela dit, une piste : faire une feuille de style spéciale IE avec un test conditionnel.
Peux-tu inclure dans quand même des choses dans le head ?
Si oui :
<!--[if IE]> <link href="ie.css" rel="stylesheet" type="text/css" /> <![endif]-->
Non, pas d'accès au HEAD!! :-(
J'ai pensé aussi à inclure deux fois le même <div> ds des commentaires conditionnels, mais, je ne suis pas sûr de la syntaxe !!
Sinon, hélas, changer de boutique est impossible : y en a pas d'autres en europe !!
Moi, je croyais que les allemands savaient faire plein de trucs bien !!! Mais, bon, on dirait que sortis des merceedes et BM, c pas la joie!! ;)
J'ai pensé aussi à inclure deux fois le même <div> ds des commentaires conditionnels, mais, je ne suis pas sûr de la syntaxe !!
Sinon, hélas, changer de boutique est impossible : y en a pas d'autres en europe !!
Moi, je croyais que les allemands savaient faire plein de trucs bien !!! Mais, bon, on dirait que sortis des merceedes et BM, c pas la joie!! ;)
Si si, les tests conditionnels, tu peux aussi les utiliser pour du code html.
La solution n'est pas top et ça va alourdir ton code, mais un truc de ce genre là :
Avec dans ta css les déclarations de class photo (pour IE) et photo2 (pour les autres) qui vont bien.
La solution n'est pas top et ça va alourdir ton code, mais un truc de ce genre là :
<!--[if IE]><div class="photo"><![endif]--> <!--[if !IE]><div class="photo2"><![endif]-->
Avec dans ta css les déclarations de class photo (pour IE) et photo2 (pour les autres) qui vont bien.
Hélas non !!
Merci quand même !!
Je vais chercher une solution autre que inline-block....
Mais, là, je sèche un peu !!
Merci pour les idées!! :)
L.
Merci quand même !!
Je vais chercher une solution autre que inline-block....
Mais, là, je sèche un peu !!
Merci pour les idées!! :)
L.
normal, ce n'est pas la bonne syntaxe...
<!--[if !IE]> <-->
<style type="txt/css"></style>
<!--> <![endif]-->
<!--[if IE]>
<style type="txt/css"></style>
<![endif]-->
sinon https://izs.me/ pour hacker display:inline-block...
<!--[if !IE]> <-->
<style type="txt/css"></style>
<!--> <![endif]-->
<!--[if IE]>
<style type="txt/css"></style>
<![endif]-->
sinon https://izs.me/ pour hacker display:inline-block...
1- exact, un copier-coller à la va-vite : http://bernard.quevillier.pagesperso-orange.fr/toposnew/style.htm
2- inexact. Fais le test ;)
2- inexact. Fais le test ;)
Bon courage pour la suite !