28172 sujets

CSS et mise en forme, CSS3

Incompatibilité

Bonjour a tous,

Je m'aperçois que mon site n'est pas compatible avec IE8 et versions antérieures.
Apparemment, il n'accepte pas les z-index, il y a donc des décalages d'images et le menu qui est censé suivre le scroll automatiquement, ne fonctionne pas du tout!

Connaissez-vous un remède ?

Voici le site en question : http://rodolphe.meslin.free.fr

Merci
Bonjour Freemuse,

En effet vous avez des erreurs HTML & JS dans votre page, mais pas uniquement pour IE.
Exemple sur votre page http://rodolphe.meslin.free.fr/, vous avez 2 <script /> imbriqués : 
ligne 19:
<script type="text/javascript">
<script type="text/javascript">
    jQuery(function($){
        $('a.zoombox').zoombox({
            theme : 'darkprettyphoto'
			
        });
        
        [...]

    });
</script>
</script>

Vous avez aussi l'erreur JS suivante...
caroufredsel.js:ligne 15
carouFredSel: No element found for "#carrousel".

... et en effet il n'existe pas d'élément #carrousel dans la page. Ce qui va couper sous IE7 & 8 tous les JS suivants.

Vous avez dans tous navigateurs (Chrome, FF, Safari, IE, ...) des inspecteurs de code qui vous retournent une multitude d'informations, entre autre les erreurs HTML, CSS, JS, ... Exemples :
- FireFox : https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector
- Chrome : https://developers.google.com/chrome-developer-tools/docs/elements

Ils vous permettront de dégager une bonne partie des erreurs avant de vous attaquez au z-index.

Bon debug et bon code...
Modifié par Guiwint (27 Feb 2014 - 18:42)
Merci pour ces remarques Guiwint,

J'ai donc revu cela mais mon menu ne s'affiche toujours pas correctement sous ie8, comment puis-je résoudre le problème .

Voici comment il apparaît sous IE8 :
rodolphe.meslin.free.fr/1.jpg

et comment il devrait apparaître :
rodolphe.meslin.free.fr/2.jpg

Merci de votre aide.
Salut,

Les versions IE8 et antérieures ont des règles bien précises pour les z-index : c'est l'élément parent qui doit avoir un z-index plus fort.

Exemple

Code HTML

<div id="parent"> <!-- Element parent donc z-index -->
<div id="enfant">Mon contenu qui passe par dessus ce qui il y a en dessous</div>
</div>
<div id="contenu">Ce contenu aura un z-index inférieur</div>

Code CSS :

#parent{position:relative;z-index:10} /* Pour IE8 et moins */
#enfant{position:relative;/*z-index:10*/}
#contenu{position:relative;z-index:1}


En gros c'est ça, après tu peux chercher car beaucoup de cas sont exposés à ce sujet.
Bonjour Freemuse,

En effet vous avez encore une erreur JS sous IE7 & 8 qui bloque tous les JS suivants :
SCRIPT438: L’objet ne gère pas la propriété ou la méthode « addEventListener »
Fichier : jquery.js, ligne : 4, colonne : 6105

On peut lire dans votre fichier jquery.js les informations suivantes...
! jQuery v2.0.3 | (c) 2005, 2013 jQuery Foundation, Inc. | jquery.org/license
... et les versions 2.x.x de jQuery ne sont plus compatibles avec les navigateurs IE6, 7 et 8 (voir jQuery 2.0 Released).

De plus il s'avère que vous avez chargé 3 versions de jQuery dans votre page http://rodolphe.meslin.free.fr/...
20 : <script type="text/javascript" src="../js/jquery1.6.4.js"></script>
96 : <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
198 : <script src="js/jquery.js"></script>
... ce qui est absolument déconseillé, à moins que vous maîtrisiez la fonction noConflict() (et encore, 3 libs jQuery exploitées, c'est un cas extrême). Il serait préférable de ne charger qu'une seule version de jQuery 1.x.

A priori votre page fonctionne sur les navigateurs récents parce que vous avez beaucoup de chance...

Dans votre cas, je vous invite à utiliser les outils de développement de IE pour vous en sortir (voir par exemple : Utiliser les outils de développement de Windows Internet Explorer 8 pour corriger votre site).

Encore bon debug et bon code...
Modifié par Guiwint (28 Feb 2014 - 17:41)
Re-bonjour,

Merci pour vos réponses rapides...sympa de voir une communauté si active.

Comme vous l'avez compris, je ne suis pas un grand codeur, mon site (rodolphe.meslin.free.fr) regorge d'erreur ! Je mets des bouts de codes que je trouve ici et là, le principal étant pour moi de présenter mon entreprise à nos futurs clients.

Pour l'incompatibilité avec IE8, j'ai trouvé une solution avec un "ptit bout de code" :
<!--[if lt IE 9]>
<script src="/dist/html5shiv.js"></script>
<![endif]-->

mais...qui ne fonctionne pas avec IE7. Connaîtriez-vous un autre code pour régler le problème avec IE7 ?

Pour le reste, j'ai tenté comme me la préconisé Guiwint de nettoyer le code...une affaire pas simple quand on ne sait pas trop ce que l'on supprime Smiley ravi

Merci d'avance.
Sujet clos
Aller à