affichage différent entre FF/Opera et IE

**trotters213** · 09/10/2006, 11h26

Aujourd'hui j'ai des problèmes

Sur mon site, j'ai un affichage différent entre FF et Opera/IE sur le pied de page.
Sous IE et Opera, il y a un grand espace entre le pied de page et le contenu tandis que sous FF, il n'y est pas.
Comment réglé ça?

merci d'avance.

**Candygirl** · 09/10/2006, 14h11

#pied_page {

clear:both;

margin:50px 17px 0px 11px;

padding:10px 0px 0px 0px;

text-align:right;

}

**trotters213** · 09/10/2006, 15h56

je crois avoir trouvé le problème, je sais pas si quelqu'un le savait mais les marges verticales se superpose donc quand tu as un élément A avec margin-bottom:10px; au dessus d'un élément B avec margin-bottom:20px; ça n'est pas la somme qui est prise mais la valeur la plus grande donc dans ce cas, 20px).
Je teste et je donne la soluce.

**Bisûnûrs** · 09/10/2006, 16h11

Envoyé par trotters213

je crois avoir trouvé le problème, je sais pas si quelqu'un le savait mais les marges verticales se superpose donc quand tu as un élément A avec margin-bottom:10px; au dessus d'un élément B avec margin-bottom:20px; ça n'est pas la somme qui est prise mais la valeur la plus grande donc dans ce cas, 20px).
Je teste et je donne la soluce.

Oulah ...

En effet, je viens de faire un test tout con :

Code :

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

1
2
<div style="margin-bottom:10px;width:100px;height:100px;background:#f00"></div>
<div style="margin-top:20px;width:100px;height:100px;background:#0f0"></div>

Et l'écart est bien de 20px et non de 30.

Tu viens de m'apprendre quelque chose, j'espère que ça va résoudre ton problème.

**Candygirl** · 09/10/2006, 16h21

Envoyé par trotters213

je crois avoir trouvé le problème, je sais pas si quelqu'un le savait mais les marges verticales se superpose

Oui, ça s'apelle la fusion des marges (collapsing margins). Dans ton cas à toi, la marge du top de ton footer ne se voit pas sur FF à cause des flottant au-dessus, par contre IE l'applique depuis le bas des flottants d'où l'espacement.

EDIT: Pour FF, vu que ton footer se trouve sous ton contenu, la marge s'applique depuis le bas de ton contenu et comme ton contenu n'a pas de hauteur, la marge commence depuis tout en haut. Tu peux essayer de mettre une marge de 400px au lieu de 50 tu verras alors un espace se créer sur FF uisque 400px est plus que tout ton contenu. Autrement tu peux tester ceci: tu gardes tes 50px dans le footer et tu rajoutes un <div style="clear:both;"></div> (juste pour un test) tout en bas de ton contenu pour faire descendre le contenu jusqu'en-dessous des flottants et là tu verras ton espace de 50px aussi sur FF.

**trotters213** · 10/10/2006, 09h51

Bon alors, j'ai réglé mon problème (c'est visible toujours au même endroit) en utilisant des padding plutôt que des margin.
Par contre j'ai un nouveau problème qui est apparu (sous IE pour pas changer) : le logo en haut à gauche de l'écran et à moitié effacé par le menu. J'ai donc essayé en mettant background:none à mon menu, en utilisant des z-index, ... rien à y faire, je ne vois pas pourquoi ça me fait ça.

**Candygirl** · 10/10/2006, 11h27

Envoyé par trotters213

je ne vois pas pourquoi ça me fait ça.

#menu {

position:relative;

width:100%;

}

ça sert à quoi ça ? Je pense que c'est lui le responsable.

Autrement je pense que tu as plus de hack IE que nécessaire. Plus tu as de trucs définis dans ton css plus tu as de source de problème. Perso j'ai fait un test en virant tous tes hack IE, le 100% de width du menu(le logo apparaît alors en entier), modifier 1.2 truc niveau du css du menu et du jscript et il me semble qu'on arrive à qqch de tout à fait correcte sur les 3 navigateurs. Si ça t'intéresse que je détaille, dis-le moi

**trotters213** · 10/10/2006, 11h36

Je sais que c'est lui mais si je l'enlève, j'ai des problèmes d'affichage au niveau du menu.

Détaille

**Candygirl** · 10/10/2006, 11h59

Envoyé par trotters213

Détaille

les modifs que j'ai faites:

- Vires tous els hack IE en bas
- Virer le width 100%
- virer le position relative du menu et je l'ai donné au #menu ul li que ce soit lui qui serve de référence pour le positionnement absolu
- ajouter un top:30px; left:0; pour le positionnement de tes sous-menu dans #menu ul li ul
- dans le jscript j'ai viré tout ce qui concernait opera et le positionnement; il reste ça pour la fonction montre (je n'ai pas regardé en détail si ça pouvait être simplifié):

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
function montre(id)
{
	var d = document.getElementById(id);
	var i;
	//pour chaque rubrique
	for (i = 1; i<=5; i++)
	{
		//si la souris ne pointe pas dessus, on n'affiche pas la liste déroualnte de sous-menu
		if (document.getElementById('smenu'+i)) 
		{document.getElementById('smenu'+i).style.display='none';}
	}
 
	if (d)
	{
		d.style.display='block';
	}
}

Je crois que c'est tout mais j'ai ptet oublié un truc

**trotters213** · 10/10/2006, 12h40

No comment, c'est nickel chrome.
Franchement je suis sur le c..
A y être je profite

: sur cette page comment faire pour ne pas avoir de décalage dans ma hr en bas gauche sans utiliser le hack IE (car c'est nikel sous FF et Opera mais j'ai un décalage sous IE).
De même pour l'espace entre le pied de page et le contenu sur la page d'accueil (premier post).
Quoi que tu me répondes MERCI, MERCI, MERCI, bref merci.

**Candygirl** · 10/10/2006, 13h30

En fait quand je dis que j'ai viré tous les hack IE c'est pour ne pas me prendre la tête avec et savoir lequel risque d'interférer. A part pour règler le problème de haslayout je n'en utilise perso quasi jamais.

Je n'ai pas le temps de regarder pour ton hr now, mais je jetterais un oeil plus tard si personne ne t'a donné de solution. S'il s'agit des 7px de marge que le hr a toujours par défaut sur IE, effectivement, c'est le genre de truc qui ne laissent guère le choix. Par contre, tu avais, par exemple, règlé le pg du double margin du float en redéfinissant des marges exprès pour IE. Là, en cas de changement du margin tu devras changer à 2 endroite, alors qu'en ajoutant un display:inline: sur l'élément le bug disparaît. Il est clair que c'est polluer le css avec une propriété inutile (un float fait automatiquement passer un élément en type block), mais c'est un gain de temps non négligeable pour le futur en cas de modif, donc perso, je préfère.

**trotters213** · 10/10/2006, 14h41

Envoyé par Candygirl

Là, en cas de changement du margin tu devras changer à 2 endroite, alors qu'en ajoutant un display:inline: sur l'élément le bug disparaît. Il est clair que c'est polluer le css avec une propriété inutile (un float fait automatiquement passer un élément en type block)...

Je suppose que tu voulais dire display:block; en tout cas en display block ça marche nickel.

Pour l'espacement entre le pied de page et le contenu je l'ai réglé avec le hack :

Code :

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

1
2
3
* html #pied_page {
padding:15px 20px 0px 11px;
}

mais bon

Si quelqu'un voit comment faire autrement je suis preneur.

**Candygirl** · 11/10/2006, 10h46

Envoyé par trotters213

Je suppose que tu voulais dire display:block; en tout cas en display block ça marche nickel.

Non, c'est bien display:inline; pour virer le bug du double margin de IE. Maintenant il me semblait qu'avant (lors de ton premier post sur la marge du footer) ton contenu #gauche, #milieu, #droite étaient en float:left avec un margin que tu avais rectifié pour IE. C'est dans ce cas-là qu'un display:inline; dessus aurait pu résoudre le problème. Mais actuellement tu as un padding. ALors soit tu as justement changé par un padding depuis pour éviter le bug, soit j'avais mal vu

Envoyé par trotters213

Pour l'espacement entre le pied de page et le contenu je l'ai réglé avec le hack :

Code :

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

1
2
3
* html #pied_page {
padding:15px 20px 0px 11px;
}

mais bon

Si quelqu'un voit comment faire autrement je suis preneur.

Ben perso je n'aurais pas monté ça comme ça. je ne sais pas si c'est voulu, mais tes 2 lignes ne sont alignées ni sur IE ni sur FF. D'ailleurs laisser la ligne séparée en deux c'est t'exposer à ce que que cela puisse varier suivant le contenu rajouté par la suite, la variation de la taille d'affichage suivant les cas,... Donc je ferais une seule ligne sur tout la largeur de l'écran avec l'image qui vient par-dessus. Et plutôt que de m'embêter avec un hr moche et problèmatique à styler sur tous les navigateurs je jouerais plutôt sur une bordure ou une image de fond.

**trotters213** · 11/10/2006, 11h47

merci pour ton aide Candygirl mais je ne peux pas car l'image qui apparait au milieu est aléatoire donc j'aurais un pied de page divisé ainsi (voir pièce jointe).

Pour le hack IE je l'utilise pour supprimer l'espace entre le pied de page et le contenu dans la page d'accueil car je ne vois pas d'autre solution.

J'ai changer mon hr dans la page d'accueil par une image mais sous IE j'ai un décalage encore, j'en ai marre de IE

**Candygirl** · 11/10/2006, 14h56

Envoyé par trotters213

merci pour ton aide Candygirl mais je ne peux pas car l'image qui apparait au milieu est aléatoire donc j'aurais un pied de page divisé ainsi (voir pièce jointe).

Je ne comprends pas bien à quel niveau se situe ton problème. Pourquoi un montage du genre n'irait-il pas ? (tu remarqueras un hack pour donne le layout à IE. Pour l'éviter, on pourrait simplement donner le width en px dans le css mais cela voudrait dire que, si tu décidais de changer par la suite le width du site, tu devrais aussi le retoucher ici ce qui est lourd, donc dans ce cas je préfère le hack, idéalement par un commentaire conditionnel, là je l'ai mis comme tu le fesais toi) :

Pièce jointe 5580

Envoyé par trotters213

Pour le hack IE je l'utilise pour supprimer l'espace entre le pied de page et le contenu dans la page d'accueil car je ne vois pas d'autre solution.

J'ai changer mon hr dans la page d'accueil par une image mais sous IE j'ai un décalage encore, j'en ai marre de IE

Ta page d'accueil n'est plus accessible, non? s'il s'agit d'un espace indépendant du margin de ton hr je pense qu'il y a moyen de faire sans.

**trotters213** · 11/10/2006, 17h12

Je te remercie CandyGirl pour ton aide.
J'ai finalement fais comme tu me l'avais dit (avec une image de fond dans le footer), du coup pas besoin d'utiliser le hack IE et l'affichage est le même partout.
Je suis désolé mais je ne peux plus te donner l'accès au site car il est restreint et il faut un mot de passe mais je t'assure que tu m'as aidé comme c'est pas permis.
Encore merci.

**Bisûnûrs** · 11/10/2006, 17h21

Les balises hr et ul/li c'est de la $%§&#; à styliser en CSS quand on veut être à l'identique sur tous les navigateurs. :/

**Candygirl** · 11/10/2006, 19h08

Envoyé par trotters213

Je suis désolé mais je ne peux plus te donner l'accès au site car il est restreint

Normal c'est aussi pour ça que j'ai mis un zip plutôt que le code directement dans le forum , vu les liens en absolu dedans, pas que ça reste

Cool et bravo si tu es arrivé à un résultat qui te convient, peut-être a+ au détour d'un topic

**trotters213** · 12/10/2006, 08h33

Envoyé par BisounoursJos

Les balises hr et ul/li c'est de la $%§&#; à styliser en CSS quand on veut être à l'identique sur tous les navigateurs. :/

Clair, maintenant que je le sais tu peux être certain que je ne les utiliserais plus (par contre ul et li sont bien pratique pour les menus déroulant bien que ce soit le bordel à styliser).

PS : merci à toi aussi BisounoursJos, je t'avais zappé 'scuz'.

**Bisûnûrs** · 12/10/2006, 08h49

Envoyé par trotters213

Clair, maintenant que je le sais tu peux être certain que je ne les utiliserais plus (par contre ul et li sont bien pratique pour les menus déroulant bien que ce soit le bordel à styliser).

PS : merci à toi aussi BisounoursJos, je t'avais zappé 'scuz'.

Heu bah, j'ai rien fait moi hein.

Tout le mérite revient à Candygirl.

affichage différent entre FF/Opera et IE

CSS

Discussions similaires

Partager

Partager