28172 sujets

CSS et mise en forme, CSS3

Bonjour tout le monde,

J'ai depuis quelques jours un problème avec une flexbox que je n'arrive pas à maîtriser. Sous Chrome & Safari, ça marche nickel, mais sous IE et Firefox, rien à faire, les icônes sortent du conteneur parent. J'ai effectué des tests sous Firebug et j'ai trouvé la solution. Sauf que je ne m'en souviens plus car j'ai fait un refresh et tout est parti. Bref, je commence à ne plus avoir de cheveux...

Voici le lieu du massacre : c'est ici

Et voici le css de l'<ul> et des <li>.
#liste_photos {
    display: flex;
    margin: 1em 10px 0 0;
    padding-bottom: 0;
    padding-top: 0;
}
#liste_photos li {
    display: inline;
    margin: 5px;
}


J'espère que quelqu'un saura m'éclairer.
Merci d'avance et bonne soirée.
Salut,

On dirait qu'il y a un souci avec le site en question : il rame tellement que Firebug semble ne pas vouloir afficher les styles.

Pour le reste, tu trouveras des éléments de réponse dans ce tutoriel, notamment du côté de flex-wrap.
Merci pour la réponse !
Alors en effet, y'a quelques soucis avec notre VPN ces derniers temps, et je crois / espère que c'est bien ça le soucis concernant la lenteur du site.

Pour le problème de la flexbox, j'ai bien jeté un œil sur le tuto mais je crois que c'est ailleurs. J'ai lu quelque part qu'il y avait un bug connu et quelqu'un donnait une astuce en mettant un width:0; sur le child. J'ai fait ça, plus autre chose dont je ne me souviens pas, et ça fonctionnait très bien, mais impossible de reproduire la manipulation.
J'ai un peu avancé. Alors en ajoutant un flex:1 sur mes child et un width:0, ça marche bien, sauf sur Safari où ça ne fonctionne pas du tout (normal, vu qu'il interprète le width:0). Je n'ai trouvé aucune solution pour que ça fonctionne sur tous les navigateurs. Je sèche...