If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

Enjoy an ad free experience by logging in. Not a member yet? Register.

Weird Vertical & Horizontal Alignment Issue...

Hello,

I have a weird issue with some vertical and horizontal alignment on my website. If you take a look at www.mixnob.com and look at the section at the bottom of the page where there are three tabs for FEATURED, ON SALE, and NEW products. There are four products across the page. Each product has a picture, and then the text below. So each of those four products should all align the same.

The problem is whenever I go to the home page, some of the images are aligned left, instead of center, and some of the images that are wider than they are tall will pull up the text below them so the ADD TO CART button is not aligned to the bottom.

But where it gets really weird is when I hit refresh on my browser, everything snaps into alignment correctly. So it seems the actual css is correct but only takes effect when the page has been refreshed. But the first time you go to the page, things are randomly out of alignment.

I have played around with the !important tag to try and force the css that is already there to take action but it sometimes doesn't seem to be working. I just want all four products to look the same. All ADD TO CART buttons should align to bottom, all images should be centered horizontally, and all images should be centered vertically as well.

Any help with this would be appreciated as I have pulled my hair out trying to get this to work correctly.

If you view the page in Firebug (see my sig) after it loads initially, and then again after refreshing/aligning, you can see that the .ProductImage div has had an inline style applied to it setting the height and width. This immediately suggests that there's some javascript setting (and equalising) the height.

In common.js I then find the function setProductListHeights - which is what is running and setting the height on refresh.

So, why isn't it running when the page loads initially? I can't check this, obviously, but I suspect that when the page first loads, the images have not loaded by the time that function fires, and hence it makes no changes. When the page is refreshed, the images are cached and hence the script has an effect. You could check this out by outputting some info from the function to the console.

This function is called from $(document).ready() in common.js. A possible solution would be to instead call it on $(window).load() - which won't fire until all the images have finished loading. I'd suggest having a try removing the code below from $(document).ready() (in red) and wrapping it like this:

Thanks so much for the help. I went in and did the suggested code modification but it doesn't seem to make any difference in the outcome. Unless I did something wrong, but it looks like the modified code is appearing live now with no change.

Ok, I finally got the common.js file to upload in a new location and override the old common.js file that the hosting company won't let me edit. Everything now points to the common.js file that has the modification.

I tested everything but now it results in the alignment problems and refreshing the browser doesn't change anything like it used to. Now everything stays misaligned no matter what you do in the browser.

Any additional help would be greatly appreciated. I hope I modified the code properly. I am a javascript novice. I really know very little of it. I am mostly a html/css designer.

I think there's an error somewhere in your amended js which is causing the whole thing to fail. However, my original code is still not solving the issue. Also, just noticed I typed $(window).ready() not $(window).load() in my code above. Oops.

This is, I think, because the $(this).load() in the script is never completing on the initial load. If I take this function out, then the script works on this test page.

Ok thanks again. I went ahead and uploaded the common.js file again with the newest revisions you made and, as you tested, everything works perfectly. So is there any issue with using it with what you took out? What was it that was taken out? I'm wondering if that will affect anything else in the site?

I did notice yesterday that it kept showing an error of syntax on line 85 (plus or minus a line) in Dreamweaver when I was originally editing it with your first suggestion. Would that maybe be the issue?

Again, thank you so much for the help. I appreciate it immensely as I have beat my head against the wall with this issue. I really need to learn some javascript. Do you know any ajax?

It shouldn't affect anything else as that code is solely devoted to setting the height on a row of products. I think the revised code pretty much replicates the functionality of the original code anyway.