Problème de compatibilité de navigateur entre firefox et chrome

jessyjames05
Les bases HTML/CSS

Bonjour tout le monde,

Voila mon soucis, c'est que mon design est top sur firefox,ie,opera mais pas sur safari, ni chrome qui laissent apparaitre le même problème, càd un espacement important entre mes liens de réseaux sociaux.

Voici un apercu plus clair:

Sur firefox,ie,opera, pas de problème

Sur chrome et safari

Après avoir fait plusieurs recherche et souvent trouver les même solution,celle de faire un reset dans le fichier css mais ce ne fonctionne pas,
si quelqu'un a déjà été confronté à ce problème et trouver un solution, je suis preneur :) Merci d'avance

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

7 réponses

William_LF
Réponse acceptée

Salut, essaie de passer tes images en inline-block :

<img src="TON_ICONE" class="icoReseau">

.icoReseau {
    margin: 0px 10px;
    padding: 0px;
    display: inline-block;
}

Ciao

BaBeuloula

Salut,

Tu as essayé de remettre les padding et/ou margin à 0 dans ton CSS principal en le faisant sur chacune de tes images ?

<img src="TON_ICONE" class="icoReseau">
.icoReseau {
    margin: 0px;
    padding: 0px;
}

Et tu as essayé aussi de regarder avec firebugs ou l'inspecteur de code de chrome ?

jessyjames05
Auteur

merci de ta réponse, le margin et padding ne font rien et quand je regarde avec l'inspecteur de code chrome,il prend bien mes images a la taille définit mais n'affecte pas le style que je lui ai mis ici est

#reseaux_sociaux a{
    margin-left:-15px;

}

sur firefox ca fonctionne , sur chrome non, vous savez pourquoi ?

coloo

On peut avoir un link ?

BaBeuloula

Sinon regarde si tu n'as pas une autre propriété qui pourrai la remplacer. J'ai eu ce problème avec des balises classé défini deux fois.

jessyjames05
Auteur

salut tout le monde,

merci pour vos réponses, grâce a vous ca fonctionne, en faites comme l'a dit Orijin, il falait bien que je mettes mes images en inline-block pour que tous les navigateurs soient content :)

Merci de votre aide !!!

jessyjames05
Auteur

J'ai encore une question par rapport au difference qu'on peut avoir sur les navigateurs, je travailles en pour cent pour mes largeurs et sur chrome et safari pour une fois que c'est pas ie :), il y a 1 ou 2 % de moins niveau largeur que sur firefox & co sur quoi ce base les navigateurs pour gérer ca ?