div pas collées entre elles ds firefox

alors que ds IE c'est impeccable !

30 novembre 2005 à 19:37:33

Slt,
J'ai une image verticale découpée en trois parties, dans trois div superposées. Le haut et le bas sont fixes, et le milieu est répété (dans le css).
L'affichage dans IE est impeccable : les div sont bien collées et j'ai bien la continuité de l'image.
Mais dans Firefox, j'ai un écart d'au moins 15px entre le haut de l'image et le milieu, et pareil entre le milieu et le bas de l'image, comme si les div étaient écartées. D'où ça vient à votre avis ?
L.V.

<!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>Essai PHP</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="css.css" rel="stylesheet" media="screen" type="text/css" />
</head>
<body class="body">

<div id="entete"><img src="images/accueil-fr.gif" /></div>

<div class="flottgauche">
<div><img src="images/fongauch_haut.gif" /></div>
<div id="menu" class="menu">
<p>Accessoires</p>
<p>Haute-couture</p>
<p>Joaillerie</p>
<p>Lingerie</p>
</div>
<div><img src="images/fongauch_bas.gif" /></div>
</div>

<div id="pub" class="flottdroite"></div>

<div id="corps" class="corps">
<h1>fffffffffffffffff</h1>
<p>ggggggggggggg</p>
<p>Sgtr hjk</h1>

</div>

<div id="pied"></div>
</body>
</html>

css:

body
{
width: 750px;
border: solid #666666 1px;
margin: auto;
margin-top: 20px;
background-color: black;
}

p, h1, h2, li
{
color: white;
}

#menu
{
background: url("images/fongauch_milieu.gif") repeat;
width: 170px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 16px;
color: #FFFFFF;
text-decoration: none;
text-align: center;
line-height: 10px;
}

.flottgauche
{
float: left;
}

.flottdroite
{
float: right;
}

#corps
{
margin-left: 170px;
margin-right: 160px;
border: solid white 1px;
}

#pub
{
width: 160px;
border: solid red 1px;
}

Anonyme

30 novembre 2005 à 19:42:06

Un lien vers ton site pour pouvoir visualiser s'il te plait

La vieille

30 novembre 2005 à 19:47:17

Ben c'est pas en ligne encore...

Personne n'a une petite idée ?...

La vieille

1 décembre 2005 à 8:34:41

C'est arrivé à personne une histoire comme ça ? Etonnant...
L'image n'est pas en ligne, mais elle n'est pas très compliquée à imaginer je crois :
Le haut fait 170x3.
Le milieu fait 170x1.(image répétée)
Le bas fait 170x3.
Et entre le haut et le milieu, et entre le milieu et le bas, il y a un espace de 10 à 15px.
Mais QUE dans Firefox !

b.moyet

1 décembre 2005 à 9:04:10

En mettant le margin de tout tes divs a 0?

La vieille

1 décembre 2005 à 9:43:55

Ça change rien.
J'ai essayé de mettre celle du haut avec valign="bottom", et celle du bas valign="top", mais ça fait rien du tout non plus.
Y'a pas un endroit où sont répertoriés les différences entre IE et Firefox suivant les balises ? Il me semblait avoir vu ça, mais je ne retrouve pas...

jp949

1 décembre 2005 à 9:58:10

dans body tu as margin:auto; ca peut influer sur les elements enfants donc a retirer
2eme si tu veux supprimer la lmarge sur firefox tu mets : margin-top:-15px ! important; et pareil pour tous les div concernés

quentin49

1 décembre 2005 à 9:59:20

tu met:

peut-on voir dans ton css la partie " entete ", car je pense que tu as oublié de nous le montrer ?

La vieille

1 décembre 2005 à 10:24:16

Eh ben ça a mis un de ces foutoirs !!!
D'abord j'avais retiré le margin:auto; mais ça ne changeait rien.
En mettant des valeurs négatives, et en tâtonnant, je suis arrivée à recoller entre elles les div MAIS :
- maintenant dans IE, c'est n'importe quoi je n'ai plus que le bas de mon menu, et l'image du haut est sous celles du haut et du milieu.
- dans firefox, ma div menu n'est plus alignée comme avant sur les deux qui sont à sa droite, mais surélevée.
Je crois que je vais faire avec des tableaux...

J'en suis donc là :

<!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>Essai PHP</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="css.css" rel="stylesheet" media="screen" type="text/css" />
</head>
<body class="body">

<div id="entete"></div>

<div class="flottgauche">
<div class="border"><img src="images/fongauch_haut.gif" /></div>
<div id="menu" class="menu">
<p>Accessoires</p>
<p>Haute-couture</p>
<p>Joaillerie</p>
<p>Lingerie</p>
</div>
<div class="border"><img src="images/fongauch_bas.gif" /></div>
</div>

<div id="pub" class="flottdroite"></div>

<div id="corps" class="corps">
<h1>fffffffffffffffff</h1>
<p>ggggggggggggg</p>
<p>Sgtr hjk</h1>

</div>

<div id="pied"></div>
</body>
</html>

body
{
width: 750px;
margin-top: 20px;
background-color: black;
}

p, h1, h2, li
{
color: white;
}

.border
{
margin-top:-28px;
margin-bottom:-21px;
}

#menu
{
background: url("images/fongauch_milieu.gif") repeat;
width: 170px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 16px;
color: #FFFFFF;
text-decoration: none;
text-align: center;
line-height: 10px;
margin: 0px;
}

.flottgauche
{
float: left;
}

.flottdroite
{
float: right;
}

#corps
{
margin-left: 170px;
margin-right: 160px;
border: solid white 1px;
}

#pub
{
width: 160px;
border: solid red 1px;
}

jp949

1 décembre 2005 à 10:37:42

tu gardes une valeur pour FF
pour IE tu remets en dessous margin-top:0px comme avant

Gamer_man

1 décembre 2005 à 10:39:31

Trop de code, t'aurais mis que les lignes qui posent problème j'aurais essayé de répondre..

Bisous

La vieille

1 décembre 2005 à 14:09:09

Citation : jp949

tu gardes une valeur pour FF
pour IE tu remets en dessous margin-top:0px comme avant

Où ça ?
Tu peux m'expliquer stp... je comprends pas...

Pour IYA lalalère...
Trop de code ??????????? Ben dis donc. T'as peur ???

Inquisitor

1 décembre 2005 à 14:55:25

J'ai testé avec le strict minimum:

<!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>Page de test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="style1" href="test.css" />
<link rel="stylesheet" media="print" type="text/css" title="style2" href="essai.css" />
</head>
<body>

<div id="premier"></div>
<div id="second"></div>
<div id="troisieme"></div>

</body>
</html>

#premier
{
width: 200px;
height: 200px;
border: 1px solid black;
}

#second
{
width: 200px;
height: 200px;
border: 1px solid black;
}

#troisieme
{
width: 200px;
height: 200px;
border: 1px solid black;
}

Et les divs sont bien collés. Tu as tenté le coup en spécifiant "margin-top: 0px;", "margin-bottom: opx;" "padding-top: 0px;" et "padding-bottom: 0px;"?

La vieille

1 décembre 2005 à 15:38:36

Mais moi aussi j'ai fait le test en mettant des border à chaque div. Et elles étaient bien collées. Le problème c'est que en mettant l'image dedans elle "écarte" la div bien plus que ses propres dimensions, comme s'il y avait une marge sur l'image...
Je vais tenter ce que tu proposes...

jp949

1 décembre 2005 à 16:14:50

Si je te suis bien ce n'est pas du margin que tu as mais du padding

La vieille

1 décembre 2005 à 16:32:16

Oui c'est ça. Enfin si je te comprends bien...
Je mets une image de 3px de hauteur dans une div, et la div prend comme dimension à vue de nez 20px de hauteur (je le vois grâce à un background-color). Alors qu'elle devrait se tenir tranquille et ne faire que 3px de hauteur non ??????
Le problème se pose pour fongaucg_haut et fongauch_bas.
Je remets le code ici :

<!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>Essai PHP</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="css.css" rel="stylesheet" media="screen" type="text/css" />
</head>
<body class="body">

<div id="entete"><img src="images/accueil-fr.gif" /></div>
<div>

<div class="flottgauche">
<div><img src="images/fongauch_haut.gif" /></div>
<div id="menu" class="menu">
<p>Accessoires</p>
<p>Haute-couture</p>
<p>Joaillerie</p>
<p>Lingerie</p>
</div>
<div><img src="images/fongauch_bas.gif" /></div>
</div>

<div id="pub" class="flottdroite"></div>

<div id="corps" class="corps">
<h1>fffffffffffffffff</h1>
<p>ggggggggggggg</p>
<p>Sgtr hjk</h1>

</div>

<div id="pied"></div>
</body>
</html>

body
{
width: 750px;
border: solid #666666 1px;
margin: auto;
margin-top: 20px;
background-color: black;
}

#menu
{
background: url("images/fongauch_milieu.gif") repeat;
width: 170px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 16px;
color: #FFFFFF;
text-decoration: none;
text-align: center;
line-height: 10px;
}

En fait le titre du topic est faux, mais bon... je savais pas quand j'ai posté.

Et je peux pas l'éditer !