Deviens folle à cause d'un simple CSS

**Camille01** · 23/04/2008, 17h50

coucou tt le monde !!

je dois faire un menu très simple utilisant du CSS.. et (malheureusement) ce dernier dois être compatible avec Internet explorer ET firefox.

voici le code très simple de la page :

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
<html >
	<head>
		<style type="text/css">
			.left {
				float: left;
				clear: left;
			}
 
			#content {
				margin-left: 205px;
				margin-top: 10px;
			}
		</style>
	</head>
	<body>
	    <div class="left">
						menu item 1<br/>
						menu item 2<br/>
						menu item 3<br/>
						menu item 4<br/>
						menu item 5<br/>
						menu item 6<br/>
						menu item 7<br/>
	    </div>
	    <div id="content">
	      texte d'intro
	      <table border="1" width="100%">
		  		<tr>
		  			<td >
		            Titre
		  			</td>
		  			<td >
								date
		  			</td>
		  		</tr>
	      </table>
	    </div>
	</body>
</html>

On voit tout de suite la différence quand on le lance avec internet explorer, il y a deux problemes :

- Des que je met une table apparait dans la zone div "content", elle apparait systématiquement en dessous du menu de gauche

. Alors que le texte d'intro peut apparaitre au même niveau normalement..
- J'aimerais que la table prenne toute la largeur de l'écran. Seulement si je met un width = "100%", celle ci deborde de l'écran, comme si elle ne prennais pas en compte la largeur déjà utilisée par le menu...

Voila, j'ai vraiment l'impression que ce que j'essaye de faire est basique, et je n'arrive pas a faire ce que je veux avec ce *&%* d'internet explorer!!

Si quelqu'un pouvait me donner une solution, pour un des deux problème, ou encore mieux, les deux, j'en serais très interessée !!

a+++,
Camille

**Er3van** · 24/04/2008, 09h35

A mon avis ça vient de ton margin-left dans ton css.
FF considère la marge par rapport au conteneur, alors que MSIE considère la marge par rapport à l'élément directement à gauche ( il me semble ).

C'est pour ça que sous FF pas de problème, ta marge ne pose pas de problème bien qu'elle soit inutile. Sous IE par contre, elle pose problème.
Enlève là et tu verras bien.

Pour ce qui est du 100%, c'est sans compter sur la taille de ta div left, donc c'est 100% + la largeur de ta div left, donc ça dépasse de l'écran. Essaye 80% ça devrait faire l'affaire, sinon il faut mettre tes deux div dans une div conteneur.

Et rajoute body { width : 100% ; height : 100% ; } dans ton css.

**Camille01** · 24/04/2008, 10h28

Envoyé par Er3van

A mon avis ça vient de ton margin-left dans ton css.
FF considère la marge par rapport au conteneur, alors que MSIE considère la marge par rapport à l'élément directement à gauche ( il me semble ).

C'est pour ça que sous FF pas de problème, ta marge ne pose pas de problème bien qu'elle soit inutile. Sous IE par contre, elle pose problème.
Enlève là et tu verras bien.

Pour ce qui est du 100%, c'est sans compter sur la taille de ta div left, donc c'est 100% + la largeur de ta div left, donc ça dépasse de l'écran. Essaye 80% ça devrait faire l'affaire, sinon il faut mettre tes deux div dans une div conteneur.

Et rajoute body { width : 100% ; height : 100% ; } dans ton css.

salut ! merci pour ta réponse !

En fait la marge est importante pour moi, il y a deux raisons :
1) Normalement le Div du contenu ("content") à un bord gris. Je ne je met pas la marge, le texte flotte bien a droite du menu (a cause du float:left), par contre l'élément DIV est réellement à X=0 sur la page. et le bord apparait donc a 0 au lieu d'etre a droite du menu
2) A cause du point ci dessus, si la taille verticale du contenu depasse celle du menu, le texte reviens se mettre a X=0 en dessous du menu. Alors que l'espace devrais etre vide.

J'ai par contre compris que si la table viens se mettre en dessous du menu, c'est parce qu'elle est trop grande. si je la met a 80% ca règle effectivement le problème. Mais vu que j'ai besoin de la marge (comme expliqué ci dessus), la taille de la table est interpretée différement dans FF et IE. Donc j'aurais bien voulu mettre 100%. J'ai donc essayé ce que tu propose, et avec le code suivant, ca ne change pas le problème (ici en plus c'est sans la marge et ca ne marche pas) :

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
<html >
	<head>
		<style type="text/css">
			.left {
				float: left;
				clear: left;
			}
 
			#content {
				/*margin-left: 250px;*/
				margin-top: 10px;
			}
			body { width : 100% ; height : 100% ; }
		</style>
	</head>
	<body>
		<div >
		    <div class="left">
			menu item 1<br/>
			menu item 2<br/>
			menu item 3<br/>
			menu item 4<br/>
			menu item 5<br/>
			menu item 6<br/>
			menu item 7<br/>
		    </div>
		    <div id="content">
		      texte d'intro
		      <table border="1" width="100%">
			<tr>
				<td >
		        	   Titre
		  		</td>
		  		<td >
					date
		  		</td>
		  	</tr>
		      </table>
		    </div>
		</div>
	</body>
</html>

voili voilu

**Candygirl** · 24/04/2008, 10h39

Bonjour,

Pour t'assurer une meilleure interprétation des css par IE, il est impératif que tu spécifies un doctype complet tout en haut de ta page, d'après ta syntaxe du xhtml, transitionnel ou strict, à toi de voir; par exemple:

Code html :

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">

En l'ajoutant, tu constateras que ton tableau prend alors les dimensions souhaitées. Par contre, il reste en-dessous de ton menu à cause du bug des 3px sur IE6- (IE6 considère que 100%+3px=pas la place de le mettre à côté=il le met au-dessous).

tu peux le rendre moins visible dans ton cas en dotant ton #content du layout, par exemple (à ne spécifier que pour IE6- pour plus de sécurité):

Code :

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

#content {height:1%;}

Pour t'en débarasser complètement c'est un peu plus long:

Code :

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

1
2
3
4
5
6
7
8
9
10
<!--[if lt ie 7]>
  <style type="text/css">
    #content {
      position:relative;
      left:-3px;
      margin-right:-3px;
      height:1%;
    }
  </style>
<![endif]-->

Ici, par le biais d'un commentaires conditionnel (à placer dans le head en-dessous de tes déclarations css) on spécifie que le correctif ne sera appliqué qu'aux versions d'ie inférieures à la 7 (le bug est corrigé sur ie7)

**Camille01** · 24/04/2008, 11h52

Envoyé par Candygirl

Bonjour,

Pour t'assurer une meilleure interprétation des css par IE, il est impératif que tu spécifies un doctype complet tout en haut de ta page, d'après ta syntaxe du xhtml, transitionnel ou strict, à toi de voir; par exemple:

Code html :

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">

En l'ajoutant, tu constateras que ton tableau prend alors les dimensions souhaitées. Par contre, il reste en-dessous de ton menu à cause du bug des 3px sur IE6- (IE6 considère que 100%+3px=pas la place de le mettre à côté=il le met au-dessous).

tu peux le rendre moins visible dans ton cas en dotant ton #content du layout, par exemple (à ne spécifier que pour IE6- pour plus de sécurité):

Code :

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

#content {height:1%;}

Pour t'en débarasser complètement c'est un peu plus long:

Code :

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

1
2
3
4
5
6
7
8
9
10
<!--[if lt ie 7]>
  <style type="text/css">
    #content {
      position:relative;
      left:-3px;
      margin-right:-3px;
      height:1%;
    }
  </style>
<![endif]-->

Ici, par le biais d'un commentaires conditionnel (à placer dans le head en-dessous de tes déclarations css) on spécifie que le correctif ne sera appliqué qu'aux versions d'ie inférieures à la 7 (le bug est corrigé sur ie7)

Merci infiniment, tout marche

! Le principal problème était le DocType ! J'ai ajouté le hack pour IE6 au cazou..

une excellente journée

Camille

Deviens folle à cause d'un simple CSS

CSS

Discussions similaires

Partager

Partager