Problème positionnement, XHTML/CSS

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

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, 14h56

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, 15h06

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, 15h18

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

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

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, 15h38

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.

Problème positionnement, XHTML/CSS

Positionnement en CSS

Vue hybride

Discussions similaires

Partager

Partager