Topic: Re-size glitch when switching between pages

Hi guys,

I built my website using slices and dreamweaver - embedding simpleviewer pro in a space in the middle of each gallery page.
Everything looks great except when switching between navigation pages the slices re-jumble themselves.  Could this be to do with the sizing of the gallery whilst it's loading? Any suggestions?

Website here - www.emmelineillustration.com

Thanks!

Emmeline

Re: Re-size glitch when switching between pages

I notice that your web page does not use a Doctype Declaration (DTD). It is important for each web page to use a DTD so that the user's browser knows what set of standards the code on your web page conforms to.
Choose a suitable DTD from the list on this page and put it at the very top of your web page above your opening <html> tag.
As a starting point, try the HTML 5 DTD:

<!DOCTYPE HTML>

Once you have added the DTD to your page, you can check the code on your page with the W3C Markup Validation Service and fix any errors reported. Once the code on your page validates correctly, it should be rendered with greater predictability and consistency across different browsers.

If that does not make a difference, then instead of giving your SimpleViewer galleries a fixed width (of 1024px), try setting the width of your galleries to 100% so that they fill the width of their parent containers.

Hopefully one of the above suggestions will help.

Steven Speirs
SimpleViewer Support Team.

Re: Re-size glitch when switching between pages

Thanks Steven,

I followed all your instructions and have validated each page now, but unfortunately it's still not made a difference to the glitching.

Changing the width of the gallery to 100% causes this - http://tinyurl.com/ku78u92

It doesn't happen on the pages that don't include a simpleviewer gallery, so it must be something to do with that but I'm really struggling to find what it might be!

Thankyou for your help!

Re: Re-size glitch when switching between pages

Unfortunately, I do not know what is causing your menu elements to separate momentarily whilst switching pages.
However, here are a few things to try/consider:

(1) As your web page is essentially two tables nested within each other, please double-check that the widths and heights of all your table elements (rows and columns) add up correctly.
(2) Try setting a CSS max-width on your menu container.
(3) Try temporarily replacing you gallery's embedding code with just an empty <div> with the same dimensions as your gallery to see if the problem persists:

<div id="empty" style="width: 1024px; height: 609px;"></div>

(4) Try embedding the SimpleViewer gallery outside the nested tables on your web page.
(5) You could perhaps try laying out your web page using CSS instead of tables.
(6) Instead of having your menu duplicated on every one of your web pages and loading a new page each time a menu item is clicked, you could perhaps keep everything on a single web page and load the chosen content dynamically into a container on the web page (depending on which menu item was selected) using JavaScript. The user would always stay on the same page and the menu would never have to be redrawn after initially being displayed.

I hope this points you in the right direction or at least helps to shed some more light on the cause of the problem.

Steven Speirs
SimpleViewer Support Team.