Problème compatibilité IE- CSS

Bonsoir,
Je n'ai pu effectuer de recherche sur le forum pour la simple raison qu'il est difficile de définir des mots clés précisant mes soucis.
L'affichage dans Inetrent explorer de mon site se fait à peu près correctement excepté pour trois éléments :
» L'espacement entre les différents items des menus est trop grand.
» Les puces des listes son collées au texte.
» le pied de page est collé au cadre d'au-dessus (le margin de 10px n'est pas pris en compte apparemment).
Voici l'adresse de mon site : http://jojaba.free.fr
Le même sujet lancé sur Geckozone mais sans réponse en ce qui concerne les trois problèmes listés ci-dessus :
http://www.geckozone.org/forum/viewtopic.php?t=27516

Merci d'avance pour votre aide
Je profite de ce message pour remercier Raphaël Goetter pour la mise à disposition de ses modèles qui m'ont permis d'élaborer mon site en partant de connaissances plus que sommaires.

Bonjour,

Dans ta feuille de style :

.menuboite a {
	margin: 0px;
	padding-top: 0px;
	padding-bottom: 2px;
	color: #616161;
	text-decoration: none;
	display: block;
}

C'est la propriété

display: block;

qui cause le soucis sous Internet explorer.

Donne la hauteur de la taille de ta police par exemple.

Ce qui te donnerai si ta police d'ecriture est de taille "1em" :

.menuboite li {
	margin: 2px;
	padding: 0px;
font-size: 1em;
}
.menuboite a {
	margin: 0px;
	padding-top: 0px;
	padding-bottom: 2px;
	color: #616161;
	text-decoration: none;
	display: block;
height: 1em;
}

Ca devrai resoudre ton problème

Edit : Pour les autres soucis que tu as désolé je n'ai pas la réponse, j'ai pensé a toi car je viens a l'instant de rencontré le même default d'affichage sous i.e et je me suis souvenu de ton post
Modifié par Mickael.D (25 Aug 2005 - 21:35)

<mickael d

ce n'est certainement pas le display: block; qui pose problème à ie.par contre les dimensions em sont une plaie avec ie5/6.

un exemple qui fonctionne avec les msie et gecko sans soucis.

background-image: url(images/pmenu.gif); 
background-repeat: no-repeat; 
background-position: left; 
display: block;
color: #8484FF; 
font-family: verdana, Helvetica, sans-serif; 
font-size: 9pt; 
text-indent: 18px;/*selon la largeur de puce les miennes font 20x15*/
margin-top: 3px;
margin-bottom: 3px;

la puce se place en background et non de façon conventionnelle.

une démonstration des dimension em avec ie6



c'est pratiquement illisible, désolé.mais c'est de plus courant.et encore là, çà và, çà reste correct...mais c'est parce que je n'est pas de pbs de vue.

Merci pour vos réponses. J'ai compris la parade pour les puces, mais je souhaiterais résoudre en priorité le problème d'espacement dans les menus gauche et entre le pied de page et la partie centrale.
Je ne suis pas un spécialiste, je vais donc peut-être poser des questions bêtes, je vous demande un peu d'indulgence donc
Comment je fais pour contourner ce problème d'em ?
J'aimerais pouvoir définir toutes les tailles de police à partir de la police du body.
Je définis des valeurs fixes ?

Merci,encore.
Modifié par jojaba (25 Aug 2005 - 22:43)

Bon, je viens de remplacer ma valeur em par des px mais cela n'a résolu aucun problème !
Par contre, je remarque que mes font-size définies en % se définissent par rapport à la taille définie dans le body. C'est ça ?

de gros pbs de marges.deux copies de ce que traduit topstyle de ta css.






de plus, çà, c'est invalide et ce retrouve plusieurs fois.

.forumline{ 
background-color: none; /*l'erreur*/
border: 2px #006699 groove; 
}

si tu ne veux pas de couleur supprime toutes ces définitions.

une autre erreur, (erreur parce que très peu supporté)

[code]
code {
font: system;/* erreur */
font-size: 105%;
color: #616161;
background-color: #ffffff;/* fff çà suffit, c'est une couleur nommée, ce n'est pas une erreur, mais çà enléve quelques octets au fichier,c'est déjà çà*/
}

gaffe!

20 erreurs sérieuses pour konqueror, 13 pour opera, 6 pour ie, 13 pour netscape, 15 pour safari...etc

il est possible que de très nombreux visiteurs ne puissent pas afficher les pages si tu ne revois pas ton code.

Effectivement, que d'erreurs !!!

    * Ligne: 268 Contexte : code

      Propriété érronée : font system n'est pas une valeur de font-size : system
    * Ligne: 313 Contexte : body

      La propriété scrollbar-face-color n'existe pas. : #dee3e7
    * Ligne: 314 Contexte : body

      La propriété scrollbar-highlight-color n'existe pas. : #ffffff
    * Ligne: 315 Contexte : body

      La propriété scrollbar-shadow-color n'existe pas. : #dee3e7
    * Ligne: 316 Contexte : body

      La propriété scrollbar-3dlight-color n'existe pas. : #d1d7dc
    * Ligne: 317 Contexte : body

      La propriété scrollbar-arrow-color n'existe pas. : #006699
    * Ligne: 318 Contexte : body

      La propriété scrollbar-track-color n'existe pas. : #efefef
    * Ligne: 319 Contexte : body

      La propriété scrollbar-darkshadow-color n'existe pas. : #98aab1
    * Ligne: 338 Contexte : .forumline

      Propriété érronée : background-color none n'est pas une valeur de color : none
    * Ligne: 344 Contexte : td.row1

      Propriété érronée : background-color none n'est pas une valeur de color : none
    * Ligne: 345 Contexte : td.row2

      Propriété érronée : background-color none n'est pas une valeur de color : none
    * Ligne: 346 Contexte : td.row3

      Propriété érronée : background-color none n'est pas une valeur de color : none
    * Ligne: 347 Contexte : td.row3Right

      Propriété érronée : background-color none n'est pas une valeur de color : none
    * Ligne: 541

      Parse error - Unrecognized : @import url("formIE.css");

(Résultats du Validateur CSS du W3C)

Je corrige et vous tiens au courant.

vire le clear: both; du pied de page.et attention aux marges et dimensions.c'est la première chose à apprendre avec css tellement c'est important.les marges et padding sont souvent source de conflits.et c'est le cas içi.

une autre astuce

padding-top: 0px;

padding-top: 0;

çà suffit, 0=0

c'est la même chose pour toutes les définitions qui utilise le 0 comme valeur.

n'est ce pas mieux avec les pixels? bien que ce n'est pas non plus une solution universelle.l'inconvenient des em c'est que tu dois maitriser les css pour les utilisées correctement.l'avantage c'est qu'elles sont adaptatives.

la convention c'est les em pour l'écran et les pt pour l'impréssion.perso, je n'utilise que les pt.

une autre erreur

font-weight: 900;

900 quoi?

et une autre

letter-spacing: -1px;

pas de negatif possible

ça y est, la feuille de style est valide !!!
Merci pour les remarques !

Mais cela n'a rien changé à mes trois soucis
En rajoutant des bordures aux items des listes du menu, l'espacement sur IE est supprimé. Étrange, non ?

Faites le test, modifiez la partie css suivante :

.menuboite li {
	margin: 2px;
	padding: 0px;
	border: solid red 1px; /*a rajouter donc*/
}

keran a écrit :
vire le clear: both; du pied de page.et attention aux marges et dimensions.c'est la première chose à apprendre avec css tellement c'est important.les marges et padding sont souvent source de conflits.et c'est le cas içi.

Si je vire le clear: both, je fais comment pour que le pied de page soit poussé par l'un des cadres dessus ?
Pour les marges et padding, j'ai effectivement fait du bidouillage jusqu'à ce que j'obtienne ce que je voulais sans vraiment comprendre comment j'y étais arrivé ! il va falloir que je revois tout ?

a écrit :
une autre astuce

padding-top: 0px;

padding-top: 0;

çà suffit, 0=0

c'est la même chose pour toutes les définitions qui utilise le 0 comme valeur.

Merci

a écrit :
une autre erreur

font-weight: 900;

900 quoi?

Ah bon ? pourtant : http://dicolive.media-box.net/docCSS/css.php?orderByType=1&id=82


Dur, dur les css !!!
Modifié par jojaba (26 Aug 2005 - 00:05)

keran a écrit :
pas de negatif possible

Si, Si : http://dicolive.media-box.net/docCSS/css.php?orderByType=1&id=72

Problème des listes résolu !

Code à corriger :

.liste1 {
	padding-left: 30px;
	margin-right: 20px;
	text-align: justify;
	list-style: url(images/jojaba1/puce.gif) inside;
}

remplacé par :

.liste1 {
	padding-left: 30px;
	padding-right: 20px;
	margin: 0;
	text-align: justify;
	list-style: url(images/jojaba1/puce.gif);
}

a écrit :
Ah bon ? pourtant

c'est des pourcentages

a écrit :
Si je vire le clear: both, je fais comment pour que le pied de page soit poussé par l'un des cadres

en retravaillant les dimensions des blocs et en utilisant des marges correctes et quelques paddings bien placés.le w3c ne valide que la syntaxe pas la mise en place.

pour les listes utilise plutôt ceçi, c'est plus simple à gerer pour un débutant et tout aussi éfficace.

<div class="liens esp">/* deux classes, c'est normal et valide */
<a href="#">un lien</a>
<a href="#">un lien</a>
<a href="#">un lien</a>
<a href="#">un lien</a>
</div>

la classe

.liens A:link, A:active, A:visited {
background-image: url(images/pmenu.gif); 
background-repeat: no-repeat; 
background-position: left; 
color: #8484FF; 
font-family: verdana, Helvetica, sans-serif; 
font-size: 9pt;
text-decoration: none; 
display: block; 
text-indent: 18px;
margin-top: 3px;
margin-bottom: 3px;
}
.liens A:hover {
color: #FFF;
}

.esp {padding: 2px 0;}

les marges et text-indent seront peut être à retoucher(pixel par pixel).
pour les propriétés des liens fait comme tu veux mais ne touche pas au background.

je crois que çà peux te convenir

jojaba a écrit :


Si, Si : http://dicolive.media-box.net/docCSS/css.php?orderByType=1&id=72

pas içi

Je viens de corriger une erreur de padding et margin :

.menuboite li {
	margin: 0px;
	padding: 2px;
}

Au lieu de

.menuboite li {
	margin: 2px;
	padding: 0px;
}

Et ça marche enfin pour mes listes de menu !!!! Youpui !!!!!
Modifié par jojaba (26 Aug 2005 - 01:01)

et voilà.quand çà coince,c'est souvent de ce côté qu'il faut chercher.

pour le pied, tu as essayer de virer le clear?

Non, j'avais l'intention de me coucher là mais je sens que je vais tenter la chose.
Si jamais je n'ai plus le courage, je te remercie d'ores et déjà pour ton aide précieuse !

Je pense que je me suis mal exprimé.

J'apporté une idée au "problème" d'espacement dans les listes.

Ensuite la taille en "em" été un exemple (le premier qui m'est venu étant donné que c'est ce que j'ulise pour la taille de mes textes).

L'espacement en trop sous i.e viens bien de

display:block;

Car si tu le supprime, cet espace "en trop" disparait sous i.e.

Enfin c'est ce que je constate, maintenant si ce n'est pas le cas je veux bien que tu m'explique ce qui provoque ce "defaut" d'affichage sous Internet explorer.

Je n'arrive pas à faire en sorte que le pied soit dissocié du cadre central sur IE. J'ai supprimé le clear:both et ai rajouté un margin-bottom au cadre principal. Sur FF c'st impecc, sur IE, toujours le même problème !
Je sature un peu, je vais vous laisser.

Merci en core pour votre aide

A bientôt.