Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11

Ne fonctionne pas sous IE

10 réponses
Avatar
Le Fou
Bon, mon précédent fil partant sur OS X, Linux etc. J'en ouvre un autre
beaucoup plus SIMPLE ;-)

Ce bout de code HTLM tout bête :

========== Début code ==========
<html>
<head>

<style type="text/css">

.lightbox {
display: none;
}

.lightbox:target {
display: block;
}

</style>

</head>
<body>

<a href="#cible1"><img src="images/annonces/p_Jeunes_01.jpg"></a>

<div class="lightbox" id="cible1">
<img src="images/annonces/Jeunes_01.jpg" alt="Jeunes">
</div>

</body>
</html>
========== Fin code ==========

Fait apparaitre une grande image quand on clique sur une petite et
utilise la pseudo-classe "target".
Fonctionne parfaitement sous Firefox.

Ne fonctionne pas sous IE9.
Pourquoi ?

La page est visible ici :
<http://ffessm.cd84.free.fr/_test_lightbox.htm>

Merci.

--
A' tchao

Le Fou
http://shippylelivre.free.fr/
http://www.ffessm-cd84.com/

10 réponses

Avatar
Olivier Miakinen
Bonjour,

Le 10/11/2014 20:18, Le Fou a écrit :
Bon, mon précédent fil partant sur OS X, Linux etc. J'en ouvre un autre
beaucoup plus SIMPLE ;-)

Ce bout de code HTLM tout bête :

========== Début code ========= > <html>



Tu devrais commencer par mettre un DOCTYPE, si ça se trouve ça suffira
à faire fonctionner la page sur IE. Je me rappelle qu'à l'époque où je
m'y intéressais, c'est-à-dire environ à l'arrivée d'IE6, le fait de ne
pas trouver de DOCTYPE (ou un DOCTYPE incorrect) le faisait passer dans
une sorte de mode de comptabilité avec IE5, avec tous les bugs liés à
cette version antédiluvienne.

<head>

<style type="text/css">

.lightbox {
display: none;
}

.lightbox:target {
display: block;
}

</style>

</head>



Tu n'as pas mis de TITLE dans ton HEAD alors que c'est obligatoire.
Peut-être aussi une source de problème.

<body>

<a href="#cible1"><img src="images/annonces/p_Jeunes_01.jpg"></a>



Là il y a une autre erreur, l'absence d'attribut alt, mais je ne
pense pas que ça puisse être l'origine d'un bug.

La page est visible ici :
<http://ffessm.cd84.free.fr/_test_lightbox.htm>



Cordialement,
--
Olivier Miakinen
Avatar
SAM
Le 10/11/14 20:18, Le Fou a écrit :

Ne fonctionne pas sous IE9.
Pourquoi ?



Je n'ai pas IE mais Mozilla dit que ça doit fonctionner avec IE.9
<https://developer.mozilla.org/fr/docs/Web/CSS/:target>

La page est visible ici :
<http://ffessm.cd84.free.fr/_test_lightbox.htm>




Peut-être essayer de donner une taille (styles width et height) au div à
révéler ?


Ça aide bien les IE qu'ils aient le "Layout"
(voir la Bke de Données de M$ à propos de "HasLayout")
(voir aussi alsacreations avec même sujet)



M'enfin ... ça ne devrait pas fonctionner avec les IE <9

Cordialement,
--
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
Avatar
SAM
Le 10/11/14 20:18, Le Fou a écrit :

La page est visible ici :
<http://ffessm.cd84.free.fr/_test_lightbox.htm>



Ce "truc" là d'agrandi n'a un intérêt que très limité !
Dans la mesure où, de toutes façons, la grande vue est chargée à
l'ouverture de la page !

Autant ne se servir que d'elle et en modifier la taille au survol:


css :
==== .vue { text-decoration: none; border: none; }
.vue img { width: 210px }
.vue:hover img { width: 640px; }

html:
==== <a class="vue" href="#"><img src="grande-vue.jpg" alt="test"></a>




Mais il serait plus à propos d'utiliser une image de background qui,
elle, ne sera chargée qu'à la demande
(avec un temps de latence surtout pour les visiteurs avec ADSL lent)

css :
==== .vue { text-decoration: none; border: none; }
.vue img { width: 210px; height: 141px;
bakground:url(petite.jpg) no-repeat center center; }
.vue:hover img { width: 640px; height: 430px;
background-image:url(grande.jpg); }

html:
==== <a class="vue" href="#"><img src="vide.gif" alt="test"></a>

'vide.gif' est une image transparente N/B de 1 pixel


Cordialement,
--
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
Avatar
SAM
Le 10/11/14 20:18, Le Fou a écrit :

La page est visible ici :
<http://ffessm.cd84.free.fr/_test_lightbox.htm>



voir modifs ici : <http://getwebb.org/d/otBdH82n>



Cordialement,
--
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
Avatar
SAM
Le 11/11/14 16:13, SAM a écrit :

voir modifs ici : <http://getwebb.org/d/otBdH82n>



et modifs en variante : <http://getwebb.org/d/oAvPrkNw>



Cordialement,
--
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
Avatar
SAM
Le 11/11/14 16:26, SAM a écrit :

et un p'tit dernier pour la route :

<http://getwebb.org/d/b9nJvpaR>



Toujours pas testé sous IE (que je n'ai pas)

Cordialement,
--
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
Avatar
Le Fou
Le 11/11/2014 18:45, SAM a écrit :
et un p'tit dernier pour la route :

Toujours pas testé sous IE (que je n'ai pas)



Alors, sous IE9 :

voir modifs ici : <http://getwebb.org/d/otBdH82n>



- Fonctionne, mais...
L'image s'agrandit dès que le curseur de la souris survole la page
(n'importe quel endroit) ;-)


et modifs en variante : <http://getwebb.org/d/oAvPrkNw>



- Fonctionne mais sans les effets de transition.


<http://getwebb.org/d/b9nJvpaR>



- Fonctionne à moitié, l'image "petit format" n'est pas visible.


Je garde tes exemples sous le coude, ils sont sympas mais ce que je
souhaite c'est vraiment faire fonctionner la pseudo-classe "target" avec
MON IE9.
Car ceci n'est qu'un exemple, même en essayant de modifier le background
d'un DIV ou la couleur u texte et. ça ne fonctionne pas avec MON IE9 et
ça m'énerve ;-)

Merci.

--
A' tchao

Le Fou
http://shippylelivre.free.fr/
http://www.ffessm-cd84.com/
Avatar
Le Fou
Le 10/11/2014 22:33, Olivier Miakinen a écrit :

Tu devrais commencer par mettre un DOCTYPE, si ça se trouve ça suffira
à faire fonctionner la page sur IE. Je me rappelle qu'à l'époque où je
m'y intéressais, c'est-à-dire environ à l'arrivée d'IE6, le fait de ne
pas trouver de DOCTYPE (ou un DOCTYPE incorrect) le faisait passer dans
une sorte de mode de comptabilité avec IE5, avec tous les bugs liés à
cette version antédiluvienne.



J'ai rapidement essayé avec un DOCTYPE "4.01 Transitional", ça
fonctionne en local mais pas en ligne...

J'essayerai demain avec d'autres DOCTYPEs.

Merci.

--
A' tchao

Le Fou
http://shippylelivre.free.fr/
http://www.ffessm-cd84.com/
Avatar
Olivier Miakinen
Le 11/11/2014 20:39, Le Fou a écrit :

J'ai rapidement essayé avec un DOCTYPE "4.01 Transitional", ça
fonctionne en local mais pas en ligne...



Alors ça, c'est bizarre. Vérifie d'une part que la page a bien été
transférée (c'est un piège qui arrive plus souvent qu'on ne le croit)
et d'autre part que l'ancienne page n'est pas restée en cache, soit
dans ton navigateur, soit sur un éventuel proxy.

J'essayerai demain avec d'autres DOCTYPEs.



Pour être sûr que c'est la bonne page, ajoute un texte quelconque.
Avatar
Le Fou
Le 11/11/2014 22:37, Olivier Miakinen a écrit :

Alors ça, c'est bizarre. Vérifie d'une part que la page a bien été
transférée (c'est un piège qui arrive plus souvent qu'on ne le croit)
et d'autre part que l'ancienne page n'est pas restée en cache, soit
dans ton navigateur, soit sur un éventuel proxy.



Bon bin... J'y comprends rien non-plus.
Avec un DOCTYPE ça fonctionne en local mais pas en ligne !

Essais effectués avec les DOCTYPEs :
- HTML 4.01 Transitional
- HTML 4.01 Strict
- HTML 4.0 Transitional
- HTML 4.0 Strict
- HTML 5 (<!DOCTYPE html>)

<http://ffessm.cd84.free.fr/_test_lightbox.htm>

Je vais finir par croire que ma version de IE9 est daubée ;-)

--
A' tchao

Le Fou
http://shippylelivre.free.fr/
http://www.ffessm-cd84.com/