[CSS] La moitié de la page disparaît sous IE!

Invité · 30/08/2006, 19h34

EDIT : Nouveau problème post #9

Bonjour,

Je suis en train de créer un site basé sur du CSS. Dans Firefox tout se passe bien, le pied! Sous IE quand je fais tourner la souris 2-3 fois sur l'écran j'ai la moitié de la page qui disparaît! Est-ce un bug connu? Une solution à cela?

J'ai validé mon CSS par le W3C donc Microsoft devrait un peu tenir compte des spécifications pour une fois ce serait sympa!

Merci pour votre aide.

webrider.

**blueice** · 31/08/2006, 09h53

Tu parles d'utiliser la mollette de la souris pour scroller ?
J'ai deja eu ce problème.

Il doit s'agir de Peekaboo...

http://www.positioniseverything.net/.../peekaboo.html

Invité · 31/08/2006, 10h17

En fait je n'ai même pas besoin de scroller, seulement faire aller la souris d'un bout à l'autre de l'écran.

En tous cas ça ressemble fort au lien que tu m'as donné, je vais essayer leurs conseils pour contourner ce bug et je te tiens au courant.

Merci!

Invité · 31/08/2006, 11h15

Le bug proviendrait des éléments flottants que IE ne rend pas convenablement. Méfiez-vous donc des validations CSS : votre CSS peut être valide et ne pas fonctionner sous IE car il ne respecte pas complètement les spécifications!

J'ai essayé les solutions proposées sur les différents sites que j'ai visité (dont ton lien) mais rien n'a pu régler mon problème. Et d'un autre côté je ne peux pas me passer des "float" !

C'est quand même chiant cette guéguerre des navigateurs!

Je crois que je vais recréer mon site en utilisant des tableaux pour la mise en forme générale et le CSS pour le texte et les images, à moins qu'il n'y ai une autre solution?

@++

webrider.

**blueice** · 31/08/2006, 11h30

Je crois que je vais recréer mon site en utilisant des tableaux pour la mise en forme générale et le CSS pour le texte et les images, à moins qu'il n'y ai une autre solution?

MAIS T'ES PAS FOU !!!

Montre nous ce que tu as fais ;-)

Invité · 31/08/2006, 11h58

Je voudrais bien montrer ce que j'ai fait mais c'est sur mon serveur local et pas encore de nom de domaine... et puis ce n'est que la mise en page pour l'instant.

Mon CSS fait plus de 200 lignes, ça va pas être vraiment lisible sur le forum...

J'ai fait quelques modifications sur le CSS et pour l'instant c'est stable sous IE mais le résultat n'est pas vraiment celui voulu sous ff.

Vachement bizarre que l'un se comporte d'une façon et l'autre d'une autre, ça ne nous facilite pas le travail!!

Je vous tiens au courant de l'évolution du problème et éventuellement les solutions que j'aurai trouvées!

@++

webrider

**blueice** · 31/08/2006, 12h25

C'est pour ca qu'il faut toujours penser simple et vérifier sous les navigateurs ta carcasse avant même d'avoir commencé.

Maintenant sans voir ce que tu as fais ca va être difficile d'en dire plus.

**Arnaud F.** · 31/08/2006, 13h05

Tu peux mettre tes fichiers de codes en pièces jointes si besoin

++

Invité · 31/08/2006, 17h19

Merci à tous pour vos réponses! J'ai trouvé une solution pour IE qui ne fonctionne pas sous ff maintenant!!

En fait, pour régler le problème qui est dû aux "float" avec IE, j'ai mis mes boites de type float dans un une autre boite mère non float. C'est ce qui était indiqué de faire dans le lien ici plus haut. Cela fonctionne bien mais ça casse ma présentation avec ff!!

Ce que j'essaie de faire c'est une présentation de produits pour un site e-commerce avec une image à gauche et une description à droite.

Voici un bout de HTML pour présenter le problème :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
<html>
<head>
<title> Problème CSS </title>
<link href="main.css" type="text/css" rel="stylesheet" media="all">
</head>
<body>
<div id='boite_centrale'>
<div id='boite_produit_img'> Image produit </div>
<div id='boite_produit_desc'> Description du produit </div>
</div>
</body>
</html>

Et le code 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
23
24
25
26
27
28
 
#boite_centrale {
    margin: 0;
    padding: 5px;
    height: auto;
    width: 100%;
    border: 1px solid #ccc;
}
 
#boite_produit_img {
    width: auto;
    height: auto;
    float: left;
    margin-right: 10%;
    padding: 5px;
    border: none;
}
 
#boite_produit_desc {
    width: auto;
    min-width: 30%;
    height: auto;
    float: left;
    margin: 0;
    padding: 5px;
    border: 1px solid #ccc;
    text-align: center;
}

Sous IE, les deux boites sont dans la boîte mère mais dans ff les deux boites sont en dehors et l'alignement est plus que bizarre.

Je n'ai pas de screenshot car aucun soft de ce type installé sur la machine

.

Une idée de ce que j'aurais zappé?

Merci!

**Arnaud F.** · 31/08/2006, 18h18

Envoyé par webrider

Je n'ai pas de screenshot car aucun soft de ce type installé sur la machine

T'es sous Linux? Kde? Tu peux installer ksnapshot si tu veux faire des screens

++

Invité · 31/08/2006, 18h40

Je développe sous windows (PHPEdit) mais le serveur est sous Linux (Gnome).

Pas d'idée sur mon problème?

Invité · 03/09/2006, 18h29

Vraiment personne? Pas la moindre idée?

Je commence à me sentir seul face à ce problème.

**MasterOfChakhaL** · 03/09/2006, 19h54

je pense que ceci va régler ton problème

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
#boite_produit_img {
    width: auto;
    height: auto;
    float: left;
    margin-right: 10%;
    padding: 5px;
    border: none;
}

#boite_produit_desc {
    width: auto;
    min-width: 30%;
    height: auto;
    float: left;
    clear: right;
    margin: 0;
    padding: 5px;
    border: 1px solid #ccc;
    text-align: center;
}

la propriété clear right indique que tu refuses tout élément sur la droite de ton élément, En conséquence de quoi, ca te fais passer à la ligne...

Invité · 03/09/2006, 22h36

Merci beaucoup pour cette solution, malheureusement ça n'a aucun effet sur le problème d'affichage. J'avoue ne pas comprendre que ff ne sait pas mettre une boîte dans une autre...

Après un bug sous ie, aurais-je découvert un bug sous ff?

Bonne soirée,

webrider.

Invité · 03/09/2006, 22h49

Voilà les captures d'écran, je pense que c'est très parlant!

Encore merci pour votre aide!

webrider

**MasterOfChakhaL** · 04/09/2006, 00h28

Salut,

Tes screenshots m'ont permis de mieux comprendre ton problème (je pense)

Tout d'abord, le comportement de firefox est le bon, sur ce coup, c'est ie qui bug
Un élément en float (ou positionné en absolu) sort du flux normal de la page. Il est donc tout à fait normal qu'un élément en float ne puisse pas être pris en compte pour déterminer la taille de l'élément parent.

L'astuce consiste donc a placer un élément qui reste dans le flux mais qui se positionne obligatoirement après l'élément en float.

Voilà ce que je te propose:

HTML:

Code :

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

1
2
3
4
5
	<div class="produit" >
		<img class="photo" src="..." alt="le produit..." />
		<div class="description">bla bla bla</div>
		<div class="spacer">&nbsp;</div>
	<div>

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
23
24
25
	.produit {
		margin: 0;
		padding: 5px 5px 4px;
		border: 1px solid #ccc;
	}
 
	.photo {
		padding: 5px;
		width: 100px;
		height: 100px;
		float: left;
	}
 
	.description {
		margin-left: 120px;
	}
 
	.spacer {
		clear: both;
		height: 1px;
		line-height: 1px;
		margin:0;
		padding:0;
		visibility: hidden;
	}

Invité · 04/09/2006, 10h30

Génial résultat impecable sous ie et ff!!

Je suis soulagé, je ne devrai pas changer toute la mise en page de mon site.

Merci à tous les intervenants et surtout à toi MasterOfChakhaL qui m'a donné THE solution.

@++,

webrider

[CSS] La moitié de la page disparaît sous IE!

CSS

Discussions similaires

Partager

Partager