Problème positionnement, XHTML/CSS
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:
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:
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 :)
