5542 sujets

Sémantique web et HTML

Bonjour,

Je suis en train de concevoir un site et je fais face à un bug très étrange qui n'apparait que sous Chrome.
Dans mon footer, j'ai une image svg. Il n'y a aucun effet au :hover et pourtant, sous chrome uniquement, au survol de cette image, la structure de ma page est décalée.
J'ai vérifié dans tout mon CSS, je n'ai qu'un seul effet :hover et c'est dans le header de ma page.

Voila la structure de ma page :

<div class="main_panel accueil">

		<!-- DEBUT NAV INCLUDE -->

		<?php
			include("compz/nav.html"); 
		?>

		<!-- FIN NAV INCLUDE -->

		<div class="main_wrapper"><!-- DEBUT MAIN WRAPPER -->

			<h1>conception graphique et webdesign | <span>accueil</span></h1>

			<div class="main_wrapper_in">
			
				<img src="img/logo.svg" />
			
                       </div>

			<footer>
				<div>
					<figure>
			                       <img src="img/logo_footer.svg" />
                                       </figure>
				</div>
				<div>
					<section class="contact_footer">
						<article>
							<a href="#">contact@alternative-graphique.com</a>
						</article>
						<article>06 14 58 19 71</article>
					</section>
				</div>
				<div>
					<a href="#" class="square_btn">obtenir un devis</a>
				</div>
			</footer>

		</div><!-- FIN MAIN WRAPPER -->


Quelqu'un a-t-il déjà eut ce problème ?
Je précise que le footer est en display:table et les div enfants direct sont en table-cell puis en table-row pour la version responsive.

En image ça donne ça :

upload/57754-capture.jpg
Modifié par LocNar75 (28 Feb 2015 - 22:49)
Petite avancée : je me rends compte que cela ne se produit que lorsque ces images ont une largeur et sont en margin-left:auto et margin-right:auto;
Grande avancée !! Smiley smile
J'ai trouvé la source du problème, c'est l'extension de Pinterest pour Chrome qui crée ce problème.
En la désactivant, le bug disparait.
Reste à trouver comment corriger ce bug pour les utilisateurs qui ont cette extension ....
Pour ceux que ça intéresse, voila la solution :

L'extension Pin It de Pinterest ajoute une <span> à la fin de votre body.
Au survol des images, cette balise passe de display:none à display:block pour afficher le petit bouton "Pin It".
Dans certains cas comme le miens, cela à pour conséquence de "faire chier" Smiley smile
Seulement, impossible de virer cette <span> car le style CSS est dans le code HTML.

L'astuce, cibler cette <span> dans votre feuille CSS et ajouter le markup !important pour que le propriété de la feuille de style externe prenne le dessus :

body>span{
    display:none !important;
}


Je l'ai eut !

Merci au passage à toute l'équipe de Pinterest pour leur absence complète de réponse à mon mail. Smiley fache