Featured Products - border round product

[mattys]

i have now tweaked the margins so they show:

 
margin-right: -0.2em; /* add more negative value if the cell drop to lower line */
 margin-left: -0.2em; /* add more negative value if the cell drop to lower line */

But the boxes still don't have space inbetween?

I'm also not sure what this means - "add more negative value if the cell drop to lower line"

[seethrou]

I'm also not sure what this means - "add more negative value if the cell drop to lower line"

It may read as - "If the columnar cell drop to the next line /row under itself, then decrease the cell's width by adding the negative values (less than zero)"

The above suggestion is only simple adjustments for the columnar display. It only prevent the last display cell in a row from dropping to the next line /row under the row of itself. But seems work for both browsers without extra modifications.

But the boxes still don't have space inbetween?

Some points we should noted and to enable us to style it easier and speedup. May be we should look at the code and the css more closely and see how they work.

The following is page source of my local test, about the Featured Products in the index page and it has 3 cells in row. But I only captured the first row for the demo here.

<div id="featuredProducts" class="centerBoxWrapper">
<h2 class="centerBoxHeading">Featured Products</h2>
<div style="width: 33%;" class="centerBoxContentsFeatured centeredContent back">
<a href="http://localhost/zc136t/index.php?main_page=product_music_info&products_id=169">
<img width="100" height="80" title=" Sample of Product Music Type " alt="Sample of Product Music Type" src="images/samples/2_small.jpg"/>
</a>
<br/>
<a href="http://localhost/zc136t/index.php?main_page=product_music_info&products_id=169">Sample of Product Music Type</a>
<br/>
</div>
<div style="width: 33%;" class="centerBoxContentsFeatured centeredContent back">
<a href="http://localhost/zc136t/index.php?main_page=product_info&products_id=12">
<img width="100" height="80" title=" Die Hard With A Vengeance Linked " alt="Die Hard With A Vengeance Linked" src="images/dvd/die_hard_3.gif"/>
</a>
<br/>
<a href="http://localhost/zc136t/index.php?main_page=product_info&products_id=12">Die Hard With A Vengeance Linked</a>
<br/>
</div>
<div style="width: 33%;" class="centerBoxContentsFeatured centeredContent back">
<a href="http://localhost/zc136t/index.php?main_page=product_info&products_id=27">
<img width="100" height="80" title=" Hewlett Packard LaserJet 1100Xi Linked " alt="Hewlett Packard LaserJet 1100Xi Linked" src="images/hewlett_packard/lj1100xi.gif"/>
</a>
<br/>
<a href="http://localhost/zc136t/index.php?main_page=product_info&products_id=27">Hewlett Packard LaserJet 1100Xi Linked</a>
<br/>
</div>
<br class="clearBoth"/>

And in the form of code collapsed and simplified, they look like:

<div style="width: 33%;" class="centerBoxContentsFeatured centeredContent back">
<div style="width: 33%;" class="centerBoxContentsFeatured centeredContent back">
<div style="width: 33%;" class="centerBoxContentsFeatured centeredContent back">
<br class="clearBoth"/>

It can find that the width is always 33% for each cells in the row. And this related to setting in admin.
If set the numbers of cell to display to 2, and the width is 100% /2 = 50%
If set the numbers of cell to display to 3, and the width is 100% /3 = 33.3%
If set the numbers of cell to display to 4, and the width is 100% /4 = 25%

This is the point, the browser will output the width's value first in the html and then later apply the css effect if there is any.

In above page source, since the width is first fixed at 33%.
And then if in the css add style to the margin of left and /or right,
this will add the "overheads" to the widths.
Because the browser will not turn back again and adjust the width by itself.
This mean in the output for the row,
the total width are wider than 100%,
for:
( (33% + "overheads") x 3 ) > 100%

And in a fixed or limited width situation, this will cause the last cell drop to the next line /row. For there are not sufficent width or space for them to sit inline.

Therefore while style the columnar display, don't forget the above factors. In each adding of "overheads" to the widths, then in the same time trim off some of the inner width of the cells to provide spaces for the insertion of "overheads".


And the following is only suggestion and some of them you may not need and can be removed.
Please note that the width and percentage in below always related to each other, please adjust for yourself.

.centerBoxContentsNew, .centerBoxContentsFeatured, .centerBoxContentsSpecials, .specialsListBoxContents {
	margin: 1em 0.8em 0 0;
	padding: 0.5em 0 0.3em 0;
	border-style: solid; 
	border-width: 0.1em 0.2em 0.2em 0.1em; /* also add little shadow effect */ 
	border-color: #CCCCCC #B6B6B6 #B6B6B6 #CCCCCC; /* also add little shadow effect */ 
	height: 19em; /* adjust according to the maximum height of the product's data */ 
}

/* Columnar Cell width adjustment */ 
/* decrease the cell's inner width to provide spaces for the added overhead */
.centerBoxWrapper div /* #whatsNew div, #featuredProducts div, #specialsDefault div */ {
	max-width: 30.5%; 
}

/* Columnar Cell width adjustment */ 
/* decrease the cell's inner width to provide spaces for the added overhead */
/* For IE only */
* html .centerBoxWrapper div {
	width: auto;
        width: 30.5% !important;	
}

.centerBoxContentsNew a, .centerBoxContentsFeatured a, .centerBoxContentsSpecials a, .specialsListBoxContents a {
	display: block;
	text-align: center;
	padding-left: 6%;
	padding-right: 6%;
}

/* For IE only */
* html .centerBoxContentsNew a, .centerBoxContentsFeatured a, .centerBoxContentsSpecials a, .specialsListBoxContents a {
	display: block;
	text-align: center;
	padding-left: 3%;
	padding-right: 3%;
}

Hope this helps.

[mattys]

Hi Seethrou

Once again, thanks for your time.

I now added the css exactly as you have it above.

There are still no spaces between boxes and i'm still unsure of how to achieve this?

Also, the boxes in IE, for the top box especially, are pushing out to to the right side of the page and are not contained, which looks messy.

However, the dispaly in Fire Fox is much better, although still no spaces (right and left) between boxes still.

Screenshot FireFox:



Screenshot IE:



http://www.redwoodsurfshop.co.uk/surfshop/

[seethrou]

I have checked again and the above code still works for my remote test.
I only inserted my suggested code into the end of your stylesheet, this will override all the previous setting.

And the following is the screen capture from Firefox, with screen resolution of 1024 x 768.





With refer to your stylesheet now,
1. you inserted the suggested code at about line 399

2. and there is setting in your stylesheet under it at about line 587,
which in the section of /*list box contents*/.
And this will affect or override the suggested code at above.

/*list box contents*/
.centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew {
	margin: 1em 0em;
	}

Please check for any conflict between the related sections.
And check for the provided space is sufficient or not, for they are all relative.
And in some critical situations, a calculation or chart for each related sections and portions will give better view.

[mattys]

yeah, that was the problem, i disabled list box contents css

 
/*list box contents*/
.centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew {
margin: 1em 0em;
}

now looks ok in firefox, although the Featured Products head image is doing a wierd overlap thing

to be honest though, there are way more people that still use IE as there main browser and in this the cell have started to drop http://www.redwoodsurfshop.co.uk/surfshop/

Can you please advise how i might fix this?

I have adjusted the code below, but still getting boxes dropping

/* Columnar Cell width adjustment */
/* decrease the cell's inner width to provide spaces for the added overhead */
/* For IE only */
* html .centerBoxWrapper div {
width: auto;
width: 20.5%;
}

it was

/* Columnar Cell width adjustment */
/* decrease the cell's inner width to provide spaces for the added overhead */
/* For IE only */
* html .centerBoxWrapper div {
width: auto;
width: 30.5%;
}

[seethrou]

Please check again the codes for the IE, you missed the !important.

It is a hack for IE for it don't accept the attribute of max-width.
And you can compare it with the max-width in other related code for normal browser.

/* Columnar Cell width adjustment */ 
/* decrease the cell's inner width to provide spaces for the added overhead */
/* For IE only */
* html .centerBoxWrapper div {
	width: auto;
        width: 30.5% !important;	
}

For the Featured Products head image overlapping, may try to adjust the related section of code in css.

.centerBoxHeading {
margin-bottom: 1em;
}

[mattys]

Hi seethru

I really appreciate your help, almost there!

I cannot fix the box problem in ie

i have changed the important! bit of css to max width of 20%, but the boxes are still dropping

i have entered the code in the styleshhet correctly, so there shouldn't be any confilcts at all