Discussion :

[Abou Zar]

Bonjour
La page d'acceuil de mon site s'affiche differemment selon qu'on est sous Firefox et Internet Explorer.
L'affichage de Firefox est normal (ce que je veux) mais celui de Internet Explorer n'est pas du tout bon car ça melange tout meme les onglets.

Comment resoudre ces genres de problemes?

merci de votre aide!

[Bovino]

En rectifiant ton code ?

[bob633]

Dur loi des développeurs web ... rendre compatible son code.

Tu as plus qu'à reprendre page par page ton code pour qu'il s'adapte partout

[Atomya Rise]

Aurais tu la partie du code en relation avec ton soucis ?
Un affichage ou une explication complète des différences ?
Sous quelle version d'internet explorer as-tu tester ?
Et pour les autres, ça donne quoi ?

[Abou Zar]

Merci bien pour ces reponses.
Actuellement, ce qui me pose probleme c'est que avec explorer la presentation diffère sur differents postes ayant la meme resolution.
Certains postes sous explorer presentent bien comme sous firefox mais d'autres non.Or ces postes sous explorer sont sur la meme resolution mais presentent differemment.

Je ne comprends pas ce que il faut faire.

Merci bien de votre aide!

[Atomya Rise]

hummm, ce que tu expliques là, on l'a bien compris..
As-tu lu le message juste au dessus ?

[miss_socrates]

Il est fort probable que ton code ne respecte pas les standards, ce qui risque de poser des problèmes d'affichage.
Ainsi, si un doctype n'est (probablement) pas renseigné, cela va entrainer que chaque navigateur va afficher les pages 'à sa manière', ce qui explique que les affichages sous IE et Firefox sont différents. Certains codes ne sont pas interprétés de la même manière par tous les navigateurs. Si tu testes sous d'autres navigateurs, tels que Opera, Safari, etc. l'affichage risque encore de différer !!
Si on pouvait avoir l'adresse de ton site, on pourrait t'indiquer ce qu'il y a à changer...

[Abou Zar]

Merci bien pour ces reponses!
En fait je suis toujours en local, j'essai avec les postes du reseau local.

Je travaille sous spip 2.1, et c'est un plugin (menu deroulant) que j'ai utilisé mais malheuresement, mon menu deroulant s'affiche differement sous Explorer.

Actuellement le problème est Internet explorer car les versions differentes de explorer affichent differemment.

Internet explorer 8 affiche bien (comme firefox) mais la version 6 affiche mal.
Avec la version 6 les elements du menu au lieu d'etre horizontal se placent de façon verticale et donc le cadre du menu devient grand. Or le menu est une ligne horizontale.

Comme je le disais c'est un plugin, mais je ne sais pas comment resoudre le problème?
Voici les codes html et css

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div id="nav-container">
	<B_rubriques>
	<ul id="nav" class="menuder">
		<ul>
			<BOUCLE_rubriques(RUBRIQUES) {racine} {par num titre, titre}>
			<li>
				<a href="#URL_RUBRIQUE" class="intitule">[(#TITRE|supprimer_numero|couper{80})]</a>
 
				<B_sous_rubriques>
				<ul>
					<BOUCLE_sous_rubriques(RUBRIQUES) {id_parent} {par num titre, titre}>
					<li><a href="#URL_RUBRIQUE" <BOUCLE_test_sousrub(RUBRIQUES){id_parent}{0,1}>class="daddy"</BOUCLE_test_sousrub>>[(#TITRE|supprimer_numero|couper{80})]</a><BOUCLE_re(BOUCLE_sous_rubriques)></BOUCLE_re>	</li>
					</BOUCLE_sous_rubriques>
				</ul>
				</B_sous_rubriques>
 
			</li>
			</BOUCLE_rubriques>
		</ul>
	</ul>
	</B_rubriques>
</div>

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
 
/* menuder.css */
.menuder-container {}
.menuder,
.menuder ul { float: left; width: 100%; margin: 0; padding: 0; background-color: #fff; border: solid #666; border-width: 1px 0; list-style: none; text-align: left; font-weight: bold; }
.menuder a { display: block; width: 10em; w\idth: 6em; padding: .25em 2em; text-decoration: none; }
.menuder a.daddy { background: url(img/menuder.gif) center right no-repeat; }
.menuder li { float: left; width: 10em; padding: 0; }
.menuder li ul { position: absolute; left: -999em; height: auto; width: 14.4em; w\idth: 13.9em; margin: 0; border-width: .25em; font-weight: normal; z-index:100;}
.menuder li li { width: 13em; padding-right: 1em; }
.menuder li ul a { width: 13em; w\idth: 9em; }
.menuder li ul ul { margin: -1.75em 0 0 14em; }
.menuder li:hover ul ul,
.menuder li:hover ul ul ul,
.menuder li:hover ul ul ul ul,
.menuder li.hover ul ul,
.menuder li.hover ul ul ul,
.menuder li.hover ul ul ul ul { left: -999em; }
.menuder li:hover ul, 
.menuder li li:hover ul, 
.menuder li li li:hover ul,
.menuder li li li li:hover ul { left: auto; }
.menuder li.hover ul,
.menuder li li.hover ul,
.menuder li li li.hover ul,
.menuder li li li li.hover ul { left: auto; }
.menuder li:hover,
.menuder li.hover { background-color: #666; }
/* end */

Merci bien de votre aide!

[Kaamo]

woow, les bons vieux hacks css IE 5.5

Dans ton code, le backslash "\" permet de dire à IE 5.5 et moins d'ignorer la ligne avec le backslash. Donc le width fera 14.4em. Au contraire, les autres navigateurs prendront 13.9em comme valeur.

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
width: 14.4em; 
w\idth: 13.9em;

Sinon le code que tu as fourni est un code spip, et donc, on ne sait pas tout à fait quel sera le rendu final.
Peux - tu fournir le code généré ? (le code source html de la page une fois chargée dans un navigateur)

Avec la version 6 les elements du menu au lieu d'etre horizontal se placent de façon verticale et donc le cadre du menu devient grand.

Ce n'est pas plutôt le contraire ? A vu de nez, on dirait que le comportement normal affiche un sous menu vertical.

Encore un point, ne manque t il pas des propriétés CSS ? Je ne vois pas, par exemple, la propriété du #nav-container, ou encore du #nav ou du .intitule

[Abou Zar]

Bonjour,
Ok merci bien;
Voici le code fourni par le navigateur firefox

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
<!--
/*******************************************************************************************************
 
menu-dyna.html
 
Distribué sous licence GPL (http://www.gnu.org/licenses/gpl.html).
Copyright (c) 2006 de l'INIST/CNRS
Réalisation par Pierre Wirtz dans le cadre de l'équipe ARTIST (http://artist.inist.fr) et AMETIST
(http://ametist.inist.fr)
 
                         All Rights Reserved
 
     This program is free software; you can redistribute it and/or modify
     it under the terms of the GNU General Public License as published by
     the Free Software Foundation; either version 2 of the License, or
     (at your option) any later version.
 
     This program is distributed in the hope that it will be useful,
     but WITHOUT ANY WARRANTY; without even the implied warranty of
     MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
     GNU General Public License for more details.
 
     You should have received a copy of the GNU General Public License
     along with this program; if not, write to the Free Software
     Foundation, Inc., 675 Mass Ave, Cambridge, MA 02139, USA.
 
*******************************************************************************************************/
-->
<div id="navigation" style="display:block">
 
 
<div class="menu" style="display:block; width: 100%; text-align: left;">
 
<?php
//Définition du niveau maximal d'affichage si le javascript est désactivé
$maxlevel= 3;
 
// récupération de la hiérarchie courante
$hierarchie = array();
<BOUCLE_principale(RUBRIQUES){id_rubrique}>
        <BOUCLE_hierarchie(HIERARCHIE){id_rubrique}>
                $hierarchie[] = #ID_RUBRIQUE;
        </BOUCLE_hierarchie>
        $hierarchie[] = #ID_RUBRIQUE;
        $actuelle = #ID_RUBRIQUE;
</BOUCLE_principale>
 
// inclusion du script de gestion des layers de SPIP
//$flag_ecrire = false;
//include 'ecrire/inc_layer.php3';
//afficher_script_layer();
?>
 
<div style="">
	<ul id="menu_dyna">
<BOUCLE_secteurs(RUBRIQUES){id_parent=0}{par titre}>
	<B_nb_rubriques><BOUCLE_nb_rubriques(RUBRIQUES){id_parent}><?php $descendants = true;?></BOUCLE_nb_rubriques></B_nb_rubriques><?php $descendants = false;?><//B_nb_rubriques>
	<?php $level=1; ?>
	<li class="menu_lev_1" >
		<?php if ($descendants) { ?>
				<p style="background: #3C7CBD;"><a href="#" onclick="bascule_menu('#ID_RUBRIQUE',true);"><img 
					 <?php //affichage de la fleche haut/bas en fonction du contexte
					if (in_array( #ID_RUBRIQUE ,$hierarchie)) {	?>
					src="images/puce-sombre-on.jpg" 
				<?php } else { ?>
 
					src="images/puce-sombre-off.jpg" 
				<?php } ?>
					 id="menu_rub_puce_#ID_RUBRIQUE" alt="Développer/réduire la rubrique"/></a>
				<a class="menu_level_1 
				<?php if (in_array( #ID_RUBRIQUE ,$hierarchie)) {       ?>
							secteuron<?php if(#ID_RUBRIQUE == $actuelle) {?> rubrique<?php } ?>" 
					<?php } else { ?>
							secteuroff" 
					<?php } ?>
			href="#URL_RUBRIQUE" title="#DESCRIPTIF"><span>[(#TITRE|supprimer_numero)]</span></a></p>
 
			<?php } else { ?>
 
					<?php if (in_array( #ID_RUBRIQUE ,$hierarchie)) {       ?>
							<img class="menu_puce" src="images/puceronde-sombre-on.jpg" alt="puce" /><a class="secteuron menu_level_1<?php if(#ID_RUBRIQUE == $actuelle) {?> rubrique<?php } ?>" 
					<?php } else { ?>
							<img class="menu_puce" src="images/puceronde-sombre-off.jpg" alt="puce" /><a class="secteuroff menu_level_1" 
					<?php } ?>
			href="#URL_RUBRIQUE" title="#DESCRIPTIF"><span>[(#TITRE|supprimer_numero)]</span></a></p>
			<?php } ?>
 
 
		<B_rubriques_menu_dyna>
			<?php $level++; ?>
			<ul id="menu_rub_#ID_RUBRIQUE" <?php $last_rub=#ID_RUBRIQUE; $last_rub_script=0; if (in_array( #ID_RUBRIQUE ,$hierarchie)) {	?>
 
				style="display: block;">
			<?php } else { 
                                if ($level <= $maxlevel) { ?>
				style="display: block;">
			<?php } else { ?>
				style="display: none;">
			<?php } } ?>
		<BOUCLE_rubriques_menu_dyna(RUBRIQUES){id_parent}{par titre}>
			<B_nb_rubriques2><BOUCLE_nb_rubriques2(RUBRIQUES){id_parent}><?php $descendants = true;?></BOUCLE_nb_rubriques2></B_nb_rubriques2><?php $descendants = false;?><//B_nb_rubriques2>
			<li>
				<?php if (($last_rub != $last_rub_script) && (!in_array( #ID_PARENT ,$hierarchie)) && (#ID_PARENT != 0) ) {
                                        $last_rub = $last_rub_script; ?>
 
				<script type="text/javascript">document.getElementById('menu_rub_#ID_PARENT').style.display = 'none';</script>
			<?php } ?>
				<?php if ($descendants) { ?>
				<a href="#" onclick="bascule_menu('#ID_RUBRIQUE',false);"><img 
					<?php //affichage de la fleche haut/bas en fonction du contexte
					if (in_array( #ID_RUBRIQUE ,$hierarchie)) {	?>
					src="images/puce-clair-on.jpg" 
				<?php } else { ?>
					src="images/puce-clair-off.jpg" 
				<?php } ?>
					id="menu_rub_puce_#ID_RUBRIQUE" alt="Développer/réduire la rubrique"/></a>
 
 
				<?php if (in_array( #ID_RUBRIQUE ,$hierarchie)) {       ?>
							<a class="secteuron<?php if(#ID_RUBRIQUE == $actuelle) {?> rubrique<?php } ?>" 
					<?php } else { ?>
							<a class="secteuroff" 
					<?php } ?>
			href="#URL_RUBRIQUE" title="#DESCRIPTIF">[(#TITRE|supprimer_numero)]</a>
 
			<?php } else { ?>
					<?php if (in_array( #ID_RUBRIQUE ,$hierarchie)) {       ?>
							<img class="menu_puce" src="images/puceronde-clair-on.jpg" alt="puce" /><a class="secteuron<?php if(#ID_RUBRIQUE == $actuelle) {?> rubrique<?php } ?>" 
					<?php } else { ?>
							<img class="menu_puce" src="images/puceronde-clair-off.jpg" alt="puce" /><a class="secteuroff" 
					<?php } ?>
 
			href="#URL_RUBRIQUE" title="#DESCRIPTIF">[(#TITRE|supprimer_numero)]</a>
 
		<?php } ?>
 
				<BOUCLE_sous_rubriques(BOUCLE_rubriques_menu_dyna){id_rubrique}></BOUCLE_sous_rubriques></li>
		</BOUCLE_rubriques_menu_dyna>
		</ul>
 
		<?php $level--; ?>
		</B_rubriques_menu_dyna>
		</li>
 
</BOUCLE_secteurs>
</ul>
</div>
<p>&nbsp;</p>
 
  </div>
 
</div>

Ce n'est pas plutôt le contraire ? A vu de nez, on dirait que le comportement normal affiche un sous menu vertical.

Peut etre que jai mal dit, en fait le menu lui meme est horizontal mais les sous menus sont verticaux. Avec explorer 6, les elements du menu au lieu que ça soit horizontal se place de façon vertical et en ce moment il nya plus de sous menus.

Dans ton code, le backslash "\" permet de dire à IE 5.5 et moins d'ignorer la ligne avec le backslash. Donc le width fera 14.4em.

Par rapport à ce point,je dois enlever le backslash "\"?

Merci bien de votre aide!

[NoSmoking]

Bonjour,

Voici le code fourni par le navigateur firefox...

au vu du code fourni cela me surprendrais que cela soit ce que t'affiche le navigateur en faisant un CTR +U sous FifreFox par exemple.

Les règles incontournables d'utilisation de ce forum