[Résolu] Séparation entre images juxtaposées sous Firefox

Bonjour,

J'ai un problème en CSS concernant la juxtaposition d'images et le rendu sous Firefox. Je m'explique :
sur la page d'accueil de mon site j'ai une petite boîte contenant du texte. Cette boîte doit s'afficher avec une "image" en fond.
J'ai mis "image" entre guillemets parce que l'image est en réalité décomposée en :

- un "top"
- un "center"
- un "bottom"

Le "center" est composé d'une image qui se répète indéfiniment en fonction de la taille du texte.
Le problème est que sous Firefox ni le "top", ni le "bottom" sont collés au "center" : il y a une séparation entre chaque élément que je n'arrive pas à ôter .. Sous IE6 je n'ai pas ce problème.

Ci-dessous un petit aperçu au cas où :



Une idée ?

Niniz
Modifié par Niniz (05 Jul 2007 - 12:31)

Pour t'aider, il faudrait voir ton code pour savoir comment sont insérées tes images...

Tu pourrais mettre un lien vers ta page, ou au moins nous donner ton (x)html / css ...

Ok, je copie colle juste la partie du code où y'a le bloc texte avec l'image de fond. Si cela ne suffit pas je mettrai le reste

<div id="loginTextTop">&nbsp;</div>
    
<div id="loginTextCenter">
	<p id="loginText">
        	<h:outputText value="#{kom.loginPage_loginText}"/>
         </p>
</div>

<div id="loginTextBottom">&nbsp;</div>

#loginTextTop {
                background:  transparent bottom left url(images/textBackTop.gif);
                background-repeat: no-repeat;
                width: 355px;
                margin:0 auto;
                padding: 0;
}


#loginTextCenter {
                    background: url(images/textBackMiddle.gif) top left;
                    background-repeat: repeat-y;            
                    width: 355px;
                    margin:0 auto;
                    padding: 0;
}

#loginTextCenter p {
                    text-indent: 1.5em;
                    font-size: 70%;     
                    text-align: justify;
                    margin-left: 15px;
                    margin-right: 15px;
}

#loginTextBottom {
                    background: transparent top left url(images/textBackBottom.gif);
                    background-repeat: no-repeat;
                    width: 355px;
                    margin:0 auto;
                    padding: 0;
}

Modifié par Niniz (05 Jul 2007 - 10:34)

Bonjour,

Je pense que ta solution n'est pas spécialement la meilleure : m'est avis que tu pourrais te contenter d'utiliser 2 div (voir 1 seul accompagné d'un titre si tu en as un dans ton encart) seulement.

Je te propose de jeter un coup d'oeil à ce sujet.
Tu as les propositions de Christian et de Florent qui devrait t'être utiles...

En fait j'ai trouvé mon problème : apparemment au niveau du paragraphe contenant le texte il y avait un ajout de marge supérieures et inférieures. Donc si je rajoute dans la partie #loginTextCenter p les valeurs margin-bottom:0; et margin-top: 0; ça fonctionne.

Maintenant je vais peut être changer un peu le tout pour utiliser que 2 div comme tu l'as précisé Cygnus.

Merci du tuyau