Bug affichage logo sur Chrome probleme de padding ou margin

demiseldemisel Member
mars 2017 modifié dans Entraide
Bonjour,

Je viens de m'apercevoir d'un problème de padding ou de margin au niveau de mon logo sous chrome ici.
Le problème est présent sur chrome et opera, sous firefox et ie ça s'affiche correctement par contre.

FIREFOX:
491718Capture.jpg

CHROME:
923006Capture2.jpg

La position de mon logo se fait ici dans mon css : 
[== CSS ==]
#masthead .site-title{
	font-family:Yesteryear;
	background: url("/PluXml/themes/flat/img/logo_gasbe.png") no-repeat ;
	line-height:50px;
	font-size:1px;
	margin:0;
	margin-top: 19px !important;
	padding:17px 0 !important;
	text-align:left
}


J'ai vérifié et au tout début de ma feuille de style j'ai bien
[== CSS ==]
/*! normalize.css v3.0.0 | MIT License | git.io/normalize */html{
	font-family:sans-serif;
	-ms-text-size-adjust:100%;
	-webkit-text-size-adjust:100%
}

body {
  margin: 0;
}

Est-ce qu'il y aurait une astuce pour résoudre ce problème ?

Réponses

  • YannicYannic Member
    Salut, pour ton problème je ne sais pas mais il existe des erreurs dans ta page :
    http://vbzh82.free.fr/PluXml/themes/flat/assets/js/bootstrap-3.1.0.min.js [NOT FOUND]
    http://fonts.googleapis.com/css?family= [NOT FOUND]

    Buster/NGINX/PHP7/PluXml5.8

  • kowalskykowalsky Member
    mars 2017 modifié
    @Gasbé : il te faut vérifier la gestion et le positionnement des blocs flottants dans ton code source (php et css).

    Par exemple, tu as une <div class="navtop_menu">...<div> en flottante en haut de ta page, qui si j'ai bien compris devrait prendre toute la largeur de la page et avoir une hauteur de 50px, sauf que ta div suivante <div id="page">...</div> la recouvre entièrement. Visuellement tu ne t'en aperçois pas car le fond est identique, sauf qu'en fait elle débute en hauteur à 0 et non à +50px. Ce faisant toutes les autres div qui arrivent ensuite s'intercalent comme elles le peuvent dans l'espace prévu ou en débordent : d'où les différents décalages que tu observes en fonction des navigateurs.

    A lire en complément : https://www.alsacreations.com/article/lire/7-depassement-flottants-css.html

    (le positionnement padding et margin de ton logo n'est pas à l'origine de ton souci d'affichage)
  • demiseldemisel Member
    Merci pour vos explications, du coup j'ai tout repris à zéro et j'ai corriger pas mal de chose.

    J'ai enfin résolu mon problème de padding sur le logo qui merdai sous chrome.
    Ca ma pris de testé comme ça désespérément, je me suis dis mmf mon logo c'est un .png, jvais essayer un .jpg et BINGO ! problème de padding résolu.

    Le truc de ......... :D
Connectez-vous ou Inscrivez-vous pour répondre.