28172 sujets

CSS et mise en forme, CSS3

Je teste un Userstyle pour flickr :
Flickr WideScreen - ALLinONE - 9.5 (BETA v.2)

Je voudrais réduire la taille des images d'un thumbnail pour afficher plus d'images par ligne.
sur cette page par exemple :
Jonathan Shields' Fickr Favorites Medium view

Mais après application de mon style , le "bon" redimensionnement n'est réellement effectif qu'au survol des thumbs...
C'est à dire:
- En 1er les images sont de la bonne largeur mais trop étroites.
- Dans un 2éme temps, la hauteur ne se règle correctement qu'au survole des images.
Bizzare!
Quand je teste mes règles en direct (soit par Firebug ou l'extension Stylish) le redimensionnement est instantané sur toute la page.

Chez Flickr, ce genre de "Medium" Thumbnail s'affiche en 2 temps, c'est peut être la raison de cet étrange problème?

Voici un exemple de code que j'utilise :
.photo_container.pc_m  {
    display: inline-block !important;
    margin: auto 0 !important;
    width: 90% !important;
}

#faves.md .pc_img, 
.thumb{
    display: inline-block !important;
    height: 90% !important;
    margin: auto 0 !important;
    max-width: 90% !important;
}


Comment m'en sortir ?
Modifié par decembre (31 Jan 2012 - 02:47)
testé :
-moz-box-sizing: border-box


cela semblait fonctionner...

#faves.md .pc_img{
-moz-box-sizing: border-box !important;
    display: inline-block !important;
    height: 90% !important;
    margin:auto 0  !important;
    width: 90% !important;
}

mais la 2éme partie du thumnail n'affiche pas les images....
;-'
Modifié par decembre (01 Feb 2012 - 01:32)