Problème positionnement, XHTML/CSS

**nygles** · 22/11/2006, 12h57

Bonjour la communauté.
J'ai besoin de votre aide pour résoudre un problème qui me turlupine depuiq quelques heures.
En effet, le positionement d'un de mes blocs (un formulaire de saisie du pseudo pour etre précis) n'est pas le même sous IE et sous firefox. J'ai beau cherché pourquoi, je ne trouve pas.

De plus, j'ai l'impression que ce coup ci , c'est IE qui respecte bien le positionement. Voici le rar de mon site (contient les pages html et css, et les images)

http://fraglan.esiea.free.fr/decoupe.rar

Voici le code xhtml:

Code HTML :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       <title>Mon super site</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
       <link rel="stylesheet" media="screen" type="text/css" title="Design 1" href="style.css" />
   </head>
 
   <body>
   <div id="page">
 
		<div id="logo">
 
		</div>
		<div id="header">
			<form method="post" action="traitement.php">
			<p><input id="form-pseudo" type="text" value="Pseudo"/></p>
			</form>
		</div>
		<div id="contenu"></div>
		<div id="menu">
		</div>
		<div id="footer"></div>
 
   </div>
   </body>
</html>

et le code css:

Code CSS :

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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
 
body
{
	margin: 30px 0 ;
	padding: 0 ;
	text-align: center ;
	background-image:url('./images/background2.png');
	background-position:center;
	background-attachment: fixed;
	background-repeat: repeat-x;
	background-color: #F4D491;
}
 
/* On met le padding à 0 pour le navigateur Opera qui définit des padding par défaut pour le body */
/* On utilise text-align: center ; pour Internet Explorer, c'est la seule façon de centrer les éléments de type block avec ce navigateur */
 
#page
{
	width: 744px ;
	margin: 0 auto ;
	text-align: left ;
	background-color:white ;
}
/* On définit la largeur de la division qui contient l'ensemble de la page à 770 pixels */
/* margin: 0 auto ; est la méthode correcte pour centrer les éléments de type block (comme les divisions), nous centrons donc cette division */
/* Il faut rétablir l'alignement à gauche que nous avons changé plus haut */
 
#logo
{
float:left;
width:230px;
height:159px;
background-image:url('./images/logo.png');
}
#header
{
float:left;
width:514px;
height:159px;
background-image:url('./images/header.png');
}
#form-pseudo
{
border:1;
width: 96px;
height: 10px;
position:relative;
top:0px;
left:0px;
}
#contenu
{
clear:both;
float:left;
width:546px;
height:1358px;
background-image:url('./images/contenu.png');
background-repeat: repeat-x;
}
#menu
{
float:left;
width:198px;
height:1400px;
background-color:white;
background-image:url('./images/menu.png');
background-repeat:no-repeat;
}
#footer
{
clear:both;
width:744px;
height:50px;
background-image:url('./images/footer.png');
}
pre
{
	overflow: auto ;
}
 
/* En passant on définit l'overflow de la balise pre à auto pour permettre d'afficher des barres de défilement si le texte contenu dans cette balise est trop grand */
* html pre
{
	width: 636px ;
}
/* On dois donner une largeur au pre à cause d'Internet Explorer, on ne va donc l'appliquer qu'à Internet Explorer en utilisant un "hack", la combinaison " * html " permet de n'appliquer ce qui suis qu'à Internet Explorer */

Merci d'avance pour votre aide, et longue vie a developpez.com

**Bisûnûrs** · 22/11/2006, 13h56

Tout en haut de ta feuille de style rajoute :

Code CSS :

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

1
2
3
4
*{
   margin:0;
   padding:0;
}

**nygles** · 22/11/2006, 14h06

Cela fonctionne mais j'ai encore remarqué quelquechose. Sous IE, il me met quand même 1px de marge en haut du formulaire. C'est propre a IE cela?

**Bisûnûrs** · 22/11/2006, 14h18

Oui, malheureusement il y a des marges sur IE qu'on ne peut pas supprimer ...

**nygles** · 22/11/2006, 14h23

Est ce que il y a un moyen de changer le positionnement juste pour IE?
car cette petite marge m'embette vraiment :p

**Bisûnûrs** · 22/11/2006, 14h38

Heu, tu peux essayer comme ça :

Code CSS :

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

1
2
3
* html #iddetonform{
   margin-top:-1px;
}

Mais je ne promets rien quant à la réussite de cette solution.

**nygles** · 22/11/2006, 14h59

Visiblement cela fonctionne!!

Merci beacoup pour ta rapidité et ton efficacité dans tes explications.
Je met résolu dans le titre

Problème positionnement, XHTML/CSS

Positionnement en CSS

Discussions similaires

Partager

Partager