Images qui ne s'affichent pas sous certains navigateurs.

Fermé
YameFAZE Messages postés 201 Date d'inscription mardi 24 avril 2012 Statut Membre Dernière intervention 14 mars 2021 - 13 déc. 2019 à 20:46
 Rotpe - 26 déc. 2019 à 07:30
Bonjour,

Mon problème est que les images de mon header ne s'affichent pas sous IE, Opera et Chrome alors que tout fonctionne sous FF. Je précise que je teste avec Microsoft Edge Canary Version 80.0.346.0, Opera Version 65.0.3467.48, Chrome Version 78.0.3904.108 et Firefox version 66.0.2. Je précise également que les liens de mes images sont renseignés dynamiquement avec PHP (peut-être un soucis de ce côté-là... sauf que ça fonctionne sous FF).

Ci-dessous le rendu sous FF, celui attendu :


Ci-dessous le rendu obtenu sous IE, Opera et Chrome :


Ci-dessous ma page Index.php qui appelle mon header (j'ai juste mis la ligne qui appelle le fichier) :
<?php include($folder_parts.'/'.$file_header); ?>


Ci-dessous mon fichier Header.php :
<header>
	<div class="<?php echo $class_background; ?>">
		<img src="<?php echo $folder_img.'/'.$file_background; ?>" alt="" />
	</div>
	<div class="<?php echo $class_logo; ?>">
		<img src="<?php echo $folder_img.'/'.$file_logo; ?>" alt="Logo de l'entreprise <?php echo ucfirst($firstName_entreprise).ucfirst($lastName_entreprise); ?>" />
	</div>
	<div class="<?php echo $class_slogan; ?>">
		Découvrez la Provence et les Alpes à moto avec <?php echo ucfirst($firstName_entreprise).ucfirst($lastName_entreprise); ?>
	</div>
</header>


Ci-dessous mon CSS :
/* Header */
header {
	-ms-grid-column: 1;
        -ms-grid-column-span: 1;
	grid-column: 1 / 2;
	-ms-grid-row: 1;
	-ms-grid-row-span: 1;
	grid-row: 1 / 2;
	-ms-grid-column-align: stretch;
	justify-self: stretch;
	-ms-flex-item-align: start;
	-ms-grid-row-align: start;
	align-self: start;
	display: -ms-grid;
	display: grid;
	-ms-grid-columns: [column1] minmax(auto,12em) [column2] auto;
	grid-template-columns: [column1] minmax(auto,12em) [column2] auto;
	-ms-grid-rows: [row1] 85vh;
	grid-template-rows: [row1] 85vh;
}

/* Background container */
.background {
	-ms-grid-column: 1;
        -ms-grid-column-span: 2;
	grid-column: 1 / 3;
	-ms-grid-row: 1;
	-ms-grid-row-span: 1;
	grid-row: 1 / 2;
	-ms-grid-column-align: stretch;
	justify-self: stretch;
	-ms-flex-item-align: end;
	align-self: flex-end;
}

/* Background */
.background img { width: 100%; }

/* Logo container */
.logo {
	-ms-grid-column: 1;
        -ms-grid-column-span: 1;
	grid-column: 1 / 2;
	-ms-grid-row: 1;
	-ms-grid-row-span: 1;
	grid-row: 1 / 2;
	-ms-grid-column-align: start;
	justify-self: start;
	-ms-flex-item-align: end;
	align-self: flex-end;
}

/* Logo */
.logo img { border-radius: /* Top left */ 50% /* Top right */ 50% /* Bottom right */ 0 /* Bottom left */ 0; }

/* Slogan container */
.slogan {
	font-weight: bold;
	color: white;
	font-size: xx-large;
	margin-right: 1em;
	margin-bottom: 1em;
	margin-left: 1em;
	-ms-grid-column: 2;
        -ms-grid-column-span: 1;
	grid-column: 2 / 3;
	-ms-grid-row: 1;
	-ms-grid-row-span: 1;
	grid-row: 1 / 2;
	-ms-grid-column-align: start;
	justify-self: start;
	-ms-flex-item-align: end;
	align-self: flex-end;
}


Et au cas où, ci-dessous mes variables PHP :
$file_header = 'header.php';

$file_me = 'me.jpg';

$file_background = 'motorcycle.jpg';
$class_background = 'background';

$file_logo = 'logo.jpg';
$class_logo = 'logo';

$class_slogan = 'slogan';


Je ne vois vraiment pas d'où peut venir le problème...

Configuration: Windows / Firefox 66.0

3 réponses

dsyren Messages postés 923 Date d'inscription mercredi 24 juin 2009 Statut Contributeur Dernière intervention 11 mars 2020 119
13 déc. 2019 à 21:28
Salut,
Tu dev en local. La gestion des chemins locaux est compliqué sur certains navigateur. Installe un serveur local si tu peux ou héberge tes images sur un serveur distant et change tes chemins en absolus.
Ça devrait régler ton souci.
++
0
YameFAZE Messages postés 201 Date d'inscription mardi 24 avril 2012 Statut Membre Dernière intervention 14 mars 2021
14 déc. 2019 à 09:26
Merci pour ta réponse. Bon je vais attendre la mise en ligne pour voir si ça fonctionne. Ce qui est bizarre c'est que toutes les images de mon site sont en dynamique, et seules celles du header ne s'affichent pas, toutes les autres si. Après mon header est la seule partie de mon site appelée via un include qui contient des images. Les autres images sont intégrées dans des parties fixes de mes pages.
0
Salut, pas de solution non plus mais vous pouvez regarder:

_La compatibilité CSS, d'après votre énoncé il se pourrais que certaines balises ne soient prise en compte que par Firefox ou mal prise en compte.

_Le commentaire sur la classe logo: virez le. ça devrais pas mais parfois mettre des commentaires au milieu du CSS ruine tout.

_ajouter un préchargement d'image pour voir si ça viendrais pas de là.

_ et en dernier recours parser les URL des images pour virer caractères spéciaux/accentués ou majuscules éventuels.
0