Sujet Précédent Sujet Suivant

IE, je m'arrache les cheveux

ShinSetsuNFé Messages postés 4 Statut Membre -  
 nocomplain -
Bonjour,

Je suis débutante en programmation. Je commence le site de la société qui m'embauche, et tout fonctionne bien avect tout le monde sauf ie, et et lorsque tout va bien pour ie, tout va mal pour le rest. Normal, donc j'essai de faire une deuxième CSS pour ie tout seul. Seulement je n'y arrive pas. C'est un peu problématique, car il va falloir que je rende copie et que je ne me sens pas de cacher la moitié de mon travail ;p

Bref, mon site est composé d'un include, d'une image de dessus, d'un corps avec un background qui représente la continuité de l'image de dessus en repeat, et l'image de dessous pour faire la bordure du bas.

Seulement, la partie du corps avec le background repeat, se décale vers la gauche sous ie. Désolée de ne pas pouvoir vous montrer un aperçu.

Fichier index 
<body> 
     
<!-- espace entête/corps   
<div> </div>-->  
     

<!--Dessus bloc-->  

    <img src="images/fd_dessus_bloc_www__fr.png" class="div_dessus_bloc"/> 

<!-- FIN Dessus bloc--> 


<!-- Bloc --> 
<div class="div_bloc"> 
     

    <!--Ligne 1--> 
    <div id="ligne_1"> 
       
         
        <!--L1, C1--> 
        <div id="div_L1_C1"> 
            <object type="application/x-shockwave-flash" data="images/flight_board.swf" width="617px" height="169px"><param name="movie" value="images/flight_board.swf" /><param name="allowFullScreen" value="true" /></object> 
        </div> 
        <!--FIN L1, C1--> 
         
        <!-- L1, C2--> 
        <div id="div_L1_C2"> 
            <img src="images/smiley_www__fr.gif" width="318px" height="192px" />      
        </div> 
        <!--FIN L1, C2--> 
     
    </div> 
    <!--FIN Ligne 1--> 



    <!-- Ligne 2 --> 
    <div class="div_ligne"> 

        <!-- L2, C1 - menu gauche--> 
        <div id="div_L2_C1"> 
            <ul id="div_L2_C1_ul"> 
                <li><a href="https://www.afnic.fr/"><img src="images/menu_gauche__rouge.png"/> IMPRESSION</a></li> 
                <li><a href="http://www..fr/pmma.html"><img src="images/menu_gauche__violet.png"/> LETTRAGE</a></li> 
                <li><a href="http://www..fr/adhesif.html"><img src="images/menu_gauche__marron.png"/> SIGNALÉTIQUE</a></li> 
                <li><a href="http://www..fr/adhesif.html"><img src="images/menu_gauche__rose.png"/> MARQUAGE</a></li> 
                <li><a href="http://www..fr/adhesif.html"><img src="images/menu_gauche__parme.png"/> PUBLICITÉ</a></li> 
                <li><a href="http://www..fr/enseigne.html"><img src="images/menu_gauche__vert.png"/> ENSEIGNE</a></li> 
                <li><a href="http://www..fr/adhesif.html"><img src="images/menu_gauche__jaune.png"/> ATELIER</a></li> 
                <li><a href="http://www..fr/adhesif.html"><img src="images/menu_gauche__marine.png"/> DÉCORS</a></li> 
                <li><a href="http://www..fr/adhesif.html"><img src="images/menu_gauche__gris.png"/> INFOGRAPHIE</a></li> 
                <li><a href="https://www.afnic.fr/"><img src="images/menu_gauche__cyan.png"/> CONTACT</a></li> 
            </ul> 
        </div> 
        <!--FIN L2, C1 - menu gauche--> 


        <!-- L2, C2--> 
            <img src="images/Lettres__fr.png" id="div_L2_C2" width="329px" height="354px"/> 
        <!--FIN L2, C2--> 


        <!-- L2, C3 horloge--> 
        <div id="digiclock"> 
        </div> 
        <!--FIN L2, C3 horloge--> 
    
    </div>  
    <!--FIN Ligne 2 --> 
    
</div> 
<!--FIN Bloc --> 


<!--DESSOUS BLOC--> 
    <img src="images/fd_dessous_bloc_www__fr.png" class="dessous_block"/> 
<!--FIN DESSOUS BLOC-->  
     
</body>     
</html>


CSS FF 

body{ 
  margin:auto; 
  width:1200px; 
  text-align:center; 
} 

.div_bloc{ 
    width: 1200px; 
    height:700px; 
    text-align:center; 
    padding-top:2px; 
    background:url(../images/fd_bloc_www__fr.png) repeat-y; 
   
} 


#ligne_1{ 
    background:url(../images/fd_contenu_ligne_1_www__fr.png) no-repeat; 
    width:1200px; 
    height:200px; 
    margin-top:20px; 
    margin-left:30px; 
    /*float:center;*/ 
} 

#div_L1_C1{ 
    display:block; 
    float:left; 
    position: relative; 
    padding-top:30px; 
    margin-top:20px; 
    width:620px; 
} 


#div_L1_C2{ 
    display:block; 
    float:left; 
    position: relative; 
    padding-left:180px; 
    padding-top:30px; 
    width:282px; 
} 



/* ligne 2*************************************************/ 


.div_ligne2{ 
    display:block; 
    position:relative; 
    width: 1200px; 
    height:450px; 
    margin: auto; 
    padding-top:50px; 
    background:url(../images/fd_www__fr.png); 
} 


/*menu*/ 
#div_L2_C1{ 
    padding-left:30px; 
    padding-top:30px; 
    display:block; 
    float:left; 
    position: relative; 
    padding-right:10; 
    width:275px; 
    /*height:420px;*/ 
} 

#div_L2_C1_ul { 
    margin-left:10px; 
    margin-right:50px; 
    padding-left:20px; 
    padding-top:28px; 
    height:332px; 
    background:black; 
    border:white solid 1px; 
    border-radius:15px 15px 15px 15px; 
    -moz-border-radius:15px 15px 15px 15px; 
    -webkit-border-radius:15px 15px 15px 15px; 
    list-style:none; 
    font-family:serif; 
    color:white; 
    font-size:16px; 
    text-height:52px; 
    text-align:left; 
} 

#div_L2_C1_ul a { 
    color:white; 
    text-decoration: none; 
} 


#div_L2_C1_ul a:link { 
    color:white; 
    text-decoration: none; 
} 

#div_L2_C1_ul a:visited { 
    color:white; 
    text-decoration: none; 
} 

#div_L2_C1_ul a:hover { 
    color:white; 
    text-decoration: none; 
} 

#div_L2_C1_ul a:active { 
    color:white; 
    text-decoration: none; 
} 
/*fin menu*/ 

#div_L2_C2{ 
    margin-top:50px; 
    display:block; 
    float:left; 
    position: relative; 
    margin-right:0px; 
    width:290px; 
} 

#div_L2_C3{ 
    display:block; 
    float:left; 
    position: relative; 
    margin-right:0; 
    width:485px; 
    background:black; 
   
   
}


CSS IE 
body{ 
  text-align:center; 
  /*background:red;*/ 
} 

.div_bloc{ 
     
   
    padding-top:2px; 
     
} 


#ligne_1{ 
    text-align:center; 
    /*width:1200px;*/ 
    height:200px; 
    margin-top:20px;/* 
    margin-left:30px;*/ 
    /*float:center;*/ 
} 

#div_L1_C1{ 
    /*display:block; 
    float:left; 
    position: relative;*/ 
    padding-top:30px; 
    margin-top:20px; 
    width:620px; 
}     



#div_L1_C2{ 
    /*display:block; 
    float:left; 
    position: relative;*/ 
    padding-left:180px; 
    padding-top:30px; 
    width:282px; 
} 



/* ligne 2*************************************************/ 


.div_ligne2{ 
    display:block; 
    position:relative; 
    width: 1200px; 
    height:450px; 
    margin: auto; 
    padding-top:50px; 
    background:url(../images/fd_www__fr.png); 
} 


/*menu*/ 
#div_L2_C1{ 
    padding-left:30px; 
    padding-top:30px; 
    display:block; 
    float:left; 
    position: relative; 
    padding-right:10; 
    width:275px; 
    /*height:420px;*/ 
} 
/* 
#div_L2_C1_ul { 
    margin-left:10px; 
    margin-right:50px; 
    padding-left:20px; 
    padding-top:28px; 
    height:332px; 
    background:black; 
    border:white solid 1px; 
    border-radius:15px 15px 15px 15px; 
    -moz-border-radius:15px 15px 15px 15px; 
    -webkit-border-radius:15px 15px 15px 15px; 
    list-style:none; 
    font-family:serif; 
    color:white; 
    font-size:16px; 
    text-height:52px; 
    text-align:left; 
} 

#div_L2_C1_ul a { 
    color:white; 
    text-decoration: none; 
} 


#div_L2_C1_ul a:link { 
    color:white; 
    text-decoration: none; 
} 

#div_L2_C1_ul a:visited { 
    color:white; 
    text-decoration: none; 
} 

#div_L2_C1_ul a:hover { 
    color:white; 
    text-decoration: none; 
} 

#div_L2_C1_ul a:active { 
    color:white; 
    text-decoration: none; 
}*/ 
/*fin menu*/ 





/*#div_L2_C2{ 
    margin-top:50px; 
    display:block; 
    float:left; 
    position: relative; 
    margin-right:0px; 
    width:290px; 
}*/ 

/*#div_L2_C3{ 
    display:block; 
    float:left; 
    position: relative; 
    margin-right:0; 
    width:485px; 
    background:black;*/ 
   
   
}

3 réponses

Réponse 1 / 3
vincent170186 Messages postés 329 Statut Membre 52
 
salut !

ha ie et l'intégration ! que du bohneur !=)

alors pour les petit soucis qu'ie peut causer il y a plusieur possibilité
vu que tu a deja fait une feuille de style propre a ie je te conseil le commentaire conditionnel

--> https://www.alsacreations.com/astuce/lire/48-commentaires-conditionnels.html

(penser a le mettre aprés les ccs de FF pour qu'il soit pit en compte sous ie. si tu le met avant le css FF il sera prit en compte mais ecrasé par le css FF )

une deuxiemme solution...(un peu craignos ! parce que ça devien vite le bordel ! )

https://www.lafermeduweb.net

voila !
0
Mihawk Messages postés 4753 Statut Contributeur 846
 
Le "hack CSS" (2e solution) : y a que ça de vrai :-)
Dommage que ça dépende des versions d'IE...
0
Réponse 2 / 3
mpmp93 Messages postés 2931 Date d'inscription   Statut Membre Dernière intervention   1 341
 
Bonjour,

Puis-je humblement vous suggérer de faire du positionnement CSS...

je le fais sur mes sites et aucun problème d'affichage avec AUCUN NAVIGATEUR!

Tout est expliqué ici:
http://html5.immo-scope.com/index.php?page=html5/miseEnPageAvecPositionnement

un +1 sur mes commentaires - si vous avez apprécié - c'est gentil, merci.
0
nocomplain
 
Quel rapport avec le canard?
Le positionnement css est ce qui justement pose problème car les navigateurs ont chacun une "interpétration" différente qui va faire qu'un positionnement à telle position dépends fortement des décalages et du respect des normes(donc IE est bien sûr lanterne rouge). Il me sembles que c'est Opéra et Chrome qui ont le moins de soucis d'interprétation mais vu que c'est FF (1er) et IE(2nd) les plus utilisés on doit faire le grand écart entre tous ça et prier pour un truc qui reste comme on le veut sur les différents navigateurs(le mieux c'est de tester, la prière pas vraiment utile).
0
Réponse 3 / 3
ShinSetsuNFé Messages postés 4 Statut Membre
 
Merci pour vos réponses.

Oui, mais le html 5 avec les anciens navigateurs ?

Ensuite, je me revois mal faire la refonte du site. Peut-être une fois que j'aurais rendu copie. :p

De toute façon, il faudra faire le second site pour les Ipad et compagnie....
0
nocomplain
 
ancien navigateur? tu parles de netscape? Les autres sont mis à jour quand même régulièrement, après si l'utilisateur ne le fait pas normal qu'il profite pas des dernières évolutions du web.
0

Discussions similaires

clip années 80 chanteuse cheveux rouges
liloulette -
Panth33ra -

7 réponses
JE RECHERCHE LE NOM D'UNE CHANTEUSE
Amelle -
PrincesseShofar -

8 réponses
Recherche d'un tube connu année 80-90
zebra99 -
Lolie35 -

7 réponses
Nom figurine aux cheveux fluos des années 90
Phoenix0511 -
Caro -

7 réponses
Prélèvement Apple.com Bill
Eva_007 -
kikine -

8 réponses