Thumbnails loading inccorectly in Browse template

[mdpny]

Hi,

On the Browse page of my site the thumbnails are, at times, loading all over the place instead of lining up neatly in the grid. Not sure if this is fixable by somehow creating a table for the thumbs to load into, or what causes it. If possible, I'd love to remedy it as it makes the page look sloppy.

The URL is: http://www.photos.mdpny.com/index.php?x=browse&pagenum=1

I've seen this issue on a lot of other PP sites, though some don't seem to have it the issue... so I figured I'd ask and see if there is some way to correct it, or not.

-mdpny

[nygorilla]

Just had a look at your site and it seems ok at the moment. If it happens again maybe take a screenshot to show what you mean.

[mdpny]

Hi,

I'm suprised more people have not come accross this issue, as I've seen it on a few other PP blogs. I can't imagine I'm the only one who has the problem =)


here is an image of what is happening:
http://www.mdpny.com/images/mdpny_archive_issue.jpg



I'm using Safari 2.0.3 on a dual 2.5ghz Apple G5 with 3.5gb of ram.

Anyone have any thoughts to why this happens? does it happen on a PC? I have no way to check it out on there.

Basically the problem only happens on the first loading, if I hit refresh it corrects the table until the next session.

-matthew

[blinking8s]

from what I have seen, its a common issue in safari, ive noticed it several times before...i'll have to dig a bit to try to find the reason of it

[Joe[y]]

i beleieve safari is dropping support for tables... at least they have in recent versions from what i've read... sounds a bit extreme but i don't think safari ever had any luck with tables. i see you're using tables - you really don't need to, width restricted <div>s should do that same job - especially with use of z-index.

basically my suggestion is drop the tables.

[RobbieMc]

In my experience it is Safari: I use Mac at home, but preview my development site at work every day, and while Safari messes it up on the first load everytime, I have never seen it happen on the PC at work. It also does not happen in Firefox Mac.

It is not tables, though, because I don't have any tables in my site (unless the <THUMBNAILS> tag produces a table that I was not aware of) and it still does it. I also don't have a solution other than to mention (as you already found) that once they all have loaded hit either refresh of the All category (same thing), which does not help your viewers.

Sorry to be of no help other than to confirm that it is a Safari issue.

[blinking8s]

yeah, i see it on most photoblogs and gallery sites where thumbnails are gnerated, i think it has to do witht he way things load in order of the code.

I'll look more into it tonight when I get home...has to be a documented reason, cause its not just pixelpost, ive seen it on many sites

[Connie]

it is perfect with OPERA 8.5 and Firefox 1.5.0.1

but validating your code (http://validator.w3.org/check?uri=http%3A%2F%2Fwww.photos.mdpny.com%2Finde x.php%3Fx%3Dbrowse%26pagenum%3D1&charset=%28detect+automatically%29&doctype=Inline&ss=1&verbose=1) brought 9 errors!

so maybe you might correct these HTML-errors and check again?

[mdpny]

Hi,

I can't seem to see what is causing these errors... I am using the same navigation as my homepage, which validates fine... There is at least one error that is pulling from the title of one of my entries (whcih are being generated with the thumbnails).

Anyone have any suggestions? I'm a bit baffled.

Anybody figure out what is causing Safari to do this? and is there a workaround? about 46% of my readers use Safari, so would love to combat the issue if there is a way around it =)

thx again for all your help!

-matthew

[Connie]

Matthew,

if you have done a search in the forum, you would have found that the use of some special characters in image title produce RSS failures

this is fixed in the new version, but not in the version which you use

so change all "&" especially in the image titles and everything will be ok

[mdpny]

Hi Connie,

I don't have any ampersands used in my titles. (I cleaned them out a while back, as they were keeping my home page from validating). I guess it was the apostrophe in one title that was throwing it off. I've edited the title and it fixed the errors. There are still a couple of missing alt tag errors on the page, which I'll correct this evening.

When you reference that it has been corrected, do you mean in the version soon to be released? (I think I am running the most recent 1.5beta, not sure tho) On any account, I'm guessing it's best to just wait for the full version to release before any more upgrading?

Still a bit confused about the Safari issue though. I have noticed it on a couple other non-PP sites, but there are some sites that generate thumbs that always load correctly, (slower.net comes to mind) so hoping there is a way around it.

thx again.. pixelpost is teriffic!

[Connie]

well, yes, Ampersand and apostrophes!

Since the release of 1.5BETA we did a lot of corrections and changes, so for sure the new version will not be the same than the released BETA

as for Safari, I cannot help, because I never used Safari as I am on WIN and LINUX

[Joe[y]]

Still a bit confused about the Safari issue though. I have noticed it on a couple other non-PP sites, but there are some sites that generate thumbs that always load correctly, (slower.net comes to mind) so hoping there is a way around it.

regarding safari, although i don't use it i stand by my point that tables are a problem in safari and you should avoid them. i know you use them on your site. try replacing the tables with <div> tags. hope that helps.

[mdpny]

Hey there Joey,

I tried to figure out how to make this behave without tables after your first response advising to eliminate them. I'll admit that I know so little about web coding that it's sort of embarresing, so I'm at a loss on how to swap out to using restricted <div>s. I'm including the code below that I'm using to generate that part of the page. If you have any suggestions of how to edit, i'd be so grateful!

-matthew



<table width="900px" border="0" align="center" cellpadding="4" cellspacing="5">
<tr>
<td colspan="2" valign="top">&nbsp;</td>
</tr>
<tr>
<td width="150px" valign="top">
<div class="nav">
<img src="../../images/mechanics/archive_head.gif" width="150" height="20">
<hr noshade>
<img src="../../images/mechanics/archive_current.gif" width="150" height="20">
<br>
<b>Category:</b> <CATEGORY_OR_DATE_NAME_PAGED_ARCHIVE>
<br>
<b>Page:</b> <ARCHIVE_PAGES_NUM>
<br>
<br>
<hr noshade>
<img src="../../images/mechanics/archive_select.gif" width="150" height="20"><br>
<BROWSE_CATEGORIES_PAGED>
<br>
<BROWSE_MONTHLY_ARCHIVE_PAGED><br>
<hr noshade>
<img src="../../images/mechanics/archive_selpage.gif"><br>
<THUMBNAILS_PAGES_LINKS>
<br>
<hr noshade>

</div></td>
<td width="750px" valign="top">
<div id="thumbmain"><THUMBNAILS_WHOLE_PAGED></div>
<br>
<div class="legals">

<br>
<br>
<br>
&copy;2005-06 MatthewDavidPowell. All rights reserved. <br>
</div></td>
</tr>
</table>

[Joe[y]]

sorry i don't really have the time to work on this properly. but here's a started point for you:


<div id="content">
<div id="thumbmain"><THUMBNAILS_WHOLE_PAGED></div>
</div>

<div id="sidebar">
<div class="nav">
<img src="../../images/mechanics/archive_head.gif" width="150" height="20">
<hr noshade>
<img src="../../images/mechanics/archive_current.gif" width="150" height="20">
<br>
<b>Category:</b> <CATEGORY_OR_DATE_NAME_PAGED_ARCHIVE>
<br>
<b>Page:</b> <ARCHIVE_PAGES_NUM>
<br>
<br>
<hr noshade>
<img src="../../images/mechanics/archive_select.gif" width="150" height="20"><br>
<BROWSE_CATEGORIES_PAGED>
<br>
<BROWSE_MONTHLY_ARCHIVE_PAGED><br>
<hr noshade>
<img src="../../images/mechanics/archive_selpage.gif"><br>
<THUMBNAILS_PAGES_LINKS>
<br>
<hr noshade>

</div>
</div>
<div class="legals">

<br>
<br>
<br>
&copy;2005-06 MatthewDavidPowell. All rights reserved. <br>
</div>
</div>


and add this to your stylesheet:


#content {
width:900px;
margin:0 auto;
padding:0;
text-align:left;
}
#main {
width:750px;
padding: 5px;
float:right;
}
#sidebar {
width:150px;
float:left;
}


ideally - work from a similar template you know that works and aim at editing it to produce what you have now.