table problems

They have: 304 posts

Joined: Dec 1999

Hi everyone,

I have an affiliation with Pet.com and I'm constructing "shop" pages.

The code for the products is generated by Pets.com and I only put it into tables.

Problem - the tables get their final "shape" only after all the product images are loaded. I don't want to start adding height & width parameters (there are dozens of products). I tried setting the table width, but that doesn't always help. If the images take too long to load, the whole page layout goes bad.

Examples of pages:

http://www.thecatsite.com/shop/xmas.html
http://www.thecatsite.com/shop/cattoys.html
http://www.thecatsite.com/shop/cathome.html

For comparison. have a look at one of my bookshop pages, where the images are stored on my server and I have defined their height and width.

http://www.thecatsite.com/shop/catbooks.html

Any ideas anyone?

Anat

Ken Elliott's picture

They have: 358 posts

Joined: Jun 1999

anat,
If I am not mistaken, the only way to resolve your problem would be to assign the images height and width attributes, that way the browser, already allocates the proper amount of space to reserve in your tables.

Adjusting your table's attributes will only effect the table. If the browser doesn't know how big the images are, it can't maintain proper spacing.

Pimpin like a pimp with an electrofied pimpin machine!

Vincent Puglia's picture

They have: 634 posts

Joined: Dec 1999

Hi anat,

Ken is not mistaken. Why wouldn't you want to put in the height & width? (I'm presuming the images are all of the same dimensions; if I'm wrong, inform pet.com to make them so, or up your rates.) Also, why don't you consider creating the product html dynamically with a for loop? You should be able to preload the products while the rest of the page is loading and display them immediately.

Vinny

Where the world once stood
the blades of grass cut me still

They have: 304 posts

Joined: Dec 1999

Hi Vincent,

I don't think the images are all the same size - but I will check. If I absolutely have to, I guess I'll just check them image by image and change the code that Pets.com generates (I will let them know of the problem - but I don't suppose they'll manage to change the code very fast).

Can you please elaborate about the for loop. I'm assuming it's a Java Script thing? I'm not that good at Java Script but I can give it a try. What does it do?

Thanks!

Anat

Vincent Puglia's picture

They have: 634 posts

Joined: Dec 1999

Hi anat,

What I meant is something like this:

for (i = 0; i < maxNum ; i++)
document.write("");

However as I was writing it, I noticed the following (edited from the last link you provided):

cover
Dancing With Cats

Why do you have 2 href tags within the cell? (I'm too tired to go back and look through all the code.) You should be able to get away with:

Dancing With Cats

Vinny

Where the world once stood
the blades of grass cut me still

They have: 304 posts

Joined: Dec 1999

Hi,

You're right and it's a mistake. I'll get to fixing it soon. In the first couple of pages I simply copied Amazon's code for the image and then their code for the text link. They don't provide a combined code for some reason. You're perfectly right of course and it's a very simple modification. I have changed it in other books pages like:

http://www.thecatsite.com/shop/bookshumor.html

http://www.thecatsite.com/shop/booksbehavior.html

and others. I'll tidy the codes on the other pages when I get to it - it works just as well, but it does have a messy look... Smiling

Thanks!

Anat

Vincent Puglia's picture

They have: 634 posts

Joined: Dec 1999

Hi anat,

Glad to have been of help. But, what do you mean by messy?

Vinny

They have: 304 posts

Joined: Dec 1999

You know, the source code works but it bugs the eye when you have double HREF tags when one is perfectly alright.

I like code to have a clean and tidy look, though I often produce messy source codes.

Anat.

Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.