Site avec Internet Explorer

guenievr Messages postés 52 Statut Membre -  
guenievr Messages postés 52 Statut Membre -
Bonjour,
Je vous lance à nouveau un SOS. Depuis plusieurs semaines je me bats pour faire fonctionner un site sous Internet Explorer.
J'ai beaucoup de mal avec les textes. J'ai crû trouver la solution en remplaçant certains textes par des images.
Fonctionnement correct sous IE; Résultat page trop lourde, temps de chargement excessif.
J'ai remis des textes sous forme de liste (puces) ; l'image des puces, le padding, le text-decoration:none, la couleur de police ne sont pas respectés.
J'ai consulté beaucoup d'articles concernant ces problèmes, aucun ne semble répondre à mon attente.
Peu-être existe-t-il des spécialistes de ce genre de situations ?
Merci pour toute réponse
A voir également:

4 réponses

Réponse 1 / 4
Mimiste Messages postés 1159 Statut Membre 206
 
Normalement ton HTML doit respecter les normes W3C pour etre visible de la même maniere sur tous les navigateurs (en theorie)

Le mieu pour jeter un oeil la dessus serai que tu colle ici un bout de ton html qui pose probleme
1
Réponse 2 / 4
guenievr Messages postés 52 Statut Membre 1
 
Merci pour ta réponse
Voici la partie qui pose problème
<div id="left">
<br>
<li style="list-style-image:url(images/puce1.gif); margin-left: 18px"><a href="../actualites/a.html"><span5>xxxxx</span5></a></li>
<li style="list-style-image:url(images/puce1.gif); margin-left: 18px"><a href="../actualites/b.html"><span5>xxxx</span5></a></li>
<li style="list-style-image:url(images/puce1.gif); margin-left: 18px"><a href="../actualites/c.html"><span5>xxxxxx</span5></a></li>
<li style="list-style-image:url(images/puce1.gif); margin-left: 18px"><a href="../actualites/d.html"><span5>xxxxx</span5></a></li>
<li style="list-style-image:url(images/puce1.gif); margin-left: 18px"><a href="../actualites/e.html"><span5>xxxxx</span5></li>
<li style="list-style-image:url(images/puce1.gif); margin-left: 18px"><a href="../actualites/f.html"><span5>xxxxx</span5></li>
<li style="list-style-image:url(images/puce1.gif); margin-left: 18px"><a href="../actualites/g.html"><span5>xxxxx</span5></a></li>
<hr>
<li style="list-style-image:url(images/puce1.gif); margin-left: 18px"><a href="../actualites/h.html"><span5>xxxxx</span5></a></li>
<li style="list-style-image:url(images/puce1.gif); margin-left: 18px"><a href="../actualites/i.html"><span5>xxxxx</span5></a></li>
<li style="list-style-image:url(images/puce1.gif); margin-left: 18px"><a href="../actualites/j.html"><span5>xxxxx</span5></a></li>
<li style="list-style-image:url(images/puce1.gif); margin-left: 18px"><a href="../espace-membre/index1.php"><span5>xxxxx</span5></a></li>
<li style="list-style-image:url(images/puce1.gif); margin-left: 18px"><a href="../espace-membre/index2.php"><span5>xxxxx</span5></a></li>
<li style="list-style-image:url(images/puce1.gif); margin-left: 18px"><a href="../actualites/k.html"><span5>Pxxxxx</span5></a></li>
<hr>
<li style="list-style-image:url(images/puce1.gif); margin-left: 18px"><a href="../actualites/l.html"><span5>xxxxx</span5></a></li>
<li style="list-style-image:url(images/puce1.gif); margin-left: 18px"><a href="../actualites/h.html"><span5>xxxxx</span5></a></li>
<hr></div>


#left {
width : 158px;
float : left;
height : 100%;
background-color : #ECE9D7;
border-left : 1px solid #000;
border-right : 1px solid #000;
}
#left ul {
margin : 20px 0 0 0;
padding : 0;
list-style-type : none;
}
#left ul li {
margin : 0 0 0 7px;
padding : 0;
}
#left li#puce5 a {
background-image : url(images/puce1.gif);
}
C'est un site avec 3 colonnes, la liste de puce se trouve sur la partie gauche. Comme tu remarques il n'y a que les codes "left" et left li qui sont opérationnels, left ul ne rentrant pas en cause puisqu'il n'y a pas de ul. Quand je mets ul, les puces n'apparaissant plus, ni sur Mozilla, ni sur IE. Je ne suis pas une spécialiste et je dois y aller à l'essais.
Si tu as besoin de quelque chose d'autre, fais le moi savoir.
Merci d'avance
0
Réponse 3 / 4
macgawel Messages postés 676 Statut Membre 89
 
Bonjour.

1. la balise <li> doit être dans une balise <ul> :
<ul>
<li>Liste 1</li>
<li>liste 2</li>
...
</ul>
du coup, ta balise <DIV> n'est peut-être plus nécessaire.

2. Tout ce que tu mets en style dans tes <li>, tu l'as aussi dans ton CSS. Ca peut générer un conflit, et surtout c'est moins lisible (et moins facile à maintenir...)
0
Réponse 4 / 4
guenievr Messages postés 52 Statut Membre 1
 
Salut,
Ta réponse est parfaitement logique. J'ai remis <ul> avant <li> et </ul> après le dernier </li>, comme je fais d'habitude.
Cela marche sur Mozilla comme d'habitude, mais sous IE cette fois les puces disparaissent.
Le div je ne peux pas l'enlever car il représente le format de la colonne gauche.
Il y a peut-être quelque chose à faire au niveau du <htlm> ou du <body> car dans l'ensemble de la page, IE ne respecte pas la taille de la police que je lui mets. Quand je mets du 16px, il me représente du 12px, quand je mets du 24px, il me le représente par du 20px et je ne peux pas trop grossir à cause de Mozilla ; quand je donne une couleur à une police, IE n'en tient pas compte. C'est l'interprêtation totale des textes par IE qui me posent problème.
Voici les codes concernant le <html> et le <body>

html {
margin : 0;
padding : 0;
font-size : 100%;
font-family : Arial,Helvetica,sans-serif,Verdana;
}
body {
width : 852px;
margin-top : 30px auto;
margin-left: auto;
margin-right: auto;
background-color : #507EA1;
font-size: 1.0em;
}
Merci pour toute réponse
0

Discussions similaires

App explorer Sa sert a quoi ?
Mada_alpha -
SATS_fr -

1 réponse