Probleme d'affichage sour mozilla

Bonsoir,

j'ai fait un bout de code qui fonctionne trés bien sous IE, par contre sur mozilla c'est la cata...

voici le contenu CSS

<style>
ul {
margin: 0px 0px 0px 0px;
}

p {
padding: 0;
margin: 0;
}

p.center {
text-align:center;
}

div {
margin: 0px 0px 0px 0px;
padding: 0px;
}

a {
text-decoration: none;
color: #000066;
}

#featured {
width:572px;
text-align:center;
}

#featuredheading {
background:url(images/infobox/coup_de_coeur.gif) no-repeat;
height:29px;
}

#featuredbottom {
background:url(images/infobox/news_bas2.gif) no-repeat;
height:9px;
}

#featuredid {
background:url(images/infobox/nesw_centre2.gif) repeat-y;
padding: 0px 5px 5px 5px;
text-align:center;
position:inherit;
}

div#featuredcontenu{
display:inline;
width:150px;
border-style:dotted;
border-width:thin;
border-color:#FFCCFF;
padding: 8px 5px 8px 5px;
margin: 5px 10px 5px 10px;
background-color:#F5D9DA;
}
</style>

et la partie html

<div id="featured">
    <div id="featuredheading"></div>
	<div id="featuredid">
	   <div id="featuredcontenu">
<a href="#"><img src="images/" border="0" alt="#" title="#" width="95" height="110"></a>
<p>toto hgfh fgh gfhfgh fghgfh fghgfh fghghfg</p>
<p>Price</p>
<p>Cout</p>
</div>
	  <div id="featuredcontenu">
<a href="#"><img src="images/" border="0" alt="#" title="#" width="95" height="110"></a>
<p>toto hgfh fgh gfhfgh fghgfh fghgfh fgh fghfg</p>
<p>Price</p>
<p>Cout</p>
</div>
	  <div id="featuredcontenu">
<a href="#"><img src="images/" border="0" alt="#" title="#" width="95" height="110"></a>
<p>toto hgfh fgh gfhfgh fghgfh fghgfh fgh fghfg</p>
<p>Price</p>
<p>Cout</p>
</div>
	  <div id="featuredcontenu">
<a href="#"><img src="images/" border="0" alt="#" title="#" width="95" height="110"></a>
<p>toto hgfh fgh gfhfgh fghgfh fghgfh fgh fghfg</p>
<p>Price</p>
<p>Cout</p>
</div>
	</div>
	<div id="featuredbottom"></div>
</div>

Est ce que j'ai fait quelques choses qui ne va pas ?

En gros ce que je cherche a faire, c'est un tableau comme ceci

##########################
# [IMAGE1]    [IMAGE2]   [IMAGE3]   #
#                 [IMAGE4]                   #
##########################

si il y a plus de 3 images, elle pas a la ligne est sont automatiquement centrer. Sous IE tout fonctionne...Sous Mozilla..ca ressemble a rien

Encore merci

++
fab
Modifié par fab27 (09 Mar 2005 - 21:08)

Tu n'aurais pas un exemple en ligne?
Parce que j'arrive pas trop a visualise?

Ps: dsl pour l'accent, j'trouve pas l'accent sur un clavier qwerty sur FF

Bonsoir,
De ce que je comprend cela à trait à la présentation d'un produit avec son nom, une photo, son prix.
Peut-être faudrait-il envisager un tableau, qui ne me choquerais pas dans ce cas de figure.
Ou bien peut-être une liste de définition qui se prêterait bien à ce cas (si j'ai pas faux ), mais pour obtenir le résultat souhaité tu devrais probablement multiplier les dl en float, ce qui ne me parait pas souhaitable.

ps: dans ton code tu utilises plusieurs fois la même id qui devrais être unique dans ta page. Pour ces cas là privilégie plutôt une classe, ou mieux l'héritage.

Pour que vous vous faciez une idée voici une url..qui montre l'exemple

Encore merci

http://www.premiumwanadoo.com/jlutin/catalog/test.htm

++
fab

PS : j'aimerais savoir qu'elle est la différence entre un id= ou une class= ? j'obtient le même resultat...si je change cela.

fab27 a écrit :

PS : j'aimerais savoir qu'elle est la différence entre un id= ou une class= ? j'obtient le même resultat...si je change cela.

=> FAQ

Je ne suis pas certain d'avoir compris ce que tu veux, mais voici quelques captures d'écran :

Explorer


Firefox


Safari

Modifié par Stephan (10 Mar 2005 - 05:36)