Optimiser site pour IE8 et inférieur

Question

bobb

11 Jan 2014 à 18:22

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%; }

bobb

12 Jan 2014 à 05:11

S'il vous plaît j'aurais vraiment besoin de votre aide.
Pour être plus précis le problème de compatibilité concerne l'image de background, le menu, le header, et la position de col21 et col22.
Merci d'avance

Felipe

Administrateur

12 Jan 2014 à 10:46

Bonjour,

bobb a écrit :
S'il vous plaît j'aurais vraiment besoin de votre aide.

Que personne n'ait répondu un dimanche à 5H du mat' (heure de France métropolitaine) à un sujet posté un samedi à 18H n'est pas trop étonnant, non ?

Sinon, après une lecture rapide des CSS et sans voir le résultat dans une page en ligne ou en capture d'écran, je détecte quand même un problème certain : background-size n'est pas reconnu par IE8. Il affiche l'image de fond telle quelle, selon sa taille d'origine.

bobb

12 Jan 2014 à 23:34

Bonjour,
Je sais bien que IE8 ne reconnait pas cette formule, ma question est comment y remedier?

mathieu1004

13 Jan 2014 à 16:48

Après lecture du premier résultat de google avec la recherche background-size ie8 :
http://stackoverflow.com/questions/4885145/ie-8-background-size-fix
A priori plusieurs solution de hack : en javascript :
https://github.com/louisremi/jquery.backgroundSize.js

$("h2#news").css({backgroundSize: "cover"});

ou en css :

//IE8.0 Hack!
@media \0screen {
    .brand {
        background-image: url("./images/logo1.png");
        margin-top: 8px;
    }

    .navbar .brand {
        margin-left: -2px;
        padding-bottom: 2px;
    }
}

//IE7.0 Hack!
*+html .brand {
    background-image: url("./images/logo1.png");
    margin-top: 8px;
}

*+html .navbar .brand {
    margin-left: -2px;
    padding-bottom: 2px;
}

Tu n'as plus qu'a choisir Smiley smile

( et aussi à lire la page du lien pour mieux comprendre Smiley lol

)

Sujet clos

CSS et mise en forme, CSS3

Optimiser site pour IE8 et inférieur