Problème affichage internet explorer 11 (doctype?)

Sujet résolu

24 mars 2014 à 10:24:19

Bonjour,

Je fais appel à votre expérience dans le domaine à la suite d'un bug que je rencontre sous ie 11.

Dans ma page j'ai un slider (caroufredsel) avec 3 boutons (précédent, pause et suivant). Sur chome et firefox les boutons s'affiche convenablement:

mais avec ie 11 ce n'est pas le cas: plus de transparence et mes boutons deviennent carrés. Et les signe pause, précédent et suivant ajoutés par css disparaissent:

On dirait qu'il ne reconnait pas les propriétés css3, pourtant la version 11 d'internet explorer est censée les gérées non?

C'est à mon stage que je travails sur le site (su mon pc portable), mais quand je le teste sur mon pc de bureau chez moi, avec la même version d'ie, la page s'affiche correctement.

Lorsque j'inspecte la page sous ie 11 (sur mon pc portable), je remarque que la doctype est transformé en commentaire et que mon body se voit attribuer un attribut style. Voici ce que m'affiche l'inspecteur:

Voici le début de mon HTML (déclaration de mon doctype):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr-BE" lang="fr-BE">

		.
		.
		.

Le code html de mes boutons:

<div id="boutonsSlider">
	<div class="btnHover">
		<a href="#" class="btn" id="prev"></a>
		<a href="#" class="btn" id="pause"></a>
		<a href="#" class="btn" id="next"></a>
	</div>
</div>

Et le css:

#boutonsSlider
{
	position: absolute;
	z-index: 2;
	bottom: 5px;
	left: 7.882291119285339%;
}

#boutonsSlider > div
{
	float: left;
}

#boutonsSlider #prev:before
{
	content: url('../img/left.png');
	position: relative;
	left: 0.25em;
	top: -0.05em;
}

#boutonsSlider #pause:before
{
	content: url('../img/pause.png');
	position: relative;
	top: -0.05em;
	left: 0.25em;
}

#boutonsSlider #next:before
{
	content: url('../img/right.png');
	position: relative;
	left: 0.25em;
	top: -0.05em;
}

#boutonsSlider a.btn
{
	display: inline-block;
	width: 1em;
	height: 1em;
	padding: 0.5em;
	margin-left: 0.2727272727272727em; /* 3px */
	text-shadow: 0px 1px 0px white;
	background-color: #1C1C1C;
	border-radius: 15px;
	opacity: 0.5;
	transition: opacity 0.5s;
}

#boutonsSlider a.btn:first-child
{
	margin-left: 0;
}

#boutonsSlider a.btn:hover
{
	opacity: 1!important; /* pour passer devant le style js */
	transition: opacity 0.5s;
}

#boutonsSlider a.btn:active
{
	box-shadow: 1px 1px 10px black inset, 
                0 1px 0 rgba( 255, 255, 255, 0.4);
}

Je précise que l'html et le css sont valide (w3c).

Merci d'avance à ceux qui tenteront de m'aider

Frogweb

24 mars 2014 à 11:13:54

Salut,

c'est un site en local ?

Si c'est le cas il est possible que IE11 passe en mode compatibilité.

Pour le vérifier appuie sur F12 et regarde ce qu'il y a dans les champs Mode navigateur et Mode de document.
Mets IE11 si ce n'est pas le cas.

Tu peux également mettre cette ligne dans ton <head> que tu pourra enlever quand ton site sera en ligne :

<meta http-equiv="X-UA-Compatible" content="IE-edge" />

Si rien de tout ça ne fonctionne c'est que tu as quelque chose avant ton doctype et IE passe en mode quirks.

Vous cherchez à faire un menu déroulant ? Visitez www.frogweb.fr ! frogweb le site qu'il vous faut !

you07you

24 mars 2014 à 11:57:58

Merci beaucoup ronamazona c'était bien ca!

Je me doutais bien que ca allait être un petit détail Merci pour ton aide, je le saurais pour les prochaine fois.

Juste une dernière question: quand on travail en local internet explorer se met toujours par défaut en mode compatibilité?

Frogweb

24 mars 2014 à 12:01:29

Oui malheureusement et c'est également la même chose pour les sites intranets.

C'est une option que l'on coche (ou pas) à l'installation de IE.

Vous cherchez à faire un menu déroulant ? Visitez www.frogweb.fr ! frogweb le site qu'il vous faut !

you07you

24 mars 2014 à 12:07:37

J'ai donc du décocher cette option sur mon pc de bureau sans y faire plus attention...

Merci de m'avoir éclairé sur le sujet