CSS pour Firefox ou pour ie

[Lilive]

Bonjour,
Je viens encore vous demander conseil...

Mon soucis est le suivant :
J'ai sur ma page 2 blocs définis en CSS de la manière suivante :

Code : Tout sélectionner

#consult
{
 left:10px;
 right:520px;
 height:500px;
 top:70px;
 position:absolute;
}

#carte
{
 width:500px;
 height:500px;
 top:70px;
 right:10px;
 position:absolute;
}

Ce sont 2 iframes (j'ai beaucoup de contenu et les deux blocs doivent rester à l'écran sans que l'utilisateur ait à jongler avec les ascenseurs). L'un affiche des infos et l'autre une carte. Le cadre de ma carte est fixé à 500 par 500 de façon à ce que ma carte ait toujours la même taille. Mon cadre d'info (#consult) n'a pas de largeur défini mais une position par rapport au bord droit : cela permet de positionner le bord droit de ce bloc toujours le long de la carte quelque soit la taille de la fenêtre.
Sous Firefox, c'est superbe, rien à dire !
Sous ie... (non ne riez pas ! ) l'iframe est affichée avec une largeur correspondant à une valeur par défaut (la largeur qu'affiche Firefox quand on désactive la feuille de style). Du coup ça fait une grande surface blanche au milieu : ie semble se ficher éperduement des positions de bordure de bloc que je lui indique !
Que faire docteur


Message envoyé avec : Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0)

[SB]

Le cadre de ma carte est fixé à 500 par 500 de façon à ce que ma carte ait toujours la même taille. Mon cadre d'info (#consult) n'a pas de largeur défini mais une position par rapport au bord droit : cela permet de positionner le bord droit de ce bloc toujours le long de la carte quelque soit la taille de la fenêtre.

Ben oui mais non. Parce que là tu poses comme postulat que tous tes visiteurs sont en 1024*768. Hors il y en a encore qui sont en 800*600 et il y en a de plus en plus qui sont en 1200*... voire plus pour qui l'un des cadres sera plus grand que l'autre ce qui risque de faire paraître ta page bancale.
Essaie

Code : Tout sélectionner

#consult
{
 position:absolute;
 left:10px;
 top:70px;
 width:48%;
 height:500px;
}

#carte
{
 position:absolute;
 right:10px;
 top:70px;
 width:48%;
 height:500px;
}

Ainsi même en redimensionnant la page il devrait toujours y avoir deux iframes de même taille aussi bien sous FF que IE.

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.0.1) Gecko/20060111 Firefox/1.5.0.1

[Lilive]

Je me suis mal exprimé : je ne veux justement pas avoir deux fenêtres de même taille mais :
- une fenêtre carte fixée à 500x500
- une fenêtre d'information qui exploite le reste de l'espace, donc qui se positionne à droite à partir de 520 pour laisser une petite marge avec la carte.
Et dans ce cas quelque soit la taille de l'écran, les fenêtres sont sencées utiliser tout l'espace...
Ce dont j'ai l'impression, c'est que ie ne tient pas compte du positionnement à droite s'il n'a pas de largeur définie. Peut-on forcer ie à respecter le right:520px ?

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0)

[SB]

Et dans ce cas quelque soit la taille de l'écran, les fenêtres sont sencées utiliser tout l'espace...

Ce n'est pas sur puisque tu as positionné tes frames en position:absolute. Je ne sais pas quel est le comportement normal dans ce cas mais ce n'est peut être pas de prendre tout l'espace comme c'est le cas en position statique. D'ailleurs si tu supprimes soit le left:10px soit le right:520px Firefox non plus ne lui fait pas prendre toute la largeur restante. En fait Firefox se sert de ces deux indications pour déterminer la largeur, ce qui est peut être une extrapolation de sa part.

Ce dont j'ai l'impression, c'est que ie ne tient pas compte du positionnement à droite s'il n'a pas de largeur définie. Peut-on forcer ie à respecter le right:520px ?

En fait je pense plutôt qu'il ne tient pas compte du positionnement à droite à partir du moment où il y a un positionnement à gauche.
Un code qui approcherait ce que tu veux mais qui supprime la marge de gauche :

Code : Tout sélectionner

#consult
{
 position:absolute;
 width:100%;
 right:520px;
 height:500px;
 top:70px;
}

#carte
{
 position:absolute;
 width:500px;
 height:500px;
 top:70px;
 right:10px;
}

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.0.1) Gecko/20060111 Firefox/1.5.0.1

[Asumbaa]

Bonjour,

Et en laissant celui de gauche dans le flux avec un margin-right de 520 et un width de 100% ?

Code : Tout sélectionner

#consult
{
 width:100%;
 height:500px;
 margin:70px 520px 0 20px;
} 

[Lilive]

Code : Tout sélectionner

#consult 
{ 
 position:absolute; 
 width:100%; 
 right:520px; 
 height:500px; 
 top:70px; 
}

Ce code place effectivement le bord droit de ma fenêtre contre ma carte mais le bord gauche se trouve loin loin en dehors du bord gauche de l'écran... sous ie comme sous ff.

Code : Tout sélectionner

#consult 
{ 
 width:100%; 
 height:500px; 
 margin:70px 520px 0 20px; 
}

Celui-ci place la fenêtre sur toute la largeur de la page (à cause du 100% je pense, mais si je le supprime, il met une taille par défaut) sous ff, alors que sous ie c'est nickel !

Je vais continuer à fouiller un peu (peut-être du côté du type de positionnement - absolute et relative -, mais si ça ne marche pas, je crois que je vais me résigner à mettre une largeur fixe, au détriment des gens qui auront des écrans immenses et malheureusement surtout au détriment de ceux qui en ont un plus petit...

Je vous tiens au courant, merci de votre aide.

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0)

[Lilive]

Bon...
J'ai essayé pas mal de petits changements : soit ça marche sous ff soit ça marche sous ie... donc pas intéressant du tout !
J'ai donc opté pour une largeur fixe de ma fenêtre d'info, en déclarant cette fenêtre d'infos avec un z-index plus important que celui de ma carte (en cas de réduction de la fenêtre, je préfère que ce soit au détriment de la carte que de mes infos...).

Ou alors... je fais un site pour Firefox et un site pour ie !
Serait-ce mal de demander en page d'accueil à l'utilisateur de sélectionner son type de navigateur afin de charger une feuille de style (nom passé en variable de session)

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0)