Product Listing Alignment Problem with Column Grid Mod in FF

I successfully installed the Column Grid Mod and set it to 3 columns. In Internet Explorer everything shows up correctly. However, in Firefox the first row shows up correctly aligned but the second row does not. The second product listing on the second row is about 2 px to the left of where it should be. What is going on and how do I fix it?

We really need a link so we can see what's going on ...

BrandTim

I'm having the same problem - seems to have been after a FF update. The site is essereorganics.com and it renders fine in safari, but the Specials listing is odd.

I've seen a few mentions of this in the forums but no one seemed to have a fix. It has to do with the mozilla rendering engine, I guess, as it does the same thing in Camino, which I think uses the same engine.

Any thoughts would be appreciated...

moxy,

The problem on your site is with this code in stylesheet.css on line 1211:

br.clearBoth { 
position: absolute;
}

It's not a bug in FF. FF is rendering your site correctly.

As per the w3c:

"In the absolute positioning model, a box is explicitly offset with respect to its containing block. It is removed from the normal flow entirely (it has no impact on later siblings)."

Since the <BR> was absolutely positioned, it no longer clears anything in the normal flow. The specials products divs are floating left as far as they can. Notice that they are on the right only under lines where the products names are two lines long on the left but only one line long on the right. That is, the products with names which take up two or more lines have bigger boxes and so on the next line the products float up against them.

Temporarily apply this to the end of stylesheet.css and you'll see what's happening:

.centerBoxContentsSpecials {border: 1px red solid; width:32% !important; margin: 0;}

BrandTim

BrandTim - you are brilliant. I'm not sure what process you used to track it down (I whacked away with Firebug but just couldn't see it) but that was exactly the problem. I'm only beginning to get my head around what happens to the normal flow when you absolutely position elements, beyond the fact that you've removed them and that that can have some consequences.

This forum is a wonderful community. Thanks again, BrandTim.

Cheers

Jesse C

It was actually fairly easy to find ... after I refreshed the page a few times I noticed the correlation between the number of lines in the product name and the location of the next line's products .... that told me it was a clearing float problem .... then I just searched the stylesheet for 'clear' and it popped right out :smile:

Floats and positioning are by far the most confusing parts of CSS. I highly recommend http://css.maxdesign.com.au/floatutorial/ for understanding how it's supposed to work and http://www.positioniseverything.net/ for fixing it in IE :smile:

BrandTim

HELPP I FACING THE SAME PROBLEM.

My site is https://www.bebemummy.com

Please help me with my second column as the second column have alighnment problem with the product floating upwards, and I had done the above solution by it doesnt works can some kind souls help me out with the alighment :(

Sorry.

and its only for my " TEE SERIES" Page~~!

brocolee,

Your columns aren't moving around - your images are different heights and so don't push everything else down the same amount.

Short of making all your images the same height, you can try this:

#indexProductList .centerBoxContentsProducts a {
display: table-cell;
vertical-align: middle;
height: 80px;
}

I know it works in FF3, but didn't test it in any other browsers.

BrandTim

Hi,

I'm having a padding issue with the image, title, and description with this mod. Please take a look to wfcomputerpr.com/index.php?main_page=index&cPath=1_34 and you will see that the title of the image doesn't spread along a line very well, causing to have a title split into several lines (which is unnecessary in many cases).

Can someone point me to the right direction?

ideasgirl,

Did you get this fixed? I just took a look at the link you posted and I don't see the problem that you described.

BrandTim

Yes, I did... thanks!

hello

i have same issue here:

http://i-playsex.com/lenjerie-comestibila-c-20.html

can anyone help?:unsure:

thanks.

anybody??? :unsure:

For a start, try removing the class 'forward' from the div with id "productsListingListingTopLinks". That will help.

BrandTim

I seem to have a similar problem. Many times only some products in the second column are shown (at the bottom). I went through the suggestions in this thread, but no idea how to solve this.

see: www.babychild-carseats.com
and click on click on car seats
Anyone any idea? thanks so much!! :smile:

brandtim:

For a start, try removing the class 'forward' from the div with id "productsListingListingTopLinks". That will help.

BrandTim

where i can find this variabile to edit it?::shocking:
"productsListingListingTopLinks"

thanks
regards

uncentaur,

It's not a variable ... it's in the code in one of your template files.

Try looking in /path/to/your/shop/includes/templates/{YOUR_TEMPLATE}/templates/tpl_modules_product_listing.php around line 26.

BrandTim

ed75,

I cannot see the problem you describe. Can you post a direct link to a page where the problem occurs?

BrandTim

Hi Guys!

First time i am using the forum, so be nice if i sound like an idiot :)

I have problems in getting this grid view to work. I have been through the forum and installed and reinstalled the files, but no success.

I am only gettin one column, and looks ugly, so your advice will be very much appreciated.

http://trendyhandbags.co.uk/new-arrivals-c-58.html

Thanking you in advance!