Problèmes d'affichage sur IE

jojaba · Message par **jojaba** » 18 août 2005, 20:59

Bonsoir à tous,
Le plus gros du travail sur la nouvelle mouture de mon site est terminé.
Je vous propose d'aller voir ce que ça donne ici :
http://jojaba.free.fr/index.htm

J'ai essayé de faire dans la sobriété et sans java (hormis pour le forum, bien entendu).
Je remercie Jv2759 et Calimo pour leurs premiers commentaires.
Comme à l'habitude avec les css, mes pages ne s'affichent pas de la même manière dans ff et dans IE (pourtant j'ai opté pour un type de document stricte qui est réputé être plus "digestible" par les différents navigateurs).
Trois grands soucis que je n'arrive pas à régler avec IE :
» 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.

Si vous pouviez m'éclairer, ce serait un gain de temps pour moi. Et si vous trouvez d'autres erreurs ou si vous souhaitez faire des suggestion quant à ce site, n'hésitez pas !!!

Il ne me manque plus qu'un logo et ce n'est pas mon fort

Peut-être que quelqu'un d'entre vous serait près à me confectionner quelque chose ?

Merci d'avance pour vos réactions.

calimo · Message par **calimo** » 18 août 2005, 21:44

Si je puis me permettre tout d'abord quelques remarques :

Le menu n'était pas jaune la dernière fois que je l'ai vu... si ? Des gouts et des couleurs diras-tu
Le menu horizontal pour accéder directement au contenu est très bien (bien que dans un idéal d'accessibilité il serait encore mieux s'il figurait juste au-dessus du menu dans le code HTML). Par contre, pourquoi est-ce que les dégradés jaune ne s'appliquent que sur chaque élément individuellement et pas sur tout le menu ? Je trouve que ça "casse" un peu le menu (là encore, certainement très personnel), en mettant en contact direct le jaune foncé et le clais... tout le reste est si doux !
Un petit peu moins personnel, sur le dégradé bleu du contenu tu as fixé la bonne couleur d'arrière-plan, idem pour les menus en jaune, par contre le titre h1 (au passage, bien rectifiés les titres ) présente une cassure, visiblement tu n'as pas pris la couleur suffisemment au fond. ColorZilla me dit #D8CDE9, mais tu devrais peut-être vérifier... (idem en pied de page)
L'image pour remonter est toujours aussi animée, mais je pense que là aussi c'est des gouts et des couleurs
Sinon concernant le code lui-même, il est valide, magnifiquement indenté. Félicitations, d'autant que c'est le premier essai, on voit que tu t'y est donné
Je remarque juste qu'il y a pas mal de <div> inutiles, par exemple quand tu as
Code : Tout sélectionner
```
      <div id="titre">
        <h1>Traductions d'Open-source</h1>
      </div>
```
Tu peux simplement mettre
Code : Tout sélectionner
```
<h1>Traductions d'Open-source</h1>
```
et fusionner les déclarations dans la CSS :
Code : Tout sélectionner
```
h1 {
	border-bottom: groove #ffffff 2px;
	background-image: url(images/jojaba1/titre-pied.png);
	background-repeat: repeat-y;
	background-color: #C7BBDB;
	height: 80px;
	font-size: 100%;
	font-weight: bold;
	color: #ffffff
	margin: 0;
	padding-left: 120px;
	padding-top: 20px;
}
```
Si je ne n'oublie rien, ça ira tout aussi bien, et ton code sera encore plus joli
Tu as oublié de définir un background-color sur ".boite h2". Si l'image de fond des titres du menu de droite n'est pas affichée, on a un texte blanc sur blanc. C'est pour ça qu'il faudrait toujours définir un background-color en même temps que color (et pas simplement un background-image).
Ah oui, encore une chose, l'attribut name est déprécié sur les liens, au lieu de
Code : Tout sélectionner
```
        <a name="introduction"></a>
        <h2>Introduction</h2>
```
tu peux simplement mettre
Code : Tout sélectionner
```
        <h2 id="introduction">Introduction</h2>
```

Pour en revenir aux problèmes avec IE...
Une technique qui fonctionne souvent très bien pour régler les problèmes d'espacement, c'est le border:1px solid red; Avec ça, tu vois tout de suite où ça coince.

En l'occurence, si je mets border:1px solid red; sur .menuboite li... l'espacement disparaît
J'avoue ne pas comprendre (mais n'est-ce pas le propre d'un bug : être incompréhensible ?)
Sur les listes... je dois avouer que je sèche C'est intermédiaire dans Opera...
Bizarre, elle apparaît quand-même si tu mets une plus grande valeur... comme s'il avait un problème de calcul (ce qui ne serait pas étonnant)... là non plus je ne sais pas (mais au moins c'est normal dans Opera).

jojaba · Message par **jojaba** » 19 août 2005, 10:31

J'ai eu peur en voyant la longueur de ta réponse

, mais après lecture, je vois que ce n'est pas aussi mal que ça

!
Tout d'abord, merci d'avoir pris le temps de vérifier

.

Par contre, pourquoi est-ce que les dégradés jaune ne s'appliquent que sur chaque élément individuellement et pas sur tout le menu ? Je trouve que ça "casse" un peu le menu (là encore, certainement très personnel), en mettant en contact direct le jaune foncé et le clais... tout le reste est si doux !

En passant avec la souris sur les liens, j'avais défini une couleur blanche pour la police qu'on n'arrivait pas à lire sur le dégradé au départ, ensuite j'ai changé la couleur de police (noire à présent) et j'ai oublié d'enlever les background ! Je vais modifier ça. Merci !

visiblement tu n'as pas pris la couleur suffisemment au fond. ColorZilla me dit #D8CDE9, mais tu devrais peut-être vérifier... (idem en pied de page)

J'ai fait de la même manière que toi avec colorzilla et avait obtenu : #C7BBDB. Je vais prendre ta valeur, mon image de background est trop large pour ma définition d'écran ce qui explique que j'ai du taper avant la fin du dégradé. Merci.

L'image pour remonter est toujours aussi animée, mais je pense que là aussi c'est des gouts et des couleurs

Ce n'est pas une priorité pour l'instant. Merci pour ton avis tout de même !

Je remarque juste qu'il y a pas mal de <div> inutiles

J'ai pris note pour h1, pourrais-tu me donner d'autres div superflux ?

Tu as oublié de définir un background-color sur ".boite h2"

J'ai pris note.

l'attribut name est déprécié sur les liens

Génial, c'est bien plus simple ainsi !

1. En l'occurence, si je mets border:1px solid red; sur .menuboite li... l'espacement disparaît Confus
J'avoue ne pas comprendre (mais n'est-ce pas le propre d'un bug : être incompréhensible ?)
2. Sur les listes... je dois avouer que je sèche Confus C'est intermédiaire dans Opera...
3. Bizarre, elle apparaît quand-même si tu mets une plus grande valeur... comme s'il avait un problème de calcul (ce qui ne serait pas étonnant)... là non plus je ne sais pas (mais au moins c'est normal dans Opera).

Avis à d'autres spécialistes ! Si vous connaissez les solutions, je prends

jojaba · Message par **jojaba** » 19 août 2005, 10:43

Pour le problème d'espacement entre les items du menu gauche j'ai mis ça :

Code : Tout sélectionner

border:1px solid yellow;

Si on enlève yellow et on met à la place "none", l'espacement est rétabli

.
Si on pouvait remplacer la couleur par une transparence je suis persuadé que ça fonctionnerait.
Existe-t-il un code hex correspondant à "transparent" ?[/code]

calimo · Message par **calimo** » 19 août 2005, 10:46

jojaba a écrit :J'ai eu peur en voyant la longueur de ta réponse

Meuh non ! Mes réponses sont toujours beaucoup trop longues

jojaba a écrit :J'ai pris note pour h1, pourrais-tu me donner d'autres div superflux ?

Un peu tous...
En fait, dès que tu as un div directement imbriqué dans autre chose comme

Code : Tout sélectionner

<div id="...">
	<ul>
	...
	</ul>
</div>

tu peux simplifier en

Code : Tout sélectionner

<ul id="...">
...
</ul>

(sauf exceptions par exemple si tu as des bordures double, là il faut les deux, ou des trucs compliqués, par exemple 2 arrière-plans différents, mais c'est rare et je crois que ce n'est pas ton cas)

Par exemple <div id="haut"> et <ul id="menuhaut"> et... peut-être le div id="gauche" mais c'est moins évident vu qu'il a plusieurs sous-divs (donc en fait ce serait tout et comme d'hab j'ai exagéré

)

jojaba a écrit :
Tu as oublié de définir un background-color sur ".boite h2"
J'ai pris note.

Au passage, tu as la barre Web Developer ? Si tu ne l'as pas c'est le moment ou jamais

Désactive les images. C'est important de toujours essayer en désactivant les images, le javascript, les CSS etc. et voir si ça passe toujours.
En l'occurence, tu aurais pu constater que c'est pareil avec le bouton "Accueil" dans le menu horizontal

Darkforce · Message par **Darkforce** » 21 août 2005, 21:25

j'ai fait un ptit logo pour m'amuser ...

calimo · Message par **calimo** » 21 août 2005, 21:31

Regarde si ce n'est pas un des rapports d'erreurs recensés par QuirksMode : http://www.quirksmode.org/bugreports/ar ... index.html ...

jojaba · Message par **jojaba** » 22 août 2005, 08:38

Darkforce a écrit :j'ai fait un ptit logo pour m'amuser ...

Merci Darkforce, je ne pensais pas que quelqu'un allait répondre à ma demande. Cela explique pourquoi je n'ai pas donné d'informations plus précises sur ce que je souhaitais ! Tu l'auras compris, je ne voulais pas de bandeau mais un logo qui serait contenu dans mon titre (taille : 70x70 px), de préférence en dégradés gris (ce qui permettra de le garder pour les différents styles css que je compte développer) et contenant J, J, B (pour JoJaBa).
Comprends-moi bien, je ne veux pas que tu te lances dans cette réalisation, si tu ne le souhaite pas, mais puisque quelqu'un à répondu, j'en profite !

Merci encore, je vais placer ta réalisation, un certain temps sur mon site en guise de remerciement

Ce soir, je m'y mets.

jojaba · Message par **jojaba** » 22 août 2005, 08:46

calimo a écrit :Regarde si ce n'est pas un des rapports d'erreurs recensés par QuirksMode : http://www.quirksmode.org/bugreports/ar ... index.html ...

ce soir

Merci.

Darkforce · Message par **Darkforce** » 22 août 2005, 13:08

Bonjour,

Est-ce que tu peux détailler le texte qui doit figurer sur le logo si j'ai bien compris seulement J J B ?

jojaba · Message par **jojaba** » 22 août 2005, 20:01

Darkforce a écrit :Bonjour,

Est-ce que tu peux détailler le texte qui doit figurer sur le logo si j'ai bien compris seulement J J B ?

Les voyelles en petit par exemple : JoJaBa
Ah ben, j'ai l'impression que tu es motivé. c'est très gentil de ta part

.
Je te propose de continuer la discussion sur mon forum si tu veux :
http://jojaba.free.fr/forum/viewtopic.php?t=71

jojaba · Message par **jojaba** » 22 août 2005, 22:35

jojaba a écrit :
calimo a écrit :Regarde si ce n'est pas un des rapports d'erreurs recensés par QuirksMode : http://www.quirksmode.org/bugreports/ar ... index.html ...
ce soir
Merci.

rien trouvé, hélas !!!

jojaba · Message par **jojaba** » 22 août 2005, 23:13

Dis donc Calimo, le baratin dans ta signature ça correspond à quoi ?

Thomas · Message par **Thomas** » 23 août 2005, 00:04

http://www.geckozone.org/forum/viewtopic.php?t=27027

jojaba · Message par **jojaba** » 26 août 2005, 02:04

Merci pour l'info toto !
Voci les réponses données sur le forum d'Alsacréation.
Elles m'ont servi à régler 2 des problèmes d'affichage que j'avais

http://forum.alsacreations.com/topic.php?fid=4&tid=6461

Geckozone

Problèmes d'affichage sur IE

Problèmes d'affichage sur IE

Qui est en ligne ?