Compatibilité CSS IE

Version imprimable

Bonjour

Le css de mon site web repose sur 2 sources:
- bootstrap
- le fichier: fichier.css

La mise en page fonctionne correctement avec Mozilla Firefox et Chrome.
Par contre avec Internet Explorer c'est la cata
Pouvez vous m'aider à adapter mon codage à IE?

Cordialement

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="robots" content="all">
<meta name="Author" lang="fr" content="...">
<meta name="...">
<meta name="keywords"  content="...">
<title>...</title>
<!-- Bootstrap core CSS (CDN)-->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="fichier.css" />
</head>
<body>

12/04/2015, 23h40
kevin254kl

Bonsoir, sous quel version d'internet explorer tu-es? http://getbootstrap.com/getting-started/.
13/04/2015, 09h06
Bovino

Citation:

Par contre avec Internet Explorer c'est la cata

Avec cette phrase comme seule et unique explication de ce qui ne va pas, je pense que t'aider va être particulièrement compliqué... :roll:

Une piste toutefois : essaye d'améliorer ton code. ;)

J'utilise Internet Explorer 8.

J'ai lu la documentation http://getbootstrap.com/getting-started/ mais avec mon niveau en anglais je ne suis pas sur d'avoir tout compri:

- Sur windows Bootstrap supporte IE 8 à 11 "On Windows, we support Internet Explorer 8-11"

- Certains éléments css et html ne sont pas supportés par IE8 et IE9. Aussi il est recommandé d'utiliser Respond.js : ça c'est déjà fait avec la ligne de code
Code:

1 2 3 4 5 6   
Est ce que je me trompe?
("Internet Explorer 8 and 9 are also supported, however, please be aware that some CSS3 properties and HTML5 elements are not fully supported by these browsers. In addition, Internet Explorer 8 requires the use of Respond.js")

13/04/2015, 23h12
binco

Ça m’énerve je ne trouve pas l'erreur ... on dirait qu'IE8 ne prend pas en compte les media queries. Sur un grand écran pc j'ai l'affichage alloué à un portable ...

Citation:

Une piste toutefois : essaye d'améliorer ton code.

Bovino SVP peux tu developpez?
14/04/2015, 02h05
Muchos

Citation:

on dirait qu'IE8 ne prend pas en compte les media queries

C'est bien possible. Idem dans le cas de la résolution, mais Respond.js doit servir à compenser ça.

Citation:

Bovino SVP peux tu developpez?

(ಥ‿ಥ)
14/04/2015, 07h51
Bovino

Citation:

Bovino SVP peux tu developpez?

Bah... j'ai eu beau envoyer des dizaines de fois "CODE" au 64242, j'ai toujours pas reçu la voyance de ton code. J'ai peur que ce soit une arnaque en fait ce truc.
14/04/2015, 13h02
binco

Voici le site en ligne

Bonjour,

Citation:

Sur un grand écran pc j'ai l'affichage alloué à un portable ...

disons plutôt la présentation.

On trouve dans ton css (enfin dans bootstrap.min.css)

Code:

1
2
3
4
5
6
7
8
9
@media (min-width:768px) {
    .navbar-nav {
        float:left;
        margin:0
    }
    .navbar-nav>li {
        float: left
    }
    .navbar-nav>li>a {

Et si tu prenais le problème à l'envers, car je doute que, si tu t'attaches à IE8, tu privilégies les tablettes ou autre smartphone. (à voir si faisable avec bootstrap)

Nota sur le code javascript :
dans ta déclaration du word_array

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
	/*!
	* Create an array of word objects, each representing a word in the cloud
	*/
	var word_array = [
		//{text: "Lorem", weight: 15},
		//{text: "Ipsum", weight: 9, link: "http://jquery.com/"},
		//{text: "Dolor", weight: 6, html: {title: "I can haz any html attribute"}},
		//{text: "Sit", weight: 7},
		//{text: "Amet", weight: 5}
		// ...as many words as you want
 
	{text: "Condition de la femme", weight: 4},{text: "Corps", weight: 17},{text: "Liberté d'expression", weight: 18},{text: "Motifs de tapis turcs", weight: 6},{text: "Mythes et légendes", weight: 3},{text: "Nature", weight: 7},{text: "Paysages urbains", weight: 3},{text: "Paysans d'Anatolie", weight: 9},{text: "Portrait", weight: 2},{text: "Scènes de vie", weight: 2},{text: "Spiritualité, soufisme", weight: 3},{text: "Anatolian peasants", weight: 9},{text: "Art of Turkish carpets", weight: 6},{text: "Freedom of expression", weight: 18},{text: "Life scenes", weight: 2},{text: "Myths and legends", weight: 3},{text: "Nature", weight: 7},{text: "Portrait", weight: 2},{text: "Spirituality, Sufism", weight: 3},{text: "Status of Women", weight: 4},{text: "The human body", weight: 17},{text: "Urban Landscapes", weight: 3},{text: "Aujourd'hui", weight: 1},{text: "Corps ", weight: 1},{text: "Corps à corps", weight: 1},{text: "Croisez les regards", weight: 1},{text: "Décomposition des pensées", weight: 1},{text: "Décomposition II", weight: 1},{text: "Dede", weight: 1},{text: "Derviche Tourneur", weight: 2},{text: "Des âmes ", weight: 1},{text: "Des regards", weight: 1},{text: "Elles", weight: 1},{text: "Exigences", weight: 1},{text: "Faiblesse", weight: 1},{text: "Femmes", weight: 1},{text: "Galata Kulesi (La tour de Galata)", weight: 2},{text: "Garo ", weight: 1},{text: "Gözlerimin içine bak (Regarde moi dans les yeux)", weight: 2},{text: "Istanbul'u dinliyorum (J'écoute Istanbul)", weight: 1},{text: "Jéjé", weight: 1},{text: "Jiji", weight: 1},{text: "Kars ", weight: 1},{text: "Kendini Ifade Et I (Exprime toi I)", weight: 1},{text: "Kendini Ifade Et III (Exprime toi III)", weight: 1},{text: "Küçüğüm (Je suis petite)", weight: 1},{text: "L'arbre dans la ville", weight: 1},{text: "L'esprit ", weight: 1},{text: "La force corporelle III ", weight: 1},{text: "La malédiction ", weight: 1},{text: "La pause thé", weight: 1},{text: "La traite ", weight: 1},{text: "Le berger au repos", weight: 1},{text: "Le berger et son troupeau", weight: 1},{text: "Le duel des scorpions", weight: 1},{text: "Le feu ", weight: 1},{text: "Le jugement ", weight: 1},{text: "Le passage", weight: 1},{text: "Le poison aux yeux d'or", weight: 1},{text: "Le soulagement", weight: 1},{text: "Le tandir ", weight: 1},{text: "Le tirpan", weight: 1},{text: "Le vent", weight: 1},{text: "Le yayik ", weight: 1},{text: "Les scorpions", weight: 1},{text: "Mon amour rose", weight: 1},{text: "Nani", weight: 1},{text: "Nu", weight: 1},{text: "Nu accroupi", weight: 1},{text: "Nu allongé", weight: 4},{text: "Nu assis", weight: 4},{text: "Nu debout", weight: 3},{text: "Şahmaran II (Shahmeran)", weight: 1},{text: "Sans titre", weight: 9},{text: "Tapis des nomades ", weight: 1},{text: "Tour de Léandre", weight: 1},{text: "« D. T. » Derviches tourneurs", weight: 1},{text: "Acrylique", weight: 1},{text: "Carton", weight: 1},{text: "Collage, acrylique", weight: 1},{text: "Eau forte", weight: 9},{text: "Eau forte, aquatinte", weight: 1},{text: "Eau forte, pointe sèche", weight: 1},{text: "Eau forte, sucre", weight: 1},{text: "Encre de chine", weight: 8},{text: "Gravure au scotch", weight: 12},{text: "Gravure au sucre", weight: 2},{text: "Huile sur toile de coton", weight: 3},{text: "Huile sur toile de lin", weight: 8},{text: "Medium", weight: 7},{text: "Monotype", weight: 5},{text: "Techniques mixtes", weight: 14},{text: "Acrylic", weight: 1},{text: "Bonding, acrylic", weight: 1},{text: "Cardboard etching", weight: 1},{text: "Chinese ink", weight: 8},{text: "Indirect technique or acid", weight: 10},{text: "Indirect technique or acid, aquatint", weight: 1},{text: "Indirect technique or acid, sugar", weight: 1},{text: "Mixed techniques", weight: 14},{text: "Monotype", weight: 5},{text: "Oil painting on cotton canvas", weight: 3},{text: "Oil painting on linen canvas", weight: 8},{text: "Sellotape etching", weight: 12},{text: "Sugar etching", weight: 2},{text: "Xylography", weight: 7},			
 
	];

supprime la virgule après le dernier objet IE n'apprécie pas du tout!

16/04/2015, 11h46
binco
Pour la virgule le problème est résolu

En IE8 sur un grand écran pc j'ai la "présentation" alloué à un téléphone portable:
Si j'ai bien compris:
- au final Respond.js ne n'harmonise pas à 100% la présentation entre IE8, Mozilla ....
- Mon souci vient du codage Bootstrap: pour les écrans qui ont une largeur de 768px et +
Code:

1 2 3 4 5 6 7 8 9 @media (min-width:768px) { .navbar-nav { float:left; margin:0 } .navbar-nav>li { float: left } .navbar-nav>li>a {
Est ce que j'ai bien compris?
18/04/2015, 14h12
NoSmoking
Citation:

- au final Respond.js ne n'harmonise pas à 100% la présentation entre IE8, Mozilla ....

je dirais plutôt que bootstrap n'a pas tout verrouillé :aie:

Dans ton cas, et pour le menu, il te faut semble t-il faire une initialisation avant du type :
Code:

1 2 3 4 .navbar-nav, .navbar-nav>li { float:none }
à mettre dans un fichier css et à appeler avant le css bootstrap, par exemple
Code:

1 2 3 
je pense qu'il devrait subsister d'autres surprises ;)

Merci NoSmoking mais aucun effet?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<title>...</title>
 
	<!--[if lt IE 9]>
	<style type="text/css">
		@media (min-width: 768px) {
			.navbar-nav,
			.navbar-nav>li {
				float:none
			}
		}
	</style>
	<![endif]-->
 
    <!-- Bootstrap core CSS (CDN):-->
	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
 
	<!-- Appels permettant aux navigateurs ne prenant pas en charge HTML5 et les Media Queries CSS3 de le faire ; ils visent essentiellement IE8:-->
	<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
 
	<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
 
	<!-- CSS en fonction de l'heure:-->
 
	<link rel="stylesheet" type="text/css" href="css-site-lucite-green.css" />
 
	<!-- CSS partie Univers-->
	<link rel="stylesheet" type="text/css" href="jqcloud.css" />

Citation:

Merci NoSmoking mais aucun effet?

Oui mais non, tu n'a pas fait ce que j'ai dis

Citation:

Envoyé par NoSmoking

à mettre dans un fichier css et à appeler avant le css bootstrap,

.

Autre chose,

Code:

<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>

doit être mise avant tout dans ta head.

En gros en reprenant à partir du TITLE
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <title>...</title>   <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">  <link rel="stylesheet" type="text/css" href="/css-site-custard-yellow.css" /> <link rel="stylesheet" type="text/css" href="/jqcloud.css" />  <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
essaies avec cela.

20/04/2015, 21h31
binco

Toujours pas

J'ai également essayé en mettant responds.js à la racine du site ... aucun résultat

C'est bizarre parce que respond.js se vente d'avoir mis en place un outils qui adapte le css pour IE8...

Ton fichier bootstrap_ie8.css

Code:

1
2
3
4
5
6
@media (min-width: 768px) {
    .navbar-nav,
    .navbar-nav>li {
        float:none
    }
}

Non simplement

Code:

1
2
3
4
.navbar-nav,
.navbar-nav>li {
    float:none
}

20/04/2015, 23h08
binco
ok
Résultat: pas de modif

J'ai fait un test avec sur la couleur de fond du body et ça ne marcha pas non plus:

bootstrap_ie8.css:
Code:

1 2 3 4 5 6 .navbar-nav, .navbar-nav>li { float:none } body {background-color: blue;}
22/04/2015, 23h41
NoSmoking
Bizarre vous avez dit qu'IE était bizarre comme c'est bizarre ! :calim2:

Je m'explique :
avec
Code:

1 2 3 4 .navbar-nav, .navbar-nav>li { float:none }
cela ne fonctionne effectivement pas !

avec
Code:

1 2 3 4 5 6 7 8 9 10 11 12 .navbar-nav, .navbar-nav>li { float:none; } /* @media (min-width:768px) { .navbar-nav, .navbar-nav>li { float: left } } */
cela fonctionne, comme si respond.js parsé quand même la partie @media en commentaire, tu n'es pas sortie de l'auberge :aie:
29/04/2015, 15h42
binco

Merci beaucoup NoSmoking
Ça marche

Grâce à ton aide, mon site est pratiquement adapté à IE8
Encore 2 choses qui me posent problème: j'ai cherché sans succès

1) Sur le site -> Travaux (menu) -> Réalisations -> clic sur une œuvre: le voile gris transparent recouvre aussi la fenêtre modale

2) En pied de page -> Recherche des oeuvres par thème -> clic sur Corps: les polices et la présentation diffèrent complètement

Cordialement
02/05/2015, 09h26
binco

Changement de stratégie: je reviens à la version initiale

Merci encore
02/05/2015, 09h48
NoSmoking

Je t'avais prévenu

Citation:

(...) tu n'es pas sortie de l'auberge :aie: