Lien vers une ancre modifiant le positionnement de la page (IE)

Bonjour.
Je suis nouveau par ici. Jusqu'à maintenant j'ai toujours réussi à trouver des solutions à mes problèmes ici ou sur google, mais là je dois avouer que je bloque.

Voici mon problème. Je suis en train de réaliser une page avec une bannière horizontale et un menu vertical à gauche fixes. Pour cela j'utilise l'attribut position:fixed pour firefox et overflow:hidden/auto pour Internet Explorer.

Tout marche très bien sur les deux navigateurs excepté lorsque j'ouvre la page avec un lien vers une ancre dans le corps de la page (la partie scrollable) et ceci que sur IE. La div contenant le corp de la page est alors décalée vers le haut.

Je ne sais pas si c'est un problème connu sous IE, j'ai rien trouvé sur ce genre de problème.

Voici le css correspondant à la zone qui semble poser problème.

CSS générale :

body {
	padding: 107px 0 0 50px;
	height: 100%;
	background-color: #000000;
}

#container {
	height : 100%;
	width:100%;
	padding-top:50px;
}

#banner {
	background-image: url("images/fondbandeau.gif");
	background-position : top;
	background-repeat : repeat-x;
 	position:absolute;
 	top: 0px;
	left : 0px;
 	width: 110%;
	height : 150px;
	z-index:20;
}

#main_menu {
	position:absolute;
	margin: 0;
	padding: 0; 	
	left:0px;
	top : 111px;
	width : 50px;
 	height: 100%;
	text-align :left;
}

body>#main_menu {
	position: fixed;
}
body>#banner {
	position: fixed;
}

CSS spéciale pour IE :

body  {
	overflow: hidden; 
	margin-right:0px;
	margin-bottom:0px;
	
}
  
#container
 {
	overflow: auto;
}

#main_menu
{
	overflow: hidden;
}

Si cela ne vous suffit pas et que vous voulez voir toute la page j'essayerai de la mettre en ligne.

Voila

Bonjour chtom et bienvenue sur ce forum,

La page en ligne serait un plus, effectivement, non seulement parce que c'est plus parlant, mais aussi parce que tu n'indiques pas le code HTML auquel s'applique ta feuille de style, ce qui peut tout changer.

Mais avant tout, je voudrais te mettre en garde : utiliser la technique du bloc conteneur jouant le rôle d'un faux-body (on croit faire défiler la page, mais en fait on fait défiler le contenu de ce bloc conteneur) est une solution très imparfaite, qui peut effectivement poser un certain nombre de problèmes d'ergonomie (problèmes avec les liens internes, la navigation au clavier, etc.).

Dans l'état actuel des choses, j'aurais tendance à dire que fixer un élément à un endroit précis de la fenêtre (ce que fait le positionnement fixe) n'est pas tout à fait réalisable, et qu'une des meilleures solutions consiste à jouer sur une dégradation harmonieuse dans IE Win (avec un positionnement absolu plutôt que fixe, par exemple). Pour une production personnelle, je n'hésiterais pas à utiliser une telle dégradation pour IE6 et inférieurs (à noter qu'IE7 supporte le positionnement fixe). Mais s'il s'agit d'un projet professionnel avec des contraintes à respecter (maquette à implémenter), c'est effectivement une autre paire de manches.

Merci pour ta réponse.

Tout d'abord il ne s'agit pas d'un projet professionnel mais juste d'un nouveau thème phpbb pour ma guilde de wow. Donc vu que ce n'est pas hyper important, s'il n'y a pas de solution je ferais une dégradation harmonieuse.

Sinon, j'ai mis le thème en ligne sur un forum de test. Il se peut que certains liens ne marchent pas vu que le thème n'est pas destiné à ce forum.

Comme je le disais le bug se produit lorsqu'on clique sur un lien vers une ancre et en l'occurence vers un message précis (par exemple le dernier message posté).

Sur ce premier lien tout se passe bien à la fois sur FF et IE.

Mais avec un lien avec une ancre on obtient le fameux bug sous IE.

Voilà. J'espère que cela vous sera utile. Mon code est peut être un peu sale et surtout il est peut être ambitieu et pas trop standard de faire une telle page avec tout ce javascript et cette mise en page "tordue".

Jolie page, qui met bien en valeur les différents problèmes liés au positionnement fixe :

- sur un écran en 800x600, pour peu que l'on ait une barre de menu supplémentaire (barre Google ou Yahoo ou barre de favoris ou autre), le dernier élément du menu de gauche n'est pas visible ;
- même lorsque le site passe bien, un lien vers une ancre place cette ancre tout au début de la fenêtre du navigateur... c'est à dire sous l'en-tête en en position fixe ;
- globalement, on perd beaucoup d'espace avec cette bannière permanente... à titre personnel, j'aimerais autant qu'elle défile avec le reste de la page, ça faciliterait la lecture du forum (mais ce n'est qu'un avis personnel).

Par contre, avoir le menu de gauche toujours à portée de souris est assez appréciable.

[suite de l'avis personnel]En dehors des applications web demandant un accès facile à certaines fonctionnalités essentielles, je trouve que le positionnement fixe n'a qu'un intérêt limité.[/]

Pour le bug d'IE, il faudra avoir une version minimale de cette mise en page, pour vérifier si le bug vient des fondements même de cette méthode, ou s'il résulte de l'empilement de plusiers choses.

Merci pour ta réponse rapide.

Il est vrai que j'avais vu le problème du menu à gauche pour les petites résolutions.
Pour le problème de la bannière qui prend de la place, il y a un "bouton" qui appel une fonction javascript pour réduire la bannière en haut de la page.

Mais il est vrai qu'implémenter des parties fixes posent aussi pas mal de problèmes. Je pense que je vais faire deux css différents pour fixer ou non le menu et la bannière.

En ce qui concerne le bug IE, j'essayerai de faire une page hors forum avec ce style pour trouver l'origine du problème. Je repasserai par là si je trouve la réponse à mon problème.

En tout cas merci pour les conseils d'ergonomie d'IHM.