Product Listing Alignment Problem with Column Grid Mod in FF

[bizarrogir]

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?

[brandtim]

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

BrandTim

[moxy]

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...

[brandtim]

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

[moxy]

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

[brandtim]

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

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

BrandTim

[brocolee]

HELPP I FACING THE SAME PROBLEM.

My site is 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.

[brocolee]

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

[brandtim]

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

[ideasgirl]

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?