Mettre sur une seule ligne sur IE

**Lilouse** · 29/04/2010, 15h32

Bonjour

Je dispose de deux boutons et je souhaite les afficher l'un à coté de l'autre. cela fonctionne sur firefox et Opéra mais pas sur Internet Explorer (je déteste vraiment IE...)

Voila le code html pour mes boutons :

Code :

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

1
2
3
4
5
6
<form id="passertour" action="">
	<p><input type="submit" value="Passer" onclick="castor();return false;"/></p>	
</form>
<form id="abandonner" action="game.php" >
	<p><input type="submit" value="Recommencer"/></p>	
</form>

et mon css :

Code :

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

1
2
3
4
5
6
7
#passertour{
	display: inline-block;
}
 
#abandonner{
	display: inline-block;
}

J'ai essayé en ne mettant que "inline", ça ne fonctionne plus sur aucun navigateur j'ai aussi essayé de mettre une balise div autour de mes deux formulaires en mettant ce div inline et cela ne fonctionne pas non plus (et cela ne me change pas ma présentation de firefox)

Comment peut on mettre sur une seule ligne et que cela fonctionne sur IE ?

**Yorick** · 29/04/2010, 16h58

Salut,

Ajouter float:left; sur le premier form peut-être ?

**Lilouse** · 29/04/2010, 17h11

Ces boutons sont situé dans un div qui contient aussi des images (les images d'abord et les form ensuite), le tout étant centré. En faisant cela, mon premier bouton se retrouve complètement sur la gauche quelques soit le navigateur et l'autre bouton reste au milieu. En faisant cela on a quand même le deuxième bouton qui remonte sur internet explorer mais il n'est pas pour autant au même niveau que l'autre.

Même si ta réponse ne répond pas à ma problème, tu m'as beaucoup aidé pour un autre soucis que je ne voulais pas réglé pour le moment : une partie de ma page était situé à gauche et le reste centré sur ma page a coté ; des que la fenêtre était trop petite une partie de la page se superposé sur l'autre. Avec ce que tu me proposé ici, j'ai résolution cet autre problème.

**Yorick** · 29/04/2010, 17h39

Tant mieux

Sinon le code complet ou - ce serait idéal - une page test "aiderait les gens à t'aider".

**Lilouse** · 30/04/2010, 10h21

Comme tu veux.

J'ai fait un fichier index.php contenant la même chose que mon fichier d'origine. J'y ai enlevé tout ce qui était php, javascript et les attribut sur les évènements. ce qui donne ceci :

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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
	<head>
		<title>Rêve Pocket</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<link rel="stylesheet" type="text/css" href="css/testCartes.css" />
	</head>
 
	<body>
		<table>
 
			<!-- Espace du titre -->
			<tr><td colspan="2"><p id="pimgentete"><img src="images/graphioutline.png" alt="Image d'en tête"/></p><br/></td></tr>
 
			<!-- Le "gros" du site -->
			<tr>
				<!-- Le menu -->
				<td id="menu">
					<div id="contenumenu">
					</div>
				</td>
 
				<!-- Le contenu du site -->
				<td>
 
					<h1>Jeu Reve pocket</h1>
 
					<form id="compteurpoints" action="">
						<p id="rescastor">Castor :<input type="text" id="pointsducastor" value="0" size="5" maxlength="5" readonly="readonly" /> points <br/>
						Mots du castor :<br/>
						<textarea id="motsducastor" cols="10" rows="20" readonly="readonly"></textarea></p>
						<p>Moi :<input type="text" id="vospoints" value="0" size="5" maxlength="5" readonly="readonly" /> points <br/>
						Mes mots :<br/>
						<textarea id="vosmots" cols="10" rows="20" readonly="readonly"></textarea></p>
					</form>
 
					<div id="mescartes">
						<img id="main1" title="vide" src="images/cartes/vide.jpg" alt="image non trouvé" height="150" />
						<img id="main2" title="vide" src="images/cartes/vide.jpg" alt="image non trouvé" height="150" />
						<img id="main3" title="vide" src="images/cartes/vide.jpg" alt="image non trouvé" height="150" />
						<img id="main4" title="vide" src="images/cartes/vide.jpg" alt="image non trouvé" height="150" />
						<img id="main5" title="vide" src="images/cartes/vide.jpg" alt="image non trouvé" height="150" />
						<img id="main6" title="vide" src="images/cartes/vide.jpg" alt="image non trouvé" height="150" />
						<img id="main7" title="vide" src="images/cartes/vide.jpg" alt="image non trouvé" height="150" />
						<br/>
						<form id="passertour" action="">
							<p><input type="submit" value="Passer" onclick="castor();return false;"/></p>	
						</form>
						<form id="abandonner" action="index.php" >
							<p><input type="submit" value="Recommencer"/></p>	
						</form>
					</div>
				</td>
			</tr>
		</table>	
	</body>
</html>

Oui je sais mettre le tout dans un tableau c'est pas jolie mais c'est juste pour les tests par la suite ce que j'ai fait ici sera intégré dans un site existant et il n'y aura que la partie "contenu du site". J'ai laissé la partie menu vide dans mon exemple vu que j'en ai pas besoin.

le 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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
body { 
	background-color: #CC99FF; /* Couleur du fond */
	color:blue; /* couleur du texte */
} 
 
/* Le tableau fait la totalité de la page */
table {
	width:100%;
}
 
/* Titre en haut de page */
h1 {
	text-align:center;
}
 
/*Image d'en tête*/
#pimgentete {
	text-align:center;
}
 
/* Menu */
 
/* Dans la balise td */
#menu {
	width:200px;
	vertical-align:top;
}
 
/* Dans la balise div à l'intérieur de td */
#contenumenu {
	text-align:center;
}
 
/* zone pour compter les points */
#compteurpoints{	
	float: left;
}
 
/* paragraphe dans la zone des points qui concerne le castor*/
#rescastor {
	margin-top:-65px;
 
}
 
/* div contenant les images de la main et les deux boutons passer et recommencer */
#mescartes{
	text-align:center;
}
 
/* formulaire contenant le bouton Passer */
#passertour{
	display: inline-block;
}
 
/*Formulaire contenant le bouton Recommencer*/
#abandonner{
	display: inline-block;
}

ce qui donne comme apparence :
http://img163.imageshack.us/img163/5381/testfn.png
pour firefox
(le mauve c'est juste pour moi, je vous assure le rendu final ne sera pas comme ça)

pour les boutons sur IE :

J'espère qu'avec ça vous allez pouvoir m'aider

**Yorick** · 30/04/2010, 10h44

Disons que de manière générale le code complet et une page test permettent de voir si il n'y a pas un pb de structure et de tester rapidement des trucs (grace à des addon comme firebug).

Met les 2 boutons en { display: inline; zoom: 1 } et teste sur IE.
Si ça marche il faudra utiliser les commentaires conditionnels pour cibler IE uniquement.

**Lilouse** · 30/04/2010, 11h04

Toujours pas

J'ai remplacé

Code :

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

1
2
3
4
5
6
7
8
9
/* formulaire contenant le bouton Passer */
#passertour{
	display: inline-block;
}
 
/*Formulaire contenant le bouton Recommencer*/
#abandonner{
	display: inline-block;
}

par

Code :

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

1
2
3
4
5
6
7
8
9
10
11
/* formulaire contenant le bouton Passer */
#passertour{
	display: inline;
	zoom: 1;
}
 
/*Formulaire contenant le bouton Recommencer*/
#abandonner{
	display: inline;
	zoom: 1;
}

en plus de ne pas fonctionner sur IE, ça ne fonctionnait plus sur firefox

J'ai donc créé une class memeligne :

Code :

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

1
2
3
4
.memeligne{
	display: inline;
	zoom: 1;
}

que j'ai placé dans mes deux p dans un premier temps, puis directement dans le input et enfin dans les deux form et dans tout les cas ça ne marche pas. j'ai aussi essayé avec inline-block à la place de inline.

**Yorick** · 30/04/2010, 11h19

Chez moi ça marche sur IE7 (enfin IE8 en mode IE7)

IE8 n'a pas besoin de cette triche car il gère bien le inline-block.

**Lilouse** · 30/04/2010, 11h37

J'ai aussi IE8 et chez moi ça ne fonctionne pas...

**Yorick** · 30/04/2010, 11h50

Sous IE8 ça doit fonctionner avec les mêmes règles de FF, soit inline-block tout seul.

Si ça ne marche pas, appuie sur F12 pour ouvrir les outils de dev et regarde en haut à droite de la fenêtre : mode navigateur et mode document doivent être paramétrés sur IE8.
Si t'as ça et que ça ne fonctionne pas je ne vois pas d'où peut venir le pb

**Lilouse** · 30/04/2010, 13h43

ah maintenant ça fonctionne \o/

Merci beaucoup mais il suffit que je mette le mode de document à IE7 pour que cela ne fonctionne pas ...

**Yorick** · 30/04/2010, 13h54

Ben oui normal (ceci dit j'ai pas pigé le rôle de mode navigateur et mode document

)
Pour IE8 et FF tu dois utiliser les inline-block.
Pour IE7 l'autre règle.

Il faut utiliser les commentaires conditionnels pour cibler IE7 et inférieur.

Mettre sur une seule ligne sur IE

Tableau en CSS

Discussions similaires

Partager

Partager