28172 sujets

CSS et mise en forme, CSS3

bonjour,
J'ai positionné une image dans un contenu et décalé l'image pour une raison esthétique .

<div class="post-content"
      <div class="post-icon">
     <img alt="entreprise" src="http://xxx.fr/3.png">
      </div>
</div>

dans les css :

position: absolute;
     left: 93%;
    top: 10px;
    z-index: 99;


Sur firefox tout est correct, l'image est décalé sur le bloc de contenu mais dans Safari elle reste coincé dans le bloc et se réduit en taille pour entrer dans le bloc de contenu. impossible pour moi de trouver une solution donc je fait appel à vous.J'espère être suffisamment claire
merci d'avance pour votre aide . hélène
Modifié par 6l20 (20 Feb 2014 - 16:24)
oui j'ai oublié de préciser qu'il s'agit des icones vert sur les blocks d'actualités .
post-icon qui contiennent des images
ils sont en position absolue.
Mais comme c'est un thème word press que j'ai retravaillé il y a des choses que je n'arrive pas à maitrisé
J'ai vu dans l'inspectuer web de safari qu'il y avait un
box-sizing: content-box;
calculé sur presque tous les éléments du site (je n'arrive pas à trouver d'où il provient car il n'est pas dans les feuilles de styles )est-ce que cela pourrait être en lien avec mon problème ?
Est-ce que quelqun connait ???
merci encore
couki a écrit :
oui j'ai oublié de préciser qu'il s'agit des icones vert sur les blocks d'actualités .

dommage qu'elle soit dans la zone ou il y a déjà une image, on ne les remarque pas vraiment , sauf a peut-être comme un defaut d'afficage, tu as de la place en bas Smiley smile
couki a écrit :
J'ai vu dans l'inspectuer web de safari qu'il y avait un
box-sizing: content-box;
calculé sur presque tous les éléments du site (je n'arrive pas à trouver d'où il provient car il n'est pas dans les feuilles de styles )est-ce que cela pourrait être en lien avec mon problème ?
Est-ce que quelqun connait ???
merci encore

Oui, box-sizing permet de choisir un model de boite, http://www.w3.org/TR/css3-ui/#box-sizing0

Il suffirait, a priori, de le définir dans ta feuille de style, pour que chaque navigateur l'applique aux boites ou a tous les elements avec le selecteur *.

A utiliser avec connaissance de causes et d'effets Smiley smile .
++
Merci pour ta réponse mais mon problème concerne l'a différence d'affichage entre fire fox et safari .L'icone sort sur fire fox (ce que je désire visuellement ) et devient minuscule dans safari et ne sort pas de la boite .J'ai regardé dans toutes les feuilles de styles et ne voit rien qui pourrait être la cause de cela .J'ai utilisé un thème wp alors effectivement cela est peut être codé à un autre niveau .Bref 2 jours que je suis dessus et ça dépasse mes compétences .
c'est pour quoi j'ai demandé de l'aide ...
Si box-sizing n'est pas ton soucis, qu'en est il des règle pour les largeurs maximales d'images ?

Peut-être faut-il fixer aussi une largeur minimale à ces images , ou au conteneur ou tu perçois un défaut , par exemple :
#post-fly {
min-width:45px;/* largeur de l’icône */
}