Aumentare spazio tra le schede prodotto nella pagina Browse3

[siouxs]

Ciao a tutti, ho un piccolo problema, ho messo uno sfondo al "browseProductContainer" tramite css, purtroppo però ottengo una sovrapposizione delle varie schede, come faccio ad aumentare il margine tra l'una e l'altra.
Ho provato con tutti i comandi css possibili ma niente non riesco a farli muovere.
Allego un'immagine cosi da speigarmi meglio.



Spero che qualcuno mi possa aiutare.

[nanoingegnere]

Avrei bisogno di vedere le regole CSS che hai definito per gli sfondi per vedere se magari qualcuna è quella giusta ma scritta non correttamente.

Ciao
Nanoingegnere

[siouxs]

Ciao e grazie prima di tutto per la risposta,
ti allego qui di seguito la parte css che controlla tutto il file browse.

Quello in grassetto è la parte in cui controllo lo sfondo, tutto il resto riguarda immagine, prezzo, pulsante aggiungi e quant'altro.

Sto rigirando anche stasera ma nn riesco a muoverla...


/** BROWSE PRODUCTS STYLES **/

.browseProductImage {
   margin-top: 2px;
   margin-left: 9px;

   vertical-align: middle;
   
   z-index:55;
   
   
   
}

.browseProductContainer {

   margin: 5px 0 5px 0;

   width:190px;
   height:310px;
 background: url( images/Scheda-Prodotto-2.jpg ) top center no-repeat ;
}

.browseProductTitle {
   font-size: 12px;
   font-weight: ;
   margin-top: 3px;
   margin-left: 10px;
   width: 100%;
   float: left;
   
   
}
   
.browseProductImageContainer {
   margin-top: 5px;
   
   width: auto;
   margin: 0px 0px 0px 0px;
}
.browseProductDetailsContainer {
   float: left;
   width: 70%;
}
.browseProductDescription {
   position: relative;
   width:160px;
   height:38px;
   line-height:12px;
   margin-top: 10px;
   color:white;
   margin-bottom: -37px;
   margin-left: 8px;
   z-index:5;
   
}
.browsePriceContainer {
   margin-top: 5px;
   margin-left: 25px;
   width:100%;
}
.browseAddToCartContainer {
   margin-top: 28px;
   margin-left: 5px;
   text-align:center;
   position: relative;
}
.browseRatingContainer {
   float: left;
   width:25%;
   margin: 3px;
   white-space: nowrap;
   
}
.element.style{
   
   float: left;
   margin-top:-5px;
   width:90%;
   }
   
   

[nanoingegnere]

.browseProductContainer {

   margin: 5px 0 5px 0;

   width:190px;
   height:310px;
 background: url( images/Scheda-Prodotto-2.jpg ) top center no-repeat ;
}
   

Per quello che vedo tu setti a 0 sia il margine destro che il sinistro. la sintassi della proprietà margin è:

margin: margin-top margin-right margin-bottom margin-left;

dunque hai sì settato i margini inferiori e superiori, ma non quelli destro e sinistro. Prova a sostituire la proprietà con:

"margin: 5px 2px 5px 2px;"

fammi sapere se così va.

Ciao
Nanoingegnere

[siouxs]

Ciao e grazie, purtroppo non ho risolto, tiene conto di tutti questi valori tranne che del margin-right.....
Non riesco a capire dove combina sto guaio.....

[siouxs]

Risolto......
Il corpo pagina era più stretto di qualche pixel dei quattro affiancati....come al solito la riposta più semplice è sempre quella giusta.
Grazie comunque a nanoingegnere per l'aiuto e la disponibilità.