Forum-webmaster
Technique - programmation => HTML / CSS / XHTML => Message commencé par: FireLink le le 28-03-2005 a 00:39:43

Titre: IE, c'est mal!
Posté par: FireLink le le 28-03-2005 a 00:39:43

Salut @ll, je suis pas la pour polémiquer mais pour vous demander de l'aide. Voilà, j'ai fait un nouveau design pour mon futur site et je le mets en forme via positionnement CSS. Sous le gentil firefox, tout passe super bien mais sous le gros vilain IE tout moche, le design ne se met pas bien en place.

URL: http://cosmos.freeddns.com/firelink/K15/index2.html

Vous sauriez me dire ce qui va pas?

Titre: Re:IE, c'est mal!
Posté par: lupucide le le 28-03-2005 a 00:49:52

Je n'ai pas regarder ta feuille de style mais je lance des idées.

Le centrage : ton body ne contient pas "text-align: center".

L'empilage de conteneur : les navigateurs ne prennent pas le padding de la même façon, certains le rajoute à "width" et d'autre le compte dedans.

J'espère t'avoir aidé :)

Titre: Re:IE, c'est mal!
Posté par: FireLink le le 28-03-2005 a 01:02:37

Salut lupucide,

Mon body, contenir text-align: center; , mais pourquoi?

Normalement, il n'y a pas de padding, mais je vais revérifier.

Sinon, voila déja une version modifiée qui est un peu améliorée.

Si vous avez d'autres idées, vous gênez pas.

Titre: Re:IE, c'est mal!
Posté par: lupucide le le 28-03-2005 a 04:00:02

Même si les conteneurs ont "margin-left: auto" et "margin-right auto", si le body ne contient pas "text-align: center" il n'affichera pas centré.
M'enfin, je dis ça mais je ne suis même pas sûr que tu cherche à centrer :)

Titre: Re:IE, c'est mal!
Posté par: FireLink le le 28-03-2005 a 14:44:12

Non, justement. Il est centré. Sous Mozilla tout se place comme prévu.

Ce qui cause problème c'est que sous IE, le menu de droite se place plus haut que la case de contenu alors qu'il devrait aller à droite, à coté.

Titre: Re:IE, c'est mal!
Posté par: NuDD le le 28-03-2005 a 21:33:21

Généralement pour résoudre ce genrs de pbleme chiant :P on fait deux feuilles de styles separées avec un pti code en JavaScript pour la redirection vers celle adaptée à IE et celle adaptée à Mozilla (ou autres...).
Bonne chance, le design est un peut rouge pour moi mais bon... il est tres légé. Plus qui les miens...
@+

Titre: Re:IE, c'est mal!
Posté par: FireLink le le 29-03-2005 a 01:30:29

D'habitude sur mes autres designs, je réussis assez bien sans javascript... Pourtant, là je bloque... Il y a surement un moyen, suffit juste de trouver lequel...

Titre: Re:IE, c'est mal!
Posté par: FireLink le le 30-03-2005 a 23:46:31

Je n'ai toujours pas trouvé alors je relance ma demande d'aide...

Titre: Re:IE, c'est mal!
Posté par: jb_gfx le le 31-03-2005 a 01:28:06

En ajoutant une couleur de fond à ton block on se rend compte qu'il n'a pas la bonne taille; il est trop large ce qui le fait passer sous ton bloc de droite.

J'ai un peu trifouillé mais vraiment voir d'où ça pouvait venir, désolé.

Au pire si tu ne trouve pas :


Code:

<!--[if IE]>
<style type="text/css">
div.centreg {
position:relative;
top: -45px; /* j'ai mis 45 au pif, faudra trouver la bonne valeur */
}
</style>
<![endif]-->


A ajouter APRES tes styles CSS actuels... c'est pas super élégant mais beaucoup plus que de servir une feuille de style pour IE via du javascript.

Titre: Re:IE, c'est mal!
Posté par: FireLink le le 31-03-2005 a 13:58:16

Rah, c'était donc ca :)

Merci de la piste, je vais corriger ca :)

EDIT: Voila, j'ai péché, mon code css est plus aussi beau ::) Enfin, c'est pas grave vu que ca marche maintenant. Si, quelqu'un trouve une belle soluce pour mon code CSS sans ce hideux code, ne vous gênez pas :)

Sinon, merci infiniment ;)

KarboN

RE-EDIT: C'était trop beau pour être vrai... a mesure que le menu s'allonge sur le hauteur, le truc descend :S

Grands maitres du CSS, cette question est pour vous ::)

Titre: Re:IE, c'est mal!
Posté par: jb_gfx le le 31-03-2005 a 17:05:48

Et si dans le code que je t'ai donné tu remplace relative par absolute et "top:-45px" par "top:40px" (la hauteur de ton header, je sais pas si ça fait vraiment 40) tout ça sans spécifier de valeur pour le paramètre left.

ça donne quoi? (désolé ta page est plus en ligne je peux pas tester).

En même le commentaire conditionnel pour IE est pas le truc le plus crade qui existe, c'est un problème d'ethique aprés (pas comme le coup de la détection en javascript qui est vraiment trés crade par contre).

Titre: Re:IE, c'est mal!
Posté par: FireLink le le 31-03-2005 a 23:31:45

Ouais, je sais que ca fait très nul... C'est pourquoi j'ai relancé ma demande...

Ton idée me parait bien, je vais essayer tantot et te donner des nouvelles.

Page offline? Problème d'hébergeur surement. Enfin, je vais vous donner des nouvelles sur le résultat.

Merci pour cette nouvelle idée ;)

Titre: Re:IE, c'est mal!
Posté par: DJolhan le le 01-04-2005 a 15:30:11

J'ai trouvé ton probleme Firelink :)
Au cas ou je ne t'aurais pas sur msn ce soir :

Voici ta réponse :

Code:

.centre {
   width: 730px;
   margin-top: 1px;
   float: left;
   background-color: #FFFFFF;
}
   
.centreg {
   width: 730px;
   margin-left: 0px; /* centrage du conteneur */
   background-image: url(images/karbon152_21.gif);
   background-repeat:repeat-y;
}


Tu t'étais monumentallement trompé dans les width de ces deux blocs :)

Essaie de changer le nom de tes balises pour ton prochain site, par pitié pour nous lol ;)

Conclusion a tout ces messieurs, il y a toujours des solutions sémantiquement correct en xhtml :)

Titre: Re:IE, c'est mal!
Posté par: FireLink le le 01-04-2005 a 23:23:45

C'est sympa ça :)

Merci bien :)

Oui, je vais faire un effort, mais pourtant ca me parait clair ::)

EDIT: Il reste un petit bug (il y est sur la page d'example), la distance entre le header et le reste est trop grande, si quelqu'un sait, ne vous gênez pas...

Titre: Re:IE, c'est mal!
Posté par: jb_gfx le le 02-04-2005 a 01:22:10

[quote author=JokoZetla]
Essaie de changer le nom de tes balises pour ton prochain site, par pitié pour nous lol ;)

Conclusion a tout ces messieurs, il y a toujours des solutions sémantiquement correct en xhtml :)
Citation:


lol

Bien joué pour la solution; par contre les commentaires t'aurais pu (du) éviter parceque :

1. c'est pas des balises mais des sélécteurs (des classes en l'occurence).

2. rien à voir avec la sémantique et encore moins avec du XHTML parceque là on parle de CSS.

Titre: Re:IE, c'est mal!
Posté par: DJolhan le le 02-04-2005 a 12:57:37

No comment :)


Forum-webmaster | Actionné par YaBB SE
© 2001-2003, YaBB SE Dev Team. Tous droits réservés.