mise en page avec MSIE

docanski a écrit :

Bonjour la foule !

Encore un problème avec cette daube d'Internet Exploseur !
La page http://mycorance.free.fr/index.htm s'affiche farpaitement avec
la famille Mozilla er Opera.
Cette même page voit le texte du menu entièrement différent avec une
police pourtant bien connue par cette chiotte d'Internet Exploseur. J'ai
déjà dû descendre un peu (pas trop tout de même pour garder un certain
esthétisme à l'ensemble) le bandeau inférieur pour permettre de lire
tous les liens ... mais en vain : ce n'est pas encore assez !
Je ne voudrais pas le descendre davantage, d'autant que les liens du
menus ne sont de toute façon plus dans le cadre à cause de cette merde
d'Internet Exploseur. Je précise que c'est avec la version 6 de cette
daube que je fais les essais. Peut-être que les suivantes ont un
meilleur comportement ? La nombreuse assemblée qui se trouve derrière la
porte pourrait-elle confirmer/infirmer ... voire, miracle, proposer une
solution satisfaisante ?
Merci d'avance, en tout cas, de vous pencher sur cet antépénultième
problème subi avec une production (ch ... ?) en provenance des bureaux
de Microchiotte !

Cordialement,

J'ai la même police (arial) avec IE6 et Firefox.
Pour le texte tronqué, au lieu de mettre un margin-top de -7px sur la
liste, pourquoi ne positionnes tu pas ton div gaca à un top de 70px au
lieu de 77px ? Apparemment IE6 n'aime pas les marges négatives.
J'ai aussi essayé avec IE8, la page est identique à Firefox dans ta
version actuelle.
--
B. M.

Alors que les eleveurs et agriculteurs polluent toujours la Bretagne,
B.M. ecrit ce qui suit en ce 31/05/2009 14:07 :

J'ai la même police (arial) avec IE6 et Firefox.
Pour le texte tronqué, au lieu de mettre un margin-top de -7px sur la
liste, pourquoi ne positionnes tu pas ton div gaca à un top de 70px au
lieu de 77px ?

J'avais d'ailleurs essayé cette méthode avant de modifier la FdS mais le
résultat était le même, à peu de choses près.
Bon, j'ai un peu modifié cette dernière, c'est plus propre car ça évite
une classe surnuméraire dans la page HTML ... mais le problème n'est pas là.
En réalité, ce n'est pas la police qui est mal interprétée mais
l'interligne entre chaque lien qui est diférent chez MSIE et les autres.
Cette daube crée des interlignes plus larges que les autres navigateurs :-(
Il est possible de diminuer la largeur de ces interlignes avec les CSS
mais le problème est qu'une règle de ce genre affectera le résultat sur
*tous* les navigateurs. Et je ne connais pas la parade pour MSIE : il
doit y avoir un "hack", peut-être une "mise en commentaires" pour y
parvenir, mais je ne connais pas.

J'ai aussi essayé avec IE8, la page est identique à Firefox dans ta
version actuelle.

Ça limite déjà les dégâts. Mébon, avant que tous les addictés à la
microsoftite de la terre mettent leur pseudo-navigateur à jour, il
faudra un bout de temps. :-( )

Cordialement,
--
docanski

Portail et annuaire du nord-Bretagne : http://armorance.free.fr/
Guide des champignons d'Europe : http://mycorance.free.fr/
La vallée de la Rance maritime : http://valderance.free.fr/
Les côtes du nord de la Bretagne : http://docarmor.free.fr/

docanski <docanski_morauspam@euphonynet.be.invalid> écrivait :

Et je ne connais pas la parade pour MSIE : il
doit y avoir un "hack", peut-être une "mise en commentaires" pour y
parvenir, mais je ne connais pas.

Voilà comment j'ai « corrigé » quelques problèmes de mise en page pour
IE et IE7 dans mes fichiers CSS :

#menu_gen_logo {caractèristiques communes}
/* Pour IE (Avec + pour IE7) */
* html #menu_gen_logo {padding:6px 4px;}
*+html #menu_gen_logo {padding:5px 3px;}
/* Fin IE */

Si ça peut t'être utile...

docanski a écrit :

Alors que les eleveurs et agriculteurs polluent toujours la Bretagne,
B.M. ecrit ce qui suit en ce 31/05/2009 14:07 :

J'ai la même police (arial) avec IE6 et Firefox.
Pour le texte tronqué, au lieu de mettre un margin-top de -7px sur la
liste, pourquoi ne positionnes tu pas ton div gaca à un top de 70px au
lieu de 77px ?

J'avais d'ailleurs essayé cette méthode avant de modifier la FdS mais le
résultat était le même, à peu de choses près.
Bon, j'ai un peu modifié cette dernière, c'est plus propre car ça évite
une classe surnuméraire dans la page HTML ... mais le problème n'est pas
là.
En réalité, ce n'est pas la police qui est mal interprétée mais
l'interligne entre chaque lien qui est diférent chez MSIE et les autres.
Cette daube crée des interlignes plus larges que les autres navigateurs :-(
Il est possible de diminuer la largeur de ces interlignes avec les CSS
mais le problème est qu'une règle de ce genre affectera le résultat sur
*tous* les navigateurs. Et je ne connais pas la parade pour MSIE : il
doit y avoir un "hack", peut-être une "mise en commentaires" pour y
parvenir, mais je ne connais pas.

J'ai aussi essayé avec IE8, la page est identique à Firefox dans ta
version actuelle.

Ça limite déjà les dégâts. Mébon, avant que tous les addictés à la
microsoftite de la terre mettent leur pseudo-navigateur à jour, il
faudra un bout de temps. :-( )

Cordialement,

Il me semble qu'en mettant aux balises li height: xpx; line-height: xpx
(x étant le même) on obtient le même interligne sur tous les navigateurs.
--
B. M.

Alors que les eleveurs et agriculteurs polluent toujours la Bretagne,
Dominique Ottello ecrit ce qui suit en ce 31/05/2009 16:35 :

Voilà comment j'ai « corrigé » quelques problèmes de mise en page pour
IE et IE7 dans mes fichiers CSS :
/* Pour IE (Avec + pour IE7) */
* html #gaca {padding:6px 4px;}
*+html #gaca {padding:5px 3px;}
/* Fin IE */

J'ai essayé (avec la correction des noms de classes comme ci-dessus,
évidemment) mais le résultat est pire : l'interligne augmente d'un
chouïa. J'ai ensuite réglé à zéro : je reviens au point de départ. J'ai
tenté alors des valeurs négatives mais MSIE ne les comprend pas :-( .
Il est con, ce navigateur.
J'ai évidemment essayé avec la règle "line-spacing" mais sans résultat
aussi.

Si ça peut t'être utile...

Bien essayé ... mais essai raté ;-)
Merci quand même !

Cordialement,
--
docanski

Portail et annuaire du nord-Bretagne : http://armorance.free.fr/
Guide des champignons d'Europe : http://mycorance.free.fr/
La vallée de la Rance maritime : http://valderance.free.fr/
Les côtes du nord de la Bretagne : http://docarmor.free.fr/

Le 5/31/09 6:28 PM, docanski a écrit :

Bien essayé ... mais essai raté ;-)

Bon ... je m'en mêle (une fois n'est pas coutume ;-) )



Alors ... pour un menu ... qui normalement satisfait aussi IE6 :

Pas besoin du div 'gaca'
il suffit de :
#gauche ul { bla bla }

Donc on :
- règle les ul et li en :
{ margin:0; padding:0; list-style:none }
et profiter de ceux-là pour les police et alignement :
{ font-family:arial;font-size:13px;text-align:center; }
- confie au A inbriqué dans le li les réglages des marges et autres :
{ display:block; margin: 5px 10px;border:1px outset #000;}
- pour que ça fonctionne avec IE il faut que les A aient le lay-out :
{ _height: 14px; } par exemple.
<http://msdn.microsoft.com/en-us/library/ms533776(VS.85).aspx>
ce qui nous arrange car
c'est ce qui manque au menu pour qu'il s'affiche correctement dans IE6

Voir :
<http://cjoint.com/?gboUnrizYt>
<http://cjoint.com/data/gboUnrizYt_dokansky_asm.html>
non testé avec IE7 ou 8
mais OK pour moi avec IE6 et sur Mac : Fx3 et Safari3


Si IE fait encore des siennes pour l'empilement des li+a
il doit suffire de lui re-préciser la marge kivabien :
#gauche a { _margin: 3px 8px; }


Pendant que j'y suis ...
le div "droit" n'a pas être en flottant
il suffit qu'il soit margé à gauche pour laisser la place au div "gauche"

et pareil pou le div "pub" : pas besoin de float
Y a rien que du inline dans ce div,
{ text-align:right ; }
doit suffire.


Nota:
avec cette FdS si on fait zoomer ça cafouille (comme de normal)

--
sm

Le 6/1/09 2:54 PM, SAM a écrit :

Voir :
<http://cjoint.com/?gboUnrizYt>

Bon, finalement ... pour ces IEs ...
il ne reste que les commentaires conditionnels :-(
<http://msdn.microsoft.com/en-us/library/ms537512(VS.85).aspx>

Remis un autre fichier plus documenté :
<http://cjoint.com/?gcbaZtisfM>
<http://cjoint.com/data/gcbaZtisfM_dokansky_asm.html>


--
sm

Alors que les eleveurs et agriculteurs polluent toujours la Bretagne,
SAM ecrit ce qui suit en ce 02/06/2009 01:06 :

Remis un autre fichier plus documenté :
<http://cjoint.com/?gcbaZtisfM>
<http://cjoint.com/data/gcbaZtisfM_dokansky_asm.html>

Salut Steph !

Désolé pour le retard du retour, pas eu le temps d'éplucher tes
propositions et de faire des essais.
C'est fait maintenant ... et ça ne va pôôôôô ...:-(
Le résultat est un agrandissement de la hauteur des cadres gauche et
droit sous IE6 avec pour corollaire, dans le premier comme dans le
deuxième, une image de fond devenue trop courte. En admettant que je
refasse ces images pour remplir les cadres, il restera un vide assez
important (pas bô) sous les liens avec Firefox et Opera alors que IE6
remplirait la totalité du cadre gauche. En somme, j'aboutirais au même
résultat avec ma FdS si j'augmentais la hauteur de ces images de fond en
les retravaillant. Et de plus, je tiens à ma FdS (voir plus bas).
Les 2 règles suivantes, que tu proposes sont celles censées régler le
problème :
- height: 14px; /* pour IE */ ne réagit en fait qu'avec Firefox et pas
du tout avec IE ...
- /*_margin: 4px 12px; pour IE */ ne réagit ni avec l'un ni avec l'autre
quand on veut les modifier
Elles sont donc inopérantes, au moins avec MSIE 6.0.2900 sous Windo$e.
C'est finalement peut-être ce à quoi je me résoudrai, finalement :
agrandir ces images :-( ... mais c'est ce que j'espérais pouvoir éviter.
D'autant que je ne peux utiliser tes changements en profondeur car cette
FdS sert également à d'autres fichiers dont la mise en page est
différente mais s'appuye sur des règles communes.
Tu fais une remarque à propos de mon utilisation des "alt" : cette
"technique" trouve tout son intérêt pour le référencement. Les lignes
qui précèdent ton "Là aussi il y aurait à parfaire ... Mébon ... on ne
peut chipoter sur tout ;-)" ressortent de la même "technique" destinée à
forcer un peu le référencement. Fais un "guide des champignons" dans le
ch'tite fenêtre de Gogol et tu comprendras. Pour ce qui est de la balise
<p> située avant le script du compteur Xiti, il est d'origine Xiti. Je
leur ai demandé à l'époque s'il ne s'agissait pas d'une erreur et il m'a
été répondu qu'il fallait reproduire leur code en respectant leur casse.
J'ai donc laissé en l'état.

Merci, en tout cas, d'avoir sué autant pour tenter de m'aider !

Cordialement,
--
docanski

Portail et annuaire du nord-Bretagne : http://armorance.free.fr/
Guide des champignons d'Europe : http://mycorance.free.fr/
La vallée de la Rance maritime : http://valderance.free.fr/
Les côtes du nord de la Bretagne : http://docarmor.free.fr/

Le 6/5/09 7:30 PM, docanski a écrit :

Alors que les eleveurs et agriculteurs polluent toujours la Bretagne,
SAM ecrit ce qui suit en ce 02/06/2009 01:06 :

Remis un autre fichier plus documenté :
<http://cjoint.com/?gcbaZtisfM>
<http://cjoint.com/data/gcbaZtisfM_dokansky_asm.html>

Salut Steph !

Hello,

Désolé pour le retard du retour, pas eu le temps d'éplucher tes
propositions et de faire des essais.

Mais que fais-tu de ton temps ? ;-)

C'est fait maintenant ... et ça ne va pôôôôô ...:-(

Ma foi ...
Dans mon IE6 (puis dans mon IE7 avec trucs conditionnels) c'était
parfait, (hormis le rendu graphique plus pauvre qu'avec mes brouteurs
pour Mac).
Pas de problème de cadres s'agrandissant ni d'image de fond non adaptée.
à preuve :
IE6 : <http://cjoint.com/?gfxqQ7AXzx>
IE7 : <http://cjoint.com/?gfxrUMRIZQ>

Le résultat est un agrandissement de la hauteur des cadres gauche et
droit sous IE6 avec pour corollaire, dans le premier comme dans le
deuxième, une image de fond devenue trop courte. En admettant que je
refasse ces images pour remplir les cadres, il restera un vide assez
important (pas bô) sous les liens avec Firefox et Opera alors que IE6
remplirait la totalité du cadre gauche.

J'obtiens, côté remplissage, à peu près la même chose avec tous mes
navigateurs (Fx, Safari, Opera et ces IE 6 et 7)
Fx.3 Mac : <http://cjoint.com/?gfxsS1TyCs>

En somme, j'aboutirais au même
résultat avec ma FdS si j'augmentais la hauteur de ces images de fond en
les retravaillant. Et de plus, je tiens à ma FdS (voir plus bas).

Ben non, y a pas à revoir les images de fond si ça rentre.
(et chez moi ça rentre) (purs chance ou hasard ?)

Il doit il y avoir un problème de taille de police préférentielle si les
affichages diffèrent.
(j'avais d'ailleurs prévenu : FdS non adaptée au zoom (de lettres))

Les 2 règles suivantes, que tu proposes sont celles censées régler le
problème :
- height: 14px; /* pour IE */ ne réagit en fait qu'avec Firefox et pas
du tout avec IE ...

?? height: 14px;
C'est surtout pour filer le lay-out aux blocks A (IE only)
et qu'ils soient réactifs sur toute leur surface (comme avec les autres
navigateurs) et non pas seulement que sur leurs textes (ce qui m'énerve
au plus haut point ! des boutons réactifs que partiellement).
De plus, chez moi ça a eu l'air de fixer ces blocks en hauteur et de
commencer à résoudre une partie du pb (en tous cas avec mon IE6 qui n'en
demandait pas plus pour caser les items de menu sans dépassement)

- /*_margin: 4px 12px; pour IE */ ne réagit ni avec l'un ni avec l'autre
quand on veut les modifier

ça semble donc n'être du hack que pour IE<6 ?
Bien qu'il m'ait semblé que mon IE6 XP sp2 y soit encore sensible.

Heu ... si ma mémoire est bonne cette ligne est annulée.
J'aurais dû la gommer.
Pour que ça fonctionne (IE<7) il faut :
_margin: 4px 12px; /* pour IE */
(le "pour IE" n'étant là que pour mettre en relief)

Ça se passe maintenant dans les commentaires conditionnels (c'est là
qu'il faut faire les modifs) à cause des IE nouveaux qui pensent encore
autrement que leurs ancêtres.
Et y là rien de prévu pour IE.8 que je n'ai pas.

Elles sont donc inopérantes, au moins avec MSIE 6.0.2900 sous Windo$e.

Il y a des IE pour autre chose que Windows ?
Au fait ... quel Windows ?
Le mien est un XP Pro SP2 (peut-être un peu vérolé par les MaJ
sournoises de crosoft ? bien que je tente de les éviter)

C'est finalement peut-être ce à quoi je me résoudrai, finalement :
agrandir ces images :-( ... mais c'est ce que j'espérais pouvoir éviter.
D'autant que je ne peux utiliser tes changements en profondeur car cette
FdS sert également à d'autres fichiers dont la mise en page est
différente mais s'appuye sur des règles communes.

Là c'est sûr que je ne n'ai pas investigué pour reconstruire tout le
site ;-)
Néanmoins je continue à dire que c'est le A passé en block qui doit
fixer taille et marges des menus et non pas les différents
parents-conteneurs.
C'est plus propre et plus immédiatement modifiable, sans effet de bord
mal-venu.

Pour ces items de menu et pour un rendu égal dans tous navigateurs je ne
vois que des images-bouton (sinon on va touj se bagarrer avec la taille
des caractères qui feront tout changer, d'un navigateur à l'autre et
d'un utilisateur à l'autre, et d'un IE6 à un autre IE6 si j'ai bien
compris). Ce serait mieux que de refaire les images de fond (qui de ttes
façons ne satisferont qu'un tel et à un moment).

Tu fais une remarque à propos de mon utilisation des "alt" : cette
"technique" trouve tout son intérêt pour le référencement.

au détriment de ce pour quoi cet attribut est normalement prévu ?
C'est sckanhdallleux !

Les lignes
qui précèdent ton "Là aussi il y aurait à parfaire ... Mébon ... on ne
peut chipoter sur tout ;-)" ressortent de la même "technique" destinée à
forcer un peu le référencement.

Là je parlais du mode de positionnement et peut-être choix des lettrages.

Fais un "guide des champignons" dans le
ch'tite fenêtre de Gogol et tu comprendras.

Gogol doit certainement savoir ce qu'est un attribut "title"

Pour ce qui est de la balise
<p> située avant le script du compteur Xiti, il est d'origine Xiti. Je
leur ai demandé à l'époque s'il ne s'agissait pas d'une erreur et il m'a
été répondu qu'il fallait reproduire leur code en respectant leur casse.

Entre respecter la casse-alacon xiti et casser du xhtml faut choisir ?
Me semble que tant que le xiti a bien son JS et non-JS associés et qu'il
s'affiche correctement ça doit leur convenir.

J'ai donc laissé en l'état.

Merci, en tout cas, d'avoir sué autant pour tenter de m'aider !

Ce qui m'a le plus fait suer c'est de lancer des Windows ;-)
et avec des IE différents. :-(
(faut que je pense à installer un Win.7, il parait que c'est bien)

Toutes ces versions de IE (et même pour un même N° ?) qui réagissent
très différemment les unes des autres c'est vraiment très pénible.

Maintenant je peux aussi te montrer comment ça peut être dégueu sans
rien changer avec Fx ou Safari : <http://cjoint.com/?gfxtOztEJt>

Tant qu'on a une mise en forme dépendante de "tailles" de polices, il
est très facile que ça se casse la gueule.
Bon, d'accord, la plupart des sites s'en moquent complètement, ne
serait-ce que celui de mon FAI :-(

--
sm

Alors que les eleveurs et agriculteurs polluent toujours la Bretagne,
SAM ecrit ce qui suit en ce 05/06/2009 23:43 :

Désolé pour le retard du retour, pas eu le temps d'éplucher tes
propositions et de faire des essais.

Mais que fais-tu de ton temps ? ;-)

Il a fait beau ces derniers jours, alors c'était rando pour un de mes
autres sites : chemin de randonnée du Cap Fréhel aux portes d'Hillion,
de quoi refaire une série de clichés pour mettre à jour avec de
nouvelles images.

- ne réagit ni avec l'un ni avec
l'autre quand on veut les modifier

ça semble donc n'être du hack que pour IE<6 ?
Bien qu'il m'ait semblé que mon IE6 XP sp2 y soit encore sensible.
Pour que ça fonctionne (IE<7) il faut :
_margin: 4px 12px; /* pour IE */
(le "pour IE" n'étant là que pour mettre en relief)

Ah mais oui mais non, hein ! tu m'as enduit en erreur et avec une sacrée
couche : c'est ta mise en commentaire (telle que tu me l'as proposée en
cjoint) qui est fautive : tu y proposais
/*_margin: 4px 12px; pour IE */
au lieu de
_margin: 4px 12px; /* pour IE */ !
Ça change tout ! Et comme précisé dans ma réponse à BM, je n'ai jamais
joué au hack avec MSIE et cette mise en commentaire complète du code ne
m'a donc pas particulièrement interpellée. J'ai donc essayé ton code tel
quel.
Mébon, l'ensemble de la correction de la FdS ne me satisfaisait pas (tu
as fait un sacré boulot pour rien, désolé ...), notamment parce que je
ne veux pas tout chambouler mais en garder l'ossature telle quelle. Dans
ce cas, il a fallu que je compose avec ton hack et la solution est
finalement de l'installer dans les deux classes de liens comme suit :
_margin: -5px 6px et en "hackant" au passage la largeur de l'une d'entre
elles. En effet, éternelle mésentente à ce sujet entre MSIE et les
autres, Firefox et Opera affichent une différence de 3 px lorsqu'on met
un padding de 5 px pour écarter le texte du bord. Logique (enfin ...
selon kitussé) : 3px de largeur + 2 x 1px de bordure = 5px.
Donc, à ce stade, c'est bon pour MSIE 6, Opera et Firefox ... mais je ne
sais pas pour MSIE 7 et 8. Et je ne peux pas installer ces choses sur
mes bécanes : elles ont besoin d'une horreur nommée Vi$ta.

Il y a des IE pour autre chose que Windows ?

Pour Mac, non !?

Au fait ... quel Windows ?

2000 Pro SP4 et XP Pro SP3

Le mien est un XP Pro SP2 (peut-être un peu vérolé par les MaJ
sournoises de crosoft ? bien que je tente de les éviter)

Je blinde les entrées pour qu'il ne puisse pas faire de MaJ sauvage et
n'en fais que si c'est indispensable.

Néanmoins je continue à dire que c'est le A passé en block qui doit
fixer taille et marges des menus et non pas les différents
parents-conteneurs.

Ben oui ... à condition que ces classes ne soient pas utilisées pour
d'autres pages.
Mébon, c'est pas grave, le problème semble résolu, du moins avec les
navigateurs dont je dispose.

Tu fais une remarque à propos de mon utilisation des "alt" : cette
"technique" trouve tout son intérêt pour le référencement.

au détriment de ce pour quoi cet attribut est normalement prévu ?
C'est sckanhdallleux !

Ben oui et j'en suis tout confus.
Heu ... enfin ... pas tellement puisque le but recherché est atteint
grâce à cela ;-)

Là je parlais du mode de positionnement et peut-être choix des lettrages.

Le lettrage en balises de titres importants a le même but. Pour le mode
de positionnement, c'est pas si dégueu que ça, il me semble : c'est du
positionnement absolu pour assurer une mise en page figée.

Gogol doit certainement savoir ce qu'est un attribut "title"

Ben justement ! Et il a autant d'importance que la balise hx pour le but
recherché.

Entre respecter la casse-alacon xiti et casser du xhtml faut choisir ?

Telle quelle, la page entière passe au validateur XHTML sans réchigner.

Ce qui m'a le plus fait suer c'est de lancer des Windows ;-)
et avec des IE différents. :-(

Tu les a gardé, au moins !? Pour continuer tes
interventions/contrôles/corrections ! :-)

(faut que je pense à installer un Win.7, il parait que c'est bien)

Et Linux, alors, avec ses navigateurs exotiques ! C'est de la m.... ? ;-)

Toutes ces versions de IE (et même pour un même N° ?) qui réagissent
très différemment les unes des autres c'est vraiment très pénible.

C'est bien plus. Mais comme nous sommes des gens polis, nous retenons
les injures entre les dents pour qu'elles ne fusent pas !

Tant qu'on a une mise en forme dépendante de "tailles" de polices, il
est très facile que ça se casse la gueule.

Si tout le monde utilisait un navigateur civilisé, ça ne poserait pas de
problèmes : le zoom des pages agit aussi bien sur le texte que sur les
images. La mise en page reste donc telle qu'on l'a voulue.
Bon, je vais publier les corrections et demander à de bonnes âmes
équipées de MSIE 7 et 8 de jeter un coup d'oeil.

Cordialement,
--
docanski

Portail et annuaire du nord-Bretagne : http://armorance.free.fr/
Guide des champignons d'Europe : http://mycorance.free.fr/
La vallée de la Rance maritime : http://valderance.free.fr/
Les côtes du nord de la Bretagne : http://docarmor.free.fr/