[CSS] Internet Explorer

[.BöD.]

Hello,

Alors voila mon problème est simple, IE fait n'imp, regardez mon site : http://www.opera-fr.com/

Affichez le site avec plusieurs navigateurs dont IE...

J'ai essayé de régler ce problème quand j'ai créé le site mais j'ai abandonné, me disant que si bien c'est un site pour Opera, pas pour IE...

Donc connaissez-vous une solution qui me permettais d'obtenir un affichage identique même avec IE ?!

J'ai déja regardé les CSS de pc-in vu que kenji est arrivé a le faire, mais j'ai pas pigé comment il a fait...

[Sentinel]

Tu pourrais faire un screenshot du site sous IE ? J'ai pas IE ici (debian inside).

[Cubic-Design]

Le layout de ta page n'est pas assez défini dans ton css. Il faut utiliser des float et des clear:both

Sinon essaye d'alléger ton css en évitant les redondance de propriétés (quand t'as plusieurs div qui partagent la même propriété tu peux faire des regroupement : dvi1, div2 { propriétés....} )

Pour lier ton css utilise aussi un lien relatif (pour la portabilité du site), au lieu de href="http://www.opera-fr.com/style.css" tu peux mettre href="/style.css")

Voilà ça arrange pas trop ton affaire mais c'est des petits conseils, je vais regarder ça d'un peu plus près.

[.BöD.]

Hello,

Merci de vous intéresser a mon problème...

Sentinel : Tiens > http://www.bod59.info/Images/Screens/Opera&IE.jpg

En gros le problème c'est que les deux div qui contiennent les menus da chaque coté se décalent de 5px vers le milieu de la page, qui fait que les news ne passent pas...

Cubic-Design : Merci pour ces infos je vais voir comment modifier ca... et pour les liens relatif et la portabilité, c'est pas un problème, a chaque fois que tu vois un http://www.opera-fr.com/ dans le code source c'est qu'il y a un echo $adr_site, donc juste une variable a changer en cas de changement d'adresse...

[Yangzebul]

Sisi, pour les floats et les clear il les a bien gérés (#gauche et #droite).

Sinon j'ai pensé au bug du modèle de boîte tout de suite, mais même en réinitialisant tout les margin, padding et border à 0, rien. Par contre si je met un "width:50%" à ".cadrenews" les news se casent bien entre les deux collones... bizarre ce serait quand même un problème de dimension.

Autrement deux, trois remarques d'ordre général:

- tu utilise trop de div ! utilise <hx> pour tes titres (c'est une balise bloc donc tu peut aussi mettre tes backgrounds, et <p> pour tes rédactionnels.

- ton mime type est faux, pour du xhtml il ne faut pas déclarer du html, sinon tu déclenche l'utilisation du mauvais parser. utilise:

<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8"/>

http://hixie.ch/advocacy/xhtml.fr/

- met ton javascript dans un fichier externe .js, les comportements tout comme la mise en forme doivent être séparés du contenu.

Sinon, je trouve tes sources assez claires, on s'y retrouve assez facilement.

[.BöD.]

Oui, en fait ce n'est "qu'un probléme de dimension", en fait c'est les deux colonnes de chaques coté qui se décalent de 5 px vers le milieu de la page sous IE...

Merci pour tes remarques, j'ai changé le mime, je vais opter pour des <h?> pour mes titres, et pour le javascript ce n'est que XiTi, c'est pas de la mise en forme, ni du comportement, enfin je pense pas ? si ?

[Yangzebul]

Résolu !

C'est bien un problème de calcul de largeur avec IE.

Retire la propriété "width" dans ces deux classes.

.titrenews

.auteur

Cela ne changera rien à ta mise en page, vu que par défaut les <div> occupent toute la largeur disponible.

Et pour plus de renseignements consulte cette page qui explique le pourquoi du comment:

http://css.alsacreations.com/Bases-et-indi...patible-partout

Edit:

Sisi, pour Xiti, c'est du comportement, du moment que c'est dynamique. Sinon je n'avais pas remarqué que le problème venait des collones qui se raprochaient. J'ai pris le problème par le mauvais bout...

Enfin bon, pour obtenir un résultat nickel il faut que tu revérifie tout ce qui est padding et border qui sont mal interprétées par IE. Le truc pour ne pas trop avoir de problème du genre c'est d'utiliser le plus possible des margin quand cela peut se substituer au padding (au lieu de mettre un padding au parent, définit des margins aux enfants) ça t'évitera pas mal de désagréments. Mais bon ce n'est pas toujours possible.

[.BöD.]

Merci !

Voila, testez sous IE & autre, le résultat est presque le même !

Ce que je voulais c'était limiter la casse sous IE, et c'est fait ! Bon aprés faudrait on pourrait faire un affichage identique, mais bon, au moins ca prouve aux utilisateurs d'IE que leur browser ne sait pas interpréter les standarts...

Bon je vais virer le code de XiTi dans un .js

(au lieu de mettre un padding au parent, définit des margins aux enfants)

C'est ce que je viens de faire pour la partie news...

[Shinuza]

Tu devrais utiliser des titres (Hx ou x est un nombre qui définit l'importance du titre) pour tes news, ça aurait plus de valeur sémantique qu'une "simple" div.

Ensuite, je ne comprends pas pourquoi tu n'utilises pas trois blocs qui s'alignent?

Ton contenu (les news pour la page d'accueil par exemple) n'a pas de contenant.

Il y'a des redondances, beaucoup de redondances, n'oublie pas que CSS veut dire CASCADING style sheet.

N'oublie pas d'utiliser un id pour les blocs uniques et class pour ceux qui se répètent

Autre chose, IE ne comprends ni les max/min-width, ni les max/min-height.

[.BöD.]

Oui je ne suis pas très bon codeur je sais...

Pour les titres en <H?> ce sera fait bientôt, la semaine prochaine normalement...

Je vais essayer de m'améliorer en css...

Pour les max/min-width et les max/min-height je le sais, mais si je met une valeur fixe a 1000px, mes membres n'aiment pas car certains sont encore en 800*600...

[Shinuza]

Oui je ne suis pas très bon codeur je sais...

Pour les titres en <H?> ce sera fait bientôt, la semaine prochaine normalement...

Je vais essayer de m'améliorer en css...

Pour les max/min-width et les max/min-height je le sais, mais si je met une valeur fixe a 1000px, mes membres n'aiment pas car certains sont encore en 800*600...

Mets un pourcentage!!

[.BöD.]

Mets un pourcentage!!

Bah ce n'est pas tellement le but recherché...

Là actuellement ca fait :

Résolution < 1024 : Le site prend toute la largeur de la page

Résolution > 1024 : Le site garde toujours la même largeur : 1000px

C'est pour éviter d'avoir des blocs super étirés pour les gars en 1600*1200 ...

[Shinuza]

Mets un pourcentage!!

Bah ce n'est pas tellement le but recherché...

Là actuellement ca fait :

Résolution < 1024 : Le site prend toute la largeur de la page

Résolution > 1024 : Le site garde toujours la même largeur : 1000px

C'est pour éviter d'avoir des blocs super étirés pour les gars en 1600*1200 ...

C'est ce qui se passe sous ie, le flux central prend toute la page puisqu'il n'a pas de taille définie.

Tu peux le faire simplement en artribuant des marges à ton contenu central à droite et à gauche, en %,, et tu peux utiliser un hack pour IE par exemple si le résultat sous firefox/opera ne te convient pas.

Sinon ton image fais 800px, mais la surface d'affichage en 800x600 n'est pas égale à 800px donc ton image sors de l'écran.

Autre chose, c'est quoi ça :

<li> • </li>

[.BöD.]

Autre chose, c'est quoi ça :

<li> • </li>

Bah c'est ce qui sépare les liens dans la barre de menu...

un espace, un point, un espace

[Shinuza]

Autre chose, c'est quoi ça :

<li> • </li>

Bah c'est ce qui sépare les liens dans la barre de menu...

un espace, un point, un espace

Pourquoi ne pas faire ça :

				<li><a href="http://www.opera-fr.com">Accueil</a> • </li>
	<li><a href="http://www.opera-fr.com/actu.php">Actu d'ailleurs</a> • </li>
	<li><a href="http://www.opera-fr.com/screenshots.php">Screenshots</a> • </li>
	<li><a href="http://www.opera-fr.com/telechargements.php">Téléchargements</a> • </li>
	<li><a href="http://www.opera-fr.com/wallpapers.php">Wallpapers</a> • </li>
	<li><a href="http://www.opera-fr.com/forum/" onclick="window.open(this.href); return false;">Forum</a> • </li>
	<li><a href="http://www.opera-fr.com/liens.php">Liens</a> • </li>
	<li><a href="http://www.opera-fr.com/apropos.php">A propos</a></li>

Ca serait moins bizarre au niveau sémantique