Sujet Précédent Sujet Suivant

Optimiser affichage pour IE8 et antérieur

Fermé
bobisolo Messages postés 8 Date d'inscription vendredi 10 janvier 2014 Statut Membre Dernière intervention 14 janvier 2014 - 11 janv. 2014 à 18:48
bobisolo Messages postés 8 Date d'inscription vendredi 10 janvier 2014 Statut Membre Dernière intervention 14 janvier 2014 - 14 janv. 2014 à 07:23
Bonjour,
J'aimerais s'il vous plait savoir comment optimiser l'affichage de mon site sur Internet Explorer 8 et inférieur. L'affichage se fait correctement sur les autres navigateurs mais le css est illisible voir invisible sur IE. Voici mon code css : 
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{ margin:0; padding:0}
h1,h2,h3,h4,h5,h6{ font-size:100%; font-weight:normal; }
a{ text-decoration:none}

body{ text-align:center; font-family:tahoma; font-size:12px; line-height: 1.5;}

.clear{clear:both;}

#menu, #menu ul {
     margin:0px;
     padding:0px;
     font-size:0px;     
     list-style-type:none;
}

#menu > li{
     border-right:1px ;
     
}
#menu li:last-child{
     border:none;
}
#menu li {
     display: inline-block;
     font-size:12px;
     position:relative;
}

#menu a {
     display:block;
     width:150px;
     height:30px;
     line-height:30px;
     text-align:center;
     
     
     color:white;
     text-decoration:none;
     font-family:tahoma;
}

#menu li ul{
     position:absolute;
     left:-5000px;
     background:#a1a1a1
}

#menu li:hover > ul{
     left:0px;    
     
}

#menu li li:hover > ul{
     left:130px;
     top:0px;
     
}

#menu a:hover{
     color: #2a88c7;
     background-color:#000000;
     
}



#head{ background:url(images/abg.png)repeat-x ;height:83px; min-width:1300px; 
}
    #head #paysage { position:relative; background:url(images/Header.png) top center no-repeat; height:83px;}
    #head #paysage #menu{left:180px;}

   
    
body{ background-image:url(images/boubin.gif); padding:0 0; margin:0;background-size:100%; background-attachment:fixed; background-repeat:no-repeat; background-size: cover;
-webkit-background-size: cover; /* pour Chrome et Safari */
    -moz-background-size: cover; /* pour Firefox */
    -o-background-size: cover; /* pour Opera */
    background-size: cover; /* version standardisée */}

#main { margin-top:100px; width:1000px; text-align:left; vertical-align: text-top;}
img {vertical-align: text-top;}
    #col21{ width:625px; margin-left:210px; float:left;}
    #col21 .post-top{ background:url(images/post_head.png) #fefefe top left no-repeat;  position:relative; height:36px;}
    #col21 .post-top h1{ text-align:center; font-family:tahoma; font-size:18px; font-weight:bold; text-transform:uppercase; height:36px; line-height:35px;}
    #col21 .post-cat{ position:absolute; top:2px; left:8px; font-size:14px;}
    #col21 .post-top h1 a,#col21 .post-cat a,#col21 .post-cat{ color:#fefefe;}
        #col21 .post-top.actualite{background-color:#a8c0cd;}
        #col21 .post-top.actualite h1 a,#col21 .post-top.actualite .post-cat a,#col21 .post-top.actualite{ color:#a8c0cd;}
        
        #col21 .post-top.musique{background-color:#8787e9;}
        #col21 .post-top.musique h1 a,#col21 .post-top.musique .post-cat a,#col21 .post-top.musique{ color:#8787e9;}
        .grayscale img
{
        filter: grayscale(1);
        -webkit-filter: grayscale(1);
        -moz-filter: grayscale(1);
        -o-filter: grayscale(1);
        -ms-filter: grayscale(1);
}
.grayscale img:hover
{
        filter: grayscale(0);
        -webkit-filter: grayscale(0);
        -moz-filter: grayscale(0);
        -o-filter: grayscale(0);
        -ms-filter: grayscale(0);
}
        
        #col21 .post-top.videos{background-color:#cc99ff;}
        #col21 .post-top.videos h1 a,#col21 .post-top.videos .post-cat a,#col21 .post-top.videos{ color:#cc99ff;}
        
        #col21 .post-top.creativite{background-color:#2a88c7;}
        #col21 .post-top.creativite h1 a,#col21 .post-top.creativite .post-cat a,#col21 .post-top.creativite{ color:#2a88c7;}
        
        #col21 .post-top.lifestyle{background-color:#4eada3;}
        #col21 .post-top.lifestyle h1 a,#col21 .post-top.lifestyle .post-cat a,#col21 .post-top.lifestyle{ color:#4eada3;}
        
        #col21 .post-top.bonus{background-color:#58b7e8;}
        #col21 .post-top.bonus h1 a,#col21 .post-top.bonus .post-cat a,#col21 .post-top.bonus{ color:#58b7e8;}
        
      #coco a {
        
	display:inline-block;
	background: url(images/content/chichi.jpg) no-repeat;
}


      #coco a:hover img {
	visibility: hidden;
}

.img { 
width:300px; 
display:inline-table; 
vertical-align:top; 
} 
.text { 
width:300px;
display:inline-table; 
vertical-align:top; 
} 
.text p { 
margin:0; 
} 


    #col21 .post-content{ background:url(images/post.png) ; color:#000000; box-shadow: 1px 6px 6px; padding: 0 0px;}
    img {vertical-align: text-top;}
    #col21 .post-content a{font-weight:bold; text-decoration:underline; color:#2887c7;}
    #col21 .post-feet{ height:9px; width:625px; background:url(images/bloc-feet.png); box-shadow: 1px 4px 6px; margin-bottom:20px;}
    
    
    #col22{ float:right; width:124px; padding-left:22px;}
    #col22 h2{ border-bottom:solid 1px #4b4b4b; font-size:21px; text-transform:uppercase; color:#4b4b4b;  margin-bottom:15px; margin-top:30px;}
    #col22 .widget_categories h2{ margin-top:0;}
    #col22 .widget_categories ul{list-style:none}
    #col22 .widget_categories li{ height:35px; width:192px; background:url(images/categories.png) left no-repeat #2a88c7; box-shadow: 6px 6px 6px; text-transform:uppercase; text-align:center ; font-size:16px; line-height:30px; padding-left:0px; margin-bottom:7px;}
    #col22 .widget_categories li a{ color:#2a88c7;}
    
        #col22 .widget_categories li,#col22 .widget_categories li.cat-item-5{background:url(images/categories.png)#58b7e8 ;}        
        #col22 .widget_categories li,#col22 .widget_categories li.cat-item-7{background:url(images/categories.png)#4eada3 ;}  
        #col22 .widget_categories li,#col22 .widget_categories li.cat-item-6{background:url(images/categories.png)#2a88c7 ;}
        #col22 .widget_categories li,#col22 .widget_categories li.cat-item-3{background:url(images/categories.png)#8787e9 ;}
        #col22 .widget_categories li,#col22 .widget_categories li.cat-item-4{background:url(images/categories.png)#a8c0cd;}
        #col22 .widget_categories li,#col22 .widget_categories li.cat-item-8{background:url(images/categories.png)#cc99ff;}
        
                
        #col22 .widget_categories li a,#col22 .widget_categories li.cat-item-5 a{ color:#58b7e8; }
        #col22 .widget_categories li a,#col22 .widget_categories li.cat-item-8 a{ color:#cc99ff; }
        #col22 .widget_categories li a,#col22 .widget_categories li.cat-item-7 a{ color:#4eada3; }
        #col22 .widget_categories li a,#col22 .widget_categories li.cat-item-6 a{ color:#2a88c7; }
	#col22 .widget_categories li a,#col22 .widget_categories li.cat-item-3 a{ color:#8787e9; }
	#col22 .widget_categories li a,#col22 .widget_categories li.cat-item-4 a{ color:#a8c0cd; }
		

    #col22 .bloc-top{ width:210px; height:18px; background:url(images/bloc-top.png) top left no-repeat; box-shadow: 1px 4px 6px;}
    #col22 .bloc{ width:166px; background:url(images/bloc.png); padding: 0 22px;box-shadow: 1px 4px 6px;}
    #col22 .bloc img{ float:left; margin-bottom:8px; margin-right:8px;}
    #col22 .bloc p{ padding-bottom:10px;}
    #col22 .bloc-bot{ width:200px; height:6px; background:url(images/feet.png) top left no-repeat;}
    
    
#footer{ height:142px; background:url(images/Bg_footer.png) repeat-x top left;min-width:1200px;}
    #footer #footer-img{ width:847px; height:142px; margin:0 auto; background:url(images/Footer.png) left top no-repeat;background-size:100%; }
A voir également:

5 réponses

Réponse 1 / 5
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 738
13 janv. 2014 à 04:57
Salut deja oubli du point virgule de fin d'attribut

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{ margin:0; padding:0}

a{ text-decoration:none}

#menu li ul{
position:absolute;
left:-5000px;
background:#a1a1a1
}

ca peut faire foirer tout le reste du code donc revérifie bien tout le code car j'ai pas été plus loin en verif

background:url(images/bloc-top.png) top left no-repeat;
pas sur que ce soit pris en compte par IE8 de déclarer background-image comme ca

background-size:cover; pas pris en charge

petite question le dossier images est ou ? racine du site ou dans le dossier css ?
si il est à la racine du site les chemin url(images/bloc-top.png) ne sont pas correctes ce devrait être url(../images/bloc-top.png)

voila deja verifie quand meme si <link rel="stylesheet" href="css/ie.css" ... à un chemin correct ou nom de fichier correct

voila

un conseil oublie IE7 et IE6 et fait juste un truc acceptable pour IE8 (utilisateurs XP de niveau peu expérimenté)

1
Réponse 2 / 5
elgazar Messages postés 5841 Date d'inscription mercredi 30 octobre 2013 Statut Membre Dernière intervention 17 mars 2021 1 322
11 janv. 2014 à 19:50
ie8 était largement en dessous des autres au niveau du respect du code ( et je ne parle pas de ie7 ou de ie6 qui sont encore pire), donc il y a de grandes chances pour qu'en voulant modifier le code pour qu'il soit acceptable sur ie8, tu bousilles l'affichage sur les navigateurs actuels.
Le mieux c'est de faire des hacks css ( cad des rajouts de code spécialement destinés à ie8), tu peux aussi créer un second fichier css pour ie8 seulement, ca dépends des modifications que tu as à faire
http://css.4design.tl/une-feuille-de-style-et-des-hacks-css-pour-cibler-ie6-ie7-ou-ie8/
0
Réponse 3 / 5
bobisolo Messages postés 8 Date d'inscription vendredi 10 janvier 2014 Statut Membre Dernière intervention 14 janvier 2014 1
11 janv. 2014 à 22:24
Merci, je vais me pencher dessus et voir si je peux m'en tirer. Je te reviens avec le résultat.
0
Réponse 4 / 5
bobisolo Messages postés 8 Date d'inscription vendredi 10 janvier 2014 Statut Membre Dernière intervention 14 janvier 2014 1
12 janv. 2014 à 05:58
J'y arrive pas, j'ai passé la nuit dessus mais sans succès.
J'ai beau mettre

<!--[if lte IE 8]>
<link rel="stylesheet" href="css/ie.css" type="text/css" media="screen,projection" />
<![endif]-->

ma feuille de style ie.css n'est pas reconnu par le navigateur, il se passe rien.
Que faire?
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 5
bobisolo Messages postés 8 Date d'inscription vendredi 10 janvier 2014 Statut Membre Dernière intervention 14 janvier 2014 1
14 janv. 2014 à 07:23
Bonjour,
Merci animostab pour tes remarques, elles sont très bonnes et d'ailleurs grâce à toi je me suis rendu compte que c'est à cause d'un mauvais lien que mon commentaire conditionnel pour IE ne marchait pas.
Bon, ceci dit j'ai toujours quelques problèmes (moins graves néanmoins) qui concernent l'affichage de mon image de background qui ne remplit pas tout l'espace, mon menu qui au lieu d'être horizontal devient vertical et mon header qui n'est mystérieusement pas reconnu. Pour le reste j'ai pu trouver des solutions.
Si vous avez des solutions je suis preneur...
0

Discussions similaires

adele
marine carnet-pantier -
irongege -

2 réponses
Leboncoin : j'ai un problème d'affichage
maria1508 -
msi123 -

5 réponses
Les paramètres d'affichage NVIDIA ne sont pas
amouna -
zxk -

25 réponses
Obtenir un affichage décimal sur ma Casio fx 92
Anomyme. -
Bruno -

25 réponses
league of legend impossible d'initialiser le dispositif d'affichage
pascontent -
Sazuko8 -

3 réponses