Weird Vertical & Horizontal Alignment Issue...

[brookfloyd]

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.

Thanks

[brookfloyd]

Oh, and just to add to the description... it seems to act worst in FireFox. Safari is a little better but still exhibits the issues. And it doesn't do it every time either.

Thanks

[brookfloyd]

Anyone have a chance to check this out? I have been hacking away at it and I still can't seem to figure out a solution.

Thanks,
Brook Floyd

[SB65]

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:

$(window).ready(function(){
   if($('.Rating img').length > 0) {
		$('.Rating img').each(function() {
			if($(this).height() == 0) {
				$(this).load(function() {
					// Load rating img and find the tallest product.
					var imgName = $(this).attr('src').split('/');
					var imgKey = imgName.length-1;
					setProductListHeights(imgName[imgKey]);
				});
			} else {
				setProductListHeights();
				return false;
			}
		});
	} else {
		setProductListHeights();
	}
});

[brookfloyd]

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.

Do you have any other suggestions?

Thanks again,
Brook Floyd

[brookfloyd]

Hmmm, well it appears it didn't upload the file. I will have to check with the hosting company since it is not letting me upload the common.js file successfully.

[brookfloyd]

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.

Thanks in advance,
Brook Floyd

[SB65]

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.

The amended code is:

$(window).load(function(){
	if($('.Rating img').length > 0) {
		$('.Rating img').each(function() {
			if($(this).height() == 0) {
					var imgName = $(this).attr('src').split('/');
					var imgKey = imgName.length-1;
					setProductListHeights(imgName[imgKey]);
			} else {
				setProductListHeights();
				return false;
			}
		});
	} else {
		setProductListHeights();
	}
});

I've attached my amended js file as a text file.

[brookfloyd]

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?

Thanks,
Brook Floyd

[SB65]

You're welcome.

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.