table problems
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 posted this at 20:14 — 12th October 2000.
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 posted this at 23:32 — 12th October 2000.
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
anat posted this at 06:36 — 13th October 2000.
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 posted this at 07:17 — 13th October 2000.
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):
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
anat posted this at 11:46 — 13th October 2000.
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...
Thanks!
Anat
Vincent Puglia posted this at 15:44 — 13th October 2000.
They have: 634 posts
Joined: Dec 1999
Hi anat,
Glad to have been of help. But, what do you mean by messy?
Vinny
anat posted this at 16:09 — 13th October 2000.
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.