Sujets similaires

Dernière édition par Nyo The Neko le Ven 07 Jan 2011, 17:24, édité 1 fois

Bonjour/bonsoir à tous!

Chers codeurs/codeuses, vous savez comme moi que pour qu'un forum soit optimal pour tous, il faut avoir un site compatible avec les navigateurs les plus utilisés par ceux qui utiliseront votre forum et que c'est pour cela que les designer et les codeurs travaillent main dans la main pour offrir à tous un site compatible pour les plus grands navigateurs. Et comme vous le savez très certainement, ~~malheureusement pour nous~~ Internet Explorer en fait partie.

Ce dernier, non content de ne déjà pas avoir la possibilité de faire des bords arrondis comme tous les autres navigateurs, a également décidé, dans mon cas, de ne pas interpréter ma page d'accueil en onglets comme les autres. Non, il a décidé de décaler tout vers la droite de bien 300 pixels. Du coup, mon cher forum censé être pareil pour Opera, Safari, Firefox et IE, l'est pour les trois premiers, mais pas pour le dernier. ~~Bah oui, IE c'est du caca fermenté.~~

Mon problème est donc sur [CE] forum. Voici donc les deux onglets de ma page d'accueil en onglets qui me posent problème vue avec Internet Explorer 8:
Spoiler:
Spoiler:

Et voilà comment cela devrait être, vu par Firefox 3.6.12, mais qui est exactement pareil sur Safari 5.0.3 et Opera 10.63:
Spoiler:
Spoiler:

Pour vous aider dans votre quête du pourquoi-ça-marche-pas-?-pourquoi-c'est-pas-compatible-?, je vous donne également le code html de ma page d'accueil et le CSS correspondant.

Code HTML (Sous Affichage -> Page d'accueil -> Généralités -> Message sur la page d'accueil -> Contenu du message)

Code:

<div class="systeme_onglets">
<div class="onglets">
<span class="onglet_0 onglet" id="onglet_accueil" onclick="javascript:change_onglet('accueil');">Accueil</span>
<span class="onglet_0 onglet" id="onglet_staff" onclick="javascript:change_onglet('staff');">Information Village</span>
<span class="onglet_0 onglet" id="onglet_partenaires" onclick="javascript:change_onglet('partenaires');">Le Staff</span>
<span class="onglet_0 onglet" id="onglet_credits" onclick="javascript:change_onglet('credits');">Carte</span>
</div>

<div class="contenu_onglets">
<div class="contenu_onglet" id="contenu_onglet_accueil"><div id="imageaceuil"><div style="text-align: justify; position: relative; left: 250px; top: 50px; width: 350px; height: 64px; overflow: visible; font-size: 20px; font-color: #3e3120;">{USERNAME}!</div><div style="text-align: justify; position: relative; left: 90px; top: 20px; width: 270px; height: 223px; overflow: auto; font-size: 13px;"><i>Un contexte unique, des techniques, affinités et lieux inédits ainsi que des mises à jours rapides, Shinobi no Sekai à sa troisième version propose un souffle de nouveauté au monde des RPG Naruto!<br/>
Découvrez Tsuki, Taiyou, Meiun, la Neo-Akatsuki et la vie haute en couleur au sein de l'Archipel dédié aux Dieux de la Lune et du Soleil, tout en profitant de l'ambiance chaleureuse et amicale au sein d'un RPG de haut niveau!</i></div><div style="text-align: justify; position: relative; left: 50px; top: 125px; width: 485px; height: 100px; overflow: visible;">
<a href="http://shinobi-no-sekai.forumsactifs.com/t1177-personnages-de-tsuki-x-x" class="infobullepredef"><img src="http://i67.servimg.com/u/f67/11/97/13/62/hiroki10.png"><div><center><b style="color: #7a6240">HIROKI MIYUKU</b><br/>Tsuki no Kuni<br/><b>Kage</b><br/><b>Excellent Niveau RP</b></center></div></a>

<a href="http://shinobi-no-sekai.forumsactifs.com/t1179-personnages-de-la-neo-akatsuki-2-2" class="infobullepredef"><img src="http://i67.servimg.com/u/f67/11/97/13/62/tarou10.png"/><div><center><b style="color: #7a6240">TAROU YAMADA</b><br/>Taiyou no Kuni<br/><b>Chef de la Neo-Akatsuki</b><br/><b>Excellent Niveau RP</b></center></div></a>

<a href="" class="infobullepredef"><img src="http://i67.servimg.com/u/f67/11/97/13/62/taiyou15.png"><div><center><b style="color: #7a6240">NOM A CHOIX</b><br/>Taiyou no Kuni<br/><b>Kage</b><br/><b>Excellent Niveau RP</b></center></div></a></div><div style="text-align: justify; position: relative; left: 620px; bottom: 370px; width: 200px; height: 150px; overflow: visible;"><div class="lienacc"><div style="text-align: justify; position: relative; left: 50px; top: 10px; width: 100px; height: 36px; overflow: visible;"><center><a href="http://shinobi-no-sekai.forumsactifs.com/t1174-reglement-general" class="mip">Règlement</a></center></div>
</div><div class="lienacc"><div style="text-align: justify; position: relative; left: 50px; top: 10px; width: 100px; height: 36px; overflow: visible;"><center><a href="http://shinobi-no-sekai.forumsactifs.com/t1166-contexte-de-shinobi-no-sekai" class="mip">Contexte</a></center></div>
</div><div class="lienacc"><div style="text-align: justify; position: relative; left: 50px; top: 10px; width: 100px; height: 36px; overflow: visible;"><center><a href="http://shinobi-no-sekai.forumsactifs.com/f99-ichizoku" class="mip">Clans</a></center></div>
</div><div class="lienacc"><div style="text-align: justify; position: relative; left: 40px; top: 10px; width: 120px; height: 36px; overflow: visible;"><center>A propos du design</center></div>
</div></div><div style="text-align: justify; position: relative; left: 600px; bottom: 325px; width: 248px; height: 319px; overflow: auto; font-size: 13px;">
<b>[03/01]</b> Veuillez notez que nous ne pensons pas ouvrir le forum avant la période <b>printemps-été</b>. Cependant, vous pouvez tout de même vous inscrire auparavant, car nous enverrons une <b>newsletter</b> et ferons un recensement pour ramener tous les joueurs et supprimer les comptes inactifs. Merci de votre patience.<br/><br/>
<b>[Rappel]</b> • Minimum de <b>15 lignes complètes</b> par post de RP!<br/>
• La taille maximale des avatars est de <b>200px x 320px</b>!</div>
</div>

</div>

<div class="contenu_onglet" id="contenu_onglet_staff">
<table><tbody><tr><td id="rouleautaiyou"></td><td id="rouleautsuki"></td><td id="rouleaumeiun"></td><td id="rouleauaka"></td></tr></tbody></table><br/>
<center><table border="1" style="border-collapse:collapse; border: 1px solid #3C2B21; width: 800px;"><tbody><tr><td></td><td>Nom</td><td>Chef / Kage</td><td>Effectif</td><td>État</td><td>Activité<br/>récente</td></tr>
<tr><td><center><img src="http://i67.servimg.com/u/f67/11/97/13/62/minits10.png"/></center></td><td>Tsuki no Kuni</td><td>Hiroki Miyuku</td><td>0/12</td><td>Paix</td><td>Aucune</td></tr>
<tr><td><center><img src="http://i67.servimg.com/u/f67/11/97/13/62/minita10.png"/></center></td><td>Taiyou no Kuni</td><td>???</td><td>0/12</td><td>Paix</td><td>Aucune</td></tr>
<tr><td><center><img src="http://i67.servimg.com/u/f67/11/97/13/62/minime10.png"/></center></td><td>Meiun</td><td >Sacha Miyuku</td><td>1/12</td><td>Paix</td><td>Aucune</td></tr>
<tr><td><center><img src="http://i67.servimg.com/u/f67/11/97/13/62/miniak10.png"/></center></td><td>Neo-Akatsuki</td><td>Tarou Yamada</td><td>0/10</td><td>Paix</td><td>Construction récente du repère<br/>Début de l'activité<br/>Peu d'informations</td></tr></tbody></table><center>
</div>

<div class="contenu_onglet" id="contenu_onglet_partenaires">
<table><tbody><tr><td id="sachami"></td><td id="getsu"></td></tr></tbody></table>
</div>

<div class="contenu_onglet" id="contenu_onglet_credits">
Carte
</div>
</div>
</div>

<script type="text/javascript">
//
</script>

Code CSS:

Code:

.pa_modified {
background-color: #7a6240 ;
border: none;
}

/*DÉBUT PAGE D'ACCUEIL EN ONGLETS*/
.onglet /*affichage basique de l'onglet*/
{
display:inline-block;
width: 150px; /*taille de l'onglet*/
padding:5px; /*marge intérieure*/
cursor: crosshair; /*apparence du curseur*/
border: 1px solid #3C2B21;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
margin-bottom: -1px;
text-shadow: #4a4646 1px 1px 1px;
font-size: 12px;
font-family: Verdana;
}

.onglet_0 /*Onglet non choisi en standby*/
{
background:#7a5d37; /*Couleur du fond de l'onglet*/
border: 1px solid #3C2B21;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
}
.onglet_0:hover {
background: #BC9E76;
border: 1px solid #3C2B21;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
}

.onglet_1 /*Onglet choisi, en cours*/
{
background:#dec6a6; /*Couleur du fond de l'onglet*/
border: 1px solid #3C2B21;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
}

.contenu_onglet /*cadre qui contient les informations*/
{
background-color:#BC9E76; /*couleur du fond du contenu*/
padding:10px; /*marge intérieure*/
display:none; /*A ne pas retirer !*/
border: 1px solid #3C2B21;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
text-align: justify;
}
/*FIN PAGE D'ACCUEIL EN ONGLETS*/

#imageaceuil
{
background-image: url("http://i67.servimg.com/u/f67/11/97/13/62/acceui10.png");
background-repeat: no-repeat;
background-attachment: scroll;
width: 886px;
height: 568px;
}

.lienacc
{
background-image: url("http://i67.servimg.com/u/f67/11/97/13/62/roulea10.png");
background-repeat: no-repeat;
background-attachment: scroll;
background-position: center center;
width: 200px;
height: 36px;
}

.lienacc:hover
{
background-image: url("http://i67.servimg.com/u/f67/11/97/13/62/roulea11.png");
background-repeat: no-repeat;
background-attachment: scroll;
background-position: center center;
width: 200px;
height: 36px;
font-color: #d6ba95;
}

.mip:hover {
font-variant: small-caps;
font-weight: bold;
font-size: 13px;
text-shadow: #f6e1c6 4px 4px 4px 4px;
}

a.infobullepredef {
position: relative;
}

a.infobullepredef div {
display: none;
}
a.infobullepredef:hover {
background: none;
z-index: 999;

}
a.infobullepredef:hover div {
width: 150px;
text-align: center;
overflow: hidden;
display: inline;
position: absolute;
/*white-space: nowrap;*/
top: 20px;
left: 15px;
background: #d7c6a8;
color: black;
padding: 5px;
border: 2px solid #bc9e76;
border-left: 2px solid #bc9e76;
font-family: Verdana;
font-size: 10px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
}

Merci d'avance pour votre aide jeunes gens! ^^

Em, je ne saurais pas vraiment comment vous aider.. mais je sais que vous avez firefox. Par contre, vous voulez modifier le code pour que ça puisse marcher aussi en IE8.. alors mon seul conseil.. procurez-vous Firefox. ;p

Je sais que le texte est long, mais il faudrait le lire en entier avant de me répondre =P

Les Administrateurs de ce forum et moi-même (bon on est que deux, m'enfin bon xD) souhaitons que tout le monde puisse voir le forum au meilleur de sa forme. Nous assurons même que le forum est compatible pour IE8, Safari, Firefox et Opera. Nous ne pouvons PAS le certifier si la page d'acceuil ~~part en couille~~ est déformée. Je sais que IE ~~c'est de la merde~~ n'est pas un bon navigateur, et moi-même je souhaiterais que tous changent pour un autre navigateur, mais malheureusement, c'est le navigateur du plus grand nombre.

Bon, je vais faire plus simple: Je voudrais que mon forum soit compatible avec IE8 pour que les ~~idiots~~ personnes qui l'utilisent puissent aller dessus aussi. Pas que ceux qui sont assez intelligents pour changer de navigateur.

Holà
*vient d'aller voir pour voir si c'est pas juste un truc avec la résolution d'écran :DD on sait jamais xD*

Peut-être que IE n'aime pas le fait qu'il n'y a (peut-être) pas de largeur fixe pour la PA? Mais ce ne sont que des suppositions.

Peut-être si tu entoures ton code entier d'une div genre:

Code:: <div style="width:XXpx"></div>

IE va écouter~

Mais je vais aller essayer ça sur un de mes forums tests pour trouver une solution si ça ne marche pas Cool

EDIT: Ouais bon si le code veut bien marcher sur mon forum LOL
RE-EDIT: Est-ce que tu as une partie du code dans un autre template, par exemple un bout de script dans le template overall_header? x)

Ah, pardon Ikø' c'est vrai que j'ai oublié de vous donner le code html correspondant au .pa_modified! ^^"

Voici donc le Code HTML manquant (Affichage -> templates -> index_body tout en haut entre):

Code:


<table class="pa_modified" width="100%" border="0" cellspacing="1" cellpadding="0">


Et tu vois que normalement, la table du PA a une longueur "précise" (parce que bon, moi, 100%, je sais pas si c'est précis pour IE xD). Après, es-ce que DANS le PA je devrais créer un div?

(Et non, c'est pas la résolution d'écran x) )

Bonjour,

Nyo The Neko a écrit:: Bon, je vais faire plus simple: Je voudrais que mon forum soit compatible avec IE8 pour que les ~~idiots~~ personnes qui l'utilisent puissent aller dessus aussi. Pas que ceux qui sont assez intelligents pour changer de navigateur.

Et tu as bien raison =) Et il ne faut pas généraliser, il y a des tas de raisons qui font que certaines personnes sont obligées d'utiliser IE... Ordinateur du boulot/lycée/université, ou ordinateur des parents qui veulent pas qu'on y touche, etc. Et puis, tout le monde n'est pas forcément à l'aise avec l'outil informatique/web ^^ Mais n'oubliez pas Chrome, il est bien plus important en terme de parts de marché (et donc nombre d'utilisateurs) qu'Opéra ou Safari !

Pour l'accueil :

Personnellement, je me dis que ça vient peut-être du mélange position:relative avec left/top... Je ne l'ai jamais vu ni jamais utilisé (souvent le relative est avec les margin et l'absolute avec les top et left), ce qui ne veut pas dire que c'est nécessairement mauvais, mais bon, c'est le seul truc qui me "choque", surtout par rapport à ta structure HTML ^^'

Mets un position:relative à ta div image accueil et des position:absolute à toutes les divs qu'elle contient. Cela te créera très certainement un affichage étrange puisque les top/left/etc ne seront plus calés correctement, mais compare avec IE, voit si l'affichage est similaire ou là encore, en décalage. Cela permettra de voir si le souci se trouve là ou ailleurs. Si ça s'affiche pareil dans tous les navigateurs, il ne te restera plus qu'à caler les éléments par rapport au coin en haut à gauche de image accueil. Sinon, il faudra encore chercher =P

Pour le staff :

Peut-être tenter de mettre un float left au table, il devrait positionner le tableau à gauche. Malheureusement, une telle action "sort" le tableau du flux HTML, et ta div parente se croit vide, et donc ton fond de couleur disparaîtra.

Tu peux donner une hauteur fixe à ta div parente, mais c'est pas toujours possible (contenu à la taille variable en hauteur, toussa). Un truc qui marche à tous les coups, c'est insérer une div vide avec le style clear both, comme ceci (tu peux créer une classe et le faire en css si tu préfères, j'ai presque toujours une classe clearboth perso ^^')

Code:: <div style="clear:both;"></div>

Le clear both rétablira le flux =)

Kiwi

je n'ai pas Chrome sur mon ordinateur, mais Chrome et Opera sont extrêmement, même ridiculement proche. Donc si ça marche sur Opera, ça marche (normalement) sur Chrome. x)
Et je sais bien que ce ne sont pas que les idiots qui utilisent IE et que c'est la navigateur web le plus utilisé à cause de Windows, je ne dis pas le contraire. Mais j'ai IE en haine depuis longtemps, alors c'est plus fort que moi de l'attaquer verbalement x)

Donc ce que tu me dis de faire ici, ce serait de changer toutes mes distances et les faire, non pas par rapport à l'élément précédent (relative = par rapport à l'élément précédent), mais par rapport à la page entière (absolute = par rapport au reste de la page), c'est bien ça?
Mais ma question serait alors: si IE n'est déjà pas capable de lire une position par rapport à un autre élément, sera-t-il capable de le faire dans une même page? Et surtout, pourquoi IE n'est pas capable d'abalyser le contenu du PA en onglet comme tous les autres navigateurs? Es-ce que cela tient vraiment au contenu du message et pas plutôt à un problème autre? Car cela serait dérangeant de changer tout mon code pendant une heure et après de me retrouver avec un PA compatible avec IE mais pas tous les autre nav!

Et j'ai pas très très bien ton histoire de clearboth. C'est à dire, où devrais-je le mettre? Et quel est son effet? (pour ma culture générale son effet. parce que je suis contente quand le code marche, mais encore plus quand j'ai compris pourquoi xD )

Merci de ton aide Kiwi =D

Bah, IE8 reste convenable ^^ Il respecte assez bien les standards actuels, presque mieux, à la limite, que Chrome, Firefox & co qui ont tendance à se montrer parfois laxistes ou à corriger automatiquement certaines erreurs (du genre fermer des balises tout seuls, etc)... Méfie-toi quand même chrome/safari, il arrive quelques différences, mais c'est assez rare, c'est vrai ^^ (plutôt mineur, et vite résolu, mais moi, c'était surtout dans le sens chrome > safari)

Sinon pour tester, inutile de changer les mesures immédiatement ! Change simplement les positions. D'abord, tu mets en absolute les div du pa d'accueil. Mais le positionnement absolu se fait toujours par rapport au plus proche parent positionné (le body par défaut). Dans ton cas, tu veux le positionner par rapport à image accueil, donc il faut que tu lui indiques une position, comme position:relative. Cela suffira à voir s'ils ont le même affichage, même s'il est moche.

Quant au bug, je pense que ça vient de ta structure HTML, du mélange relative tout en utilisant les positionnements absolus (top, left etc)... Je n'ai jamais rien vu de pareil (comme je l'ai dit, ça veut pas dire que ça se fait pas, c'est seulement mon avis d'après ma petite expérience), et je ne pense pas que ce soit naturel. On voit clairement que IE8 ne prend pas le même point de repère que Firefox et Chrome. D'ailleurs, mettre la position en relative pour image accueil suffira peut-être, je ne sais pas...

Bref, normalement, naturellement, le positionnement relatif sert à placer les éléments HTML à la suite des autres, en suivant le HTML... Sauf que là, ta méthode d'affichage ne tient pas compte de la structure HTML. Dans ton code, tu as :

Bonjour Invité/Membre
Encart presentation
Persos à prendre
Menu rapide
News

Alors qu'à l'affichage, par ordre d'arrivée, tu as plutôt quelque chose de ce genre-là :

Menu rapide
Bonjour Invité/Membre
Encart presentation
News
Persos à prendre

C'est pour cela que la solution du relative dans ta structure ne me paraît pas normale, elle peut peut-être marcher avec ta méthode, et tant mieux ! Mais tu ne positionnes plus réellement tes éléments les uns par rapport aux autres... Pour utiliser le positionnement relatif, une structure en deux colonnes aurait été plus judicieux à la limite, plus simple à mettre en place :

col-left
Bonjour Invité/Membre
Encart presentation
Persos à prendre
col-right
Menu rapide
News

À moins de garder la précédente structure HTML grosso modo, et de jouer sur les float right/left...

Mais la façon de que tu as eu de penser ton panneau se rapproche plus du positionnement absolu, c'est pour cela que je te l'ai suggéré... Du coup, en suivant ce raisonnement, et s'il s'avère juste, je pense que tu comprends peut-être les soucis d'IE, et aussi le fait que ça marchera quand même pour les autres... Mais, pour tester simplement, tu as seulement 6 changements à faire (et tu n'en aurais eu que 2 en utilisant des classes CSS =P), sinon, ça veut dire qu'il y a une erreur en vadrouille ailleurs et que ton positionnement CSS n'est pas forcément en cause ^^

Pour le panneau du staff, c'est une question de flux HTML... En position normal, l'élément HTML est dans le flux HTML, sinon, il n'y est pas. S'il n'y est pas, une div contenant des éléments positionnés hors flux HTML sera vide, cela se voit clairement avec la disparition du background au minimum (pour cela, je t'invite à tester, et à voir par toi-même ce qui arrive si tu mets ton tableau en float-left !).

La propriété clear permet de rétablir le flux précédent un élément, tu peux lui donner les valeurs de none (rien donc), right, left (je n'ai jamais utilisé ces valeurs, personnellement, je crois que c'est lié aux float right/left) ou both qui a la valeur des deux précédents à la fois. Du coup, les éléments HTML qui se trouve avant la div vide clearboth seront remis dans le flux tout en gardant le positionnement désiré. Résultat, la div qui contient des éléments positionnés ne se considérera donc pas comme vide, et aura la taille qu'il faut pour afficher un beau background. C'est un peu difficile à expliquer, je ne suis pas sûre d'avoir été très claire ~~

Du coup, tu vas avoir (j'ai pas utilisé tes class mais tu comprends le principe ^^)

Code:: <div class="div-conteneur">
<table class="tableau-staff>.....</table>
<div style="clear:both;"></div>
</div>

Clearboth ne change absolument rien ^^" pour le staff. Je ne vois vraiment pas d'où vient le problème. J'aurais beau mettre left, IE garde ce staff centré.

Ensuite, pour ce qui est du absolute: oui effectivement, ça donne le même affichage, sauf que ça SORT du message d'accueil. Et j'ai vraiment vraiment pas envie de devoir passer des heures à changer toutes les distances en pixels pour les beaux yeux de IE8. parce que c'est bien jolie de me dire que c'est que six petits changements, mais crois-moi que pour trouver les bonnes distances du premiers coup, ce n'est pas vraiment ça. Ensuite, le problème du absolute, c'est qu'il dépend fortement de la résolution d'écran.

Vu que mon relative marche pour toutes les résolutions et les trois navigateurs cités plus haut sauf IE, ~~j'ai vraiment pas envie de me faire chier~~ je voudrais savoir s'il n'y a pas une autre solution. Parce que, avoue que c'est étrange que IE soit le SEUL navigateur à ne pas lire le code correctement!

Non non, je ne m'énerve pas contre IE, pas du tout, pas du tout...

Edit: Pour ce qui est du relative, je les positionne toujours les uns par rapport aux autres. Pire même! IE me les affiche correctement avec les bonnes distances ENTRE les éléments, mais ne place les éléments eux-même pas à la bonne place! Tous sont décalés de la même distance de leur place d'origine!

Edit 2: D'après [CE] site, relative donnerait une position depuis son conteneur.... Conteneur c'est pas un peu l'emplacement où il devrait être à la base? Donc pourquoi IE le lit FAUX?

Nyo The Neko a écrit:: Clearboth ne change absolument rien ^^" pour le staff. Je ne vois vraiment pas d'où vient le problème. J'aurais beau mettre left, IE garde ce staff centré.

Clearboth était juste là pour résoudre un problème auxiliaire, inhérent à l'utilisation de float left dans un bloc à hauteur automatique, pas pour ton bug... Donc au final, le float left n'a rien changé?
Mais je crois que j'ai trouvé =P Dans ta div contenu_onglet du staff là, regarde tout à la fin, au lien d'une balise /center tu as mis une balise center, non? ^^' Si une fois le center corrigé, ça ne change rien, tu peux retenter le floatleft, à la limite...

Nyo The Neko a écrit:: Ensuite, pour ce qui est du absolute: oui effectivement, ça donne le même affichage, sauf que ça SORT du message d'accueil. Et j'ai vraiment vraiment pas envie de devoir passer des heures à changer toutes les distances en pixels pour les beaux yeux de IE8. parce que c'est bien jolie de me dire que c'est que six petits changements, mais crois-moi que pour trouver les bonnes distances du premiers coup, ce n'est pas vraiment ça. Ensuite, le problème du absolute, c'est qu'il dépend fortement de la résolution d'écran.

Pour trouver l'origine d'un problème, il faut débuguer, autrement dit, effectuer tout un tas de petits tests pour mettre le doigt sur ce qui ne va pas.

Les 6 changements, c'était juste pour un test, ce qui ne veut pas dire que ce qui vient derrière est plaisant, c'était juste pour te garantir que ton déplaisir aurait un résultat effectif. Donc au final, même mise en page (même si elle est pas belle) sous IE et le reste? => Probablement, il s'agit d'un bug lié à ce que j'ai cité précédemment... Et s'il sort du message d'accueil, c'est probablement que tu n'as pas dû mettre un position:relative sur la div image accueil... ^^' Autrement, j'aimerai bien que tu mettes toutes ces positions pour y jeter un oeil...

As-tu essayé de mettre juste le position:relative sur la div image accueil? => Peut-être que ça suffira sous IE >_<

Sinon, crois-moi, de l'intégration au pixel prés, j'en ai bouffé, compatible IE6 s'il te plaît, donc je sais ce que c'est =) Surtout quand le client repasse derrière avec une impression d'écran et compare à son PSD... u_u Mais si tu t'y prends bien, en absolute, c'est beaucoup moins long qu'en relative, je parle d'expérience =)

Sinon, je t'assure à 100% qu'absolute ne dépend pas de la résolution, sauf dans un cas, j'y reviens plus bas x)

Nyo The Neko a écrit:: Vu que mon relative marche pour toutes les résolutions et les trois navigateurs cités plus haut sauf IE, ~~j'ai vraiment pas envie de me faire chier~~ je voudrais savoir s'il n'y a pas une autre solution. Parce que, avoue que c'est étrange que IE soit le SEUL navigateur à ne pas lire le code correctement!

A priori, ton relative ne marche pas partout, la preuve ^^ (je taquine o/)

Après, crois-moi, ça n'a RIEN d'étonnant que IE réagisse ainsi, je l'ai déjà dit : Chrome et Firefox sont beaucoup plus laxistes, IE8 est très "carré". Il m'est souvent arrivé de coder un truc qui fonctionnait bien sous Chr/FF et d'arriver sous IE en ayant une merde, et en me rendant compte que ça venait de mon code qui manquait de "propreté" plutôt que de la faute à IE. Sur ce point, d'ailleurs, je préfère IE8 qui pointe directement les erreurs que les autres qui les planquent et te font des grands sourires u_u Comparé à ce que ça a été, IE n'est pas tant horrible ^^ Loin d'être parfait, encore à la bourre par rapport aux nouvelles normes, mais il commence à ressembler à quelque chose...

Après, il y a peut-être une autre solution (cf ce que je t'ai proposé à l'instant), un autre problème qui m'a échappé, mais je n'ai pas trop le temps de chercher davantage, et aucune autre idée ne me vient à l'esprit, donc je passe la main à d'autres. J'ai passé ton forum au validator w3c et il n'a rien trouvé de particulier concernant ton PA pouvant justifier ce bug, donc a priori, pas de véritables erreurs HTML...

Nyo The Neko a écrit:: Edit 2: D'après [CE] site, relative donnerait une position depuis son conteneur.... Conteneur c'est pas un peu l'emplacement où il devrait être à la base? Donc pourquoi IE le lit FAUX?

Vire ce site de tes favoris, black-liste-le, fais ce que tu veux, mais ne l'écoute pas, il baragouine n'importe quoi... u_u Regarde plutôt ici par exemple, ou va sur alsacreations ou le site du zero...

Donc, ABSOLUTE ne DEPEND PAS de la RESOLUTION d'écran. Il dépend (je le répète one more time) du premier parent positionné. S'il n'y en a pas, c'est le body, donc le point 0,0 du navigateur, donc dans ce cas, oui, tu peux considérer que ça dépend de la résolution, mais SEULEMENT dans ce cas. Si tu positionnes un parent, la position absolute dépendra du parent comme par exemple simpliste :

Code:: 

<div class="papa" style="position:relative;">
<div class="maman">
<div class="enfant" style="position:absolute;">Je dépend de mon papa (a)</div>
</div>
</div>



<div class="papa" style="position:relative;">
<div class="maman" style="position:relative;">
<div class="enfant" style="position:absolute;">Je dépend de ma maman (a)</div>
</div>
</div>



<div class="tout-seul" style="position:absolute;">Moi, pauvre orphelin, je dépend du body T^T et donc accessoirement de la résolution....</div>

RELATIVE dépend de la structure HTML, de l'ordre dans lequel tu as énoncé les éléments HTML etc, bref, la notion que je ai évoqué tout à l'heure. Evidemment, dans cet esprit-là, il dépend du conteneur, mais il dépend surtout de ses voisins...

Je t'invite à t'informer davantage sur les positionnements, par exemple ici, j'imagine que tu comprendras mieux ce que j'essaye de t'expliquer vainement... Le positionnement est sans doute la notion la plus compliquée à comprendre/expliquer en CSS... Tu y constateras ce que je te disais, les relative avec les margin, et les absolute avec les top/left... Le mariage des deux à la fois ne semble pas réussir à IE8 (et j'aurai tendance à partager son avis, car ça ne me paraît pas naturel...)

Kiwi ^^

Le site est pas dans mes favoris, il est apparu dans les premières pages google x)

Ce que j'ai surtout retenu d'après plusieurs sites c'est que IE8 nous fait un profond bug sur la position: relative. Que ce soit un site anglais, allemand ou français, ils me disent pareil. Et franchement, ils ont pas tort...

A part ça, j'hésite entre pleurer, me pendre ou me tirer une balle là tout de suite T_T Mais malgré tout, ~~bien que ce soit chiant à mourir et que j'ai déjà galéré avec mes position relative avant~~, je pense que je vais faire ce que tu as dit entre le papa relative et l'enfant absolute. J'avais vu cette solution sur les autres sites dont je parle plus haut, mais voir cette solution me donnait envie de pleurer T_T

Pour ce qui est du center, je l'ai changé, donc j'ai fermé la balise que j'avais oublié de fermer, et ça ne change rien. Idem pour le float left. Non vraiment, ça me désespère encore plus que l'histoire de l'absolute T_T

Mais merci pour tout Kiwi, tu auras été d'une aide absolue!

Bonjour (:
Votre problème est-il toujours d'actualité ? S'il est maintenant résolu, merci de cocher l'icône Page d'accueil en onglet: problème de compatibilité Resolu3

Page d'accueil en onglet: problème de compatibilité Resolu3

en éditant votre premier message (:

Non il ne l'est pas. J'ai toujours le problèmes du staff qui est centré

Il y a peut-être un bug chez IE8, je ne sais pas =o Je n'ai jamais utilisé la position relative comme tu l'as fait, et je n'ai jamais eu de problèmes, mais j'en prends bonne note, sait-on jamais, si ça finit par m'arriver ^^ Merci pour l'info =)

Pour ton tableau du staff... Il y a toujours moyen de bidouiller une colonne à droite qui prendrait toute la place qui reste en largeur, et en javascript, au onmouseover, tu ajoutes que tu mets la largeur de cette colonne à 0 (ou à la largeur qui reste dans le tableau pour que leq autres colonnes gardent la bonne position).

Je suis sûre et certaine d'avoir déjà eu ce bug, mais impossible de rien me rappeler à ce sujet...

Kiwi

Je t'en prie, c'est surtout toi que je remercie x)

Le problème, c'est que la table n'est pas centrée ni rien, y'a que deux cellules et aucune n'est centrée et IE me le centre. Limite, c'est pas grave, je peux laisser comme ça, c'est pas plus dérangeant, mais je me demande bien pourquoi iE nous fait ce coup là?

Enfin, tant pis, vu que mon plus gros problème est maintenant résolu, je vais tout de même mettre tout le topic en résolu! ^^

L'icône étant résolu, je classe (:

Hop, je reviens après un petit test, dans ton template index_body, essaye de modifier ça :

Code:: 
<tr>
<td class="row1" rowspan="3" align="center" valign="middle">

Pour supprimer le align="center" (ça risque de modifier d'autres choses dans ton PA, hein, mais pour voir déjà ce que ça fait, si ça résous, si ça change un peu/pas beaucoup, etc)

Et de rien ^-^

Kiwi

Page d'accueil en onglet: problème de compatibilité

Page d'accueil en onglet: problème de compatibilité

Sujets similaires

Sujets similaires

Partenaires Or