Gap Between Footer & Browser Window

I have been working on my website over the past 2 years and throughout this same period I have been fighting with the following issue:

On certain pages there is gap between the footer & the bottom of the browser window. It doesn't discriminate between mobile or desktop but it is random across the entire website. Also, all of the page length dotted lines are located at the bottom of the footer on every page.
These two browser screenshots show what I mean.

In desktop mode the footer is planted firmly at the bottom of the browser window, as expected
Attachment 125845

But in mobile view there is a big gap at the bottom

Attachment 125843

As mentioned already this issue is random across the website and happens to either mobile or desktop, sometimes both and some pages don't have the issue at all either on mobile or desktop.

I have looked around the forums and on Google etc for a fix but the closest I came to one was by a chap (I forget his name) who said that it could be something to do with the X & Y positioning on the shadowing on the background layer. I followed his instructions to change both the X & Y values up one digit then back again with no change to my issue having done this. I have even tried deselecting the "show shadow" option in the page options tab, again with no effect.

The only meaningful option that I have found to SOMETIMES temporarily work is as follows:

>Select the page affected
>Unlock & select "Pasteboard Background"
>Then select "Rectangle"
This rectangle is usually taller than the top of my page, longer than the bottom of my page and wider on both sides. I have tried just shortening this rectangle to the bottom of the page, just shortening the height to the top of the page and a mixture of the two then republish. Sometimes it fixes my problem but only until I republish again. If I then go back to the same page, the Background has resized itself to the bigger size. Again, some pages stay fixed while other do not.

I have lived with this issue for 2 years now and various updates have not affected or fixed the issue.

My website is split in to 6 sub-sites as it is a large website with nearly 100 pages so I divided it up in to sections about a year ago to make it easier to edit certain parts of the website individually and to make it quicker for the republish upload. I have this issue across the entire site and isn't local to one section of the website.

The website in question is:

https://paulsastophotography.co.uk

I can upload one of the subsite Xara files if needs be.

I can see what you mean on the About page (desktop).

If this is the problem throughout, it's an easy fix. Your page length is too long. No need to unlock anything or mess around with the pasteboard. Just drag the bottom of the page (dotted lines) up to the bottom of your footer.

Hi Chris,
Thank you for your reply. all of the dotted lines are at the bottom of the footers when editing in Xara. The pictures that I posted are screenshots taken with the published website in the browser window.

I see the same thing here too https://paulsastrophotography.co.uk/...xos-review.htm and I'm still running down the page-too-long path. Can you post a .web/.xar file that contains the About page?

It's midnight here, so i won't look at it for hours, but someone else may well pick it up and solve the mystery.

As mentioned in my original post, the issue is across my entire website but it doesn't affect all pages on the website. It is also not specific to mobile or desktop and can happen to either mobile, desktop or both but on some pages it doesn't affect either.


Attachment 125846

Just to let you know - the page size is locked in this file. That was a recent thing to see if it made a difference - it did not. It makes no difference to my issue if the page size is locked or not.

I tried to upload the .web files for the other sections of my website but it wont let me for some reason.

Paul, your WEB file has a Rectangle in the Pasteboard background of 2296 x 3384px that is created and locked for each new page. As the height of the page is 1847px, you have an extra 1537px of Dark Energy pushing your universe asunder.

Unlock the Pasteboard background and resize the Rectangle for all affected pages.

It might be the first evidence of cosmic hyper inflation!

Acorn

Hi acorn.
Thank you for your reply. I did cover having the issue that you mentioned in my initial post. Resizing this rectangle SOMETIMES rectifies the problem for a short while but sometimes it makes no difference at all. And most of the time when I go back to the page at a later date, the rectangle has gone back to the bigger size whether the page size is locked or not.

Quote:

---

Originally Posted by paul.ibbitson

Hi acorn.
Thank you for your reply. I did cover having the issue that you mentioned in my initial post. Resizing this rectangle SOMETIMES rectifies the problem for a short while but sometimes it makes no difference at all. And most of the time when I go back to the page at a later date, the rectangle has gone back to the bigger size whether the page size is locked or not.

---

Paul, then delete the Rectangle and see that that is the offender. The Shapes on the Pasteboard should be on the Page background, put to the back and locked. Then just drag Theme colour 1 onto the Pasteboard.

It might be other Objects were pushing it around.

Acorn

Hi Acorn,
Thanks for the advice. My laptop with my website on it is currently in the garden running the camera on the end of my telescope taking an image of another Nebula to go on the website. It will take around 3 hours worth of exposure time so I will play around with the rectangle as you describe in the morning.
Thanks for your help. I will keep you updated.
PS. I liked your quip regarding the cosmic hyper inflation. Very good.

Right, rectangle deleted and its still playing up. The only difference deleting the rectangle made was that the pasteboard layer removes its self.

Attachment 125861.

Above is the .web file with the changes made but when viewing on mobile or desktop there are still massive gaps under the footer.

The pages Contact and Donate are short pages, meaning the browser window is longer than the displayed page. The other pages are fine. Add a picture or more text to push the footer further down the page.

Hi Chris, Yeah I am aware of the shorter pages and I will be filling those up at some point.
I do need to mention that when clicking on the preview in Xara and the preview web page/site window pops up, all of the footers stop scrolling at the bottom of the window as expected, but, when the site is published to the internet and viewed by a browser, this is when the big gaps appear at the end of pages, even pages that are longer than the browser window.

Paul, yes it is peculiar as one each page's preview, alone it stops properly at the bottom of the page/browser. As a site, it fails badly.

I suspect there is some site-width code in the Website header od elsewhere that is causing this.

I haven't found it!

At worst, your design file could be corrupt.
When i get this I use a cloned copy and divide and conquer until I have located the offending page or area or shape.
How you recover is up to you; I usually copy all objects from all Layers across into a new document.

Tedious in the least.

Acorn

I may have found the culprit. I have been using AddThis which tracks users on my site. I think this is what's caused my issues with a hidden div. I have just removed it from the head and just republishing now to see if that fixes it.

Right. I have removed AddThis from the head section of the website - it made no difference. I then loaded up the homepage in Chrome browser and did the old right click then "Inspect". The longest element on the page is the one in the image below. The problem is, there is no such element when editing the page in Xara so I cannot find it to remove it as I now believe it is this that is causing my issue.

Attachment 125868

As an addition to the below comments that I have made, do you have any idea what "onmousedown" is? This appears in the code for the div in the below image.

Quote:

---

Originally Posted by paul.ibbitson

As an addition to the below comments that I have made, do you have any idea what "onmousedown" is? This appears in the code for the div in the below image.

---

It is the third possible button state, probably not relevant.

Acorn

Paul,

I took your XAR doc and was able to change any of the page heights and preview the website subset through a test NavBar, only linked to the pages in the subset you provided. The donate button had a MouseOver state which I could not find, so recreated it without one. The donate page had a text column that extended beyond the document width and this is now a text box. I don't know if these had anything to do with the root cause, but in this website subset it all seems to work. In my test, I made the Home button link to the index page.

Not sure I have found the real culprit here, but maybe it helps.

Gary

Initiostar, you may have hit the nail on the head. I never thought about the "Donate" button. I will try what you say in your post. TBH I could probably lose the Donate button as I've only ever had one donation and that was only for a tenner!!!
Thanks for taking a look and I'll have a play about tonight after work.

For those who are interested, I think that I have found what the issue is. It has something to do with the drop down menu in mobile view.

The drop down menu on my mobile view is not linked to a specific page as when it is pressed it opens up to show a list of pages that do have links, so I am assuming that there is a hidden box (not sure what to call it) of some description to account for the drop down part of the navbar that is causing the browser to show the page as being longer than it actually is. I am unable to find the so called "hidden box" as part of the drop down navbar element.

When I add a linked menu line underneath the initial "Menu" button in the navbar settings the page opens (once republished) as it should do with the page not being able to be scrolled further than the footer. supper duper, job done, massive weight off my shoulders.

I decided to test this by then reverting the navbar back to is previous state ie, by removing the added linked menu line from the navbar settings, and the page (once again after republishing) reverts to having the big white gap as you scroll past the footer once again making the page longer than it should be.

I am still unsure as to why this issue affects the desktop variant as there is no drop down menu on the desktop variant but, by following the above directions in the mobile variant at the same time fixes the issue on the desktop variant. Strange.

My summary is
1) When creating a mobile drop down navbar, all pages that it is on need to be very long to account for this hidden element that's part of the navbar (not always wanted on shorter pages).
2) Have a small amount of pages linked on the navbar to keep the hidden bit short which in turn should keep the page at the desired height without being able to scroll past the footer.
3) Do away with the drop down navbar all together and look at an alternative means of directing visitors around your website on the mobile variant. (This is the option I will be going with).

I hope that this helps anyone else who may be having a similar issue. I am still to test this across my entire website, which is quite large, but from initial tests this seems to be the cause of the issue of big gaps below the footers. I will update once I have fully tested it across the website.

I would like to thank Initiostar and Acorn for their help in this matter. It's been very much appreciated.

Point 3:

Quote:

---

Do away with the drop down navbar all together and look at an alternative means of directing visitors around your website on the mobile variant. This is the option I will be going with

---

A simple, easy to manage option is to create a Mobile Menu Page, similar to the image below. In this example, your hamburger which is sticky on all pages, links to a menu page, which can be a standard Xara Navbar, or individual buttons.

Attachment 125892

The attached XAR gives you a demo of different options, the menu page and a working drop down menu.

Not sure the issues highlighted in your Points 1 & 2 hold true, but the above menu page option is easy to implement and manage.

Thanks for feeding back the issue and solution. In hindsight, it is obvious as the Main and Variant are in the same file.

More justification for Xara to wake up, smell the coffee, and sort out the NavBar legacy and a better separate of Variants.

Acorn

Initiostar, I like the idea of a menu page for the mobile variant. I will certainly look at that as an option. Thank you.

It could look something like this:

Attachment 125896

Simple XAR 480px width attached for you to play with.

Quote:

---

Originally Posted by Acorn

Thanks for feeding back the issue and solution. In hindsight, it is obvious as the Main and Variant are in the same file.

More justification for Xara to wake up, smell the coffee, and sort out the NavBar legacy and a better separate of Variants.

Acorn

---

I agree, I suppose that it will cause conflicts between the two variants if they reside in the same file. I am not knowledgeable enough to know if this can be any different on any other platform or if all platforms work in this way. Anyway, I like Xara for the ease and speed of use so I guess its 6 to some and half a dozen to the rest.

Quote:

---

I suppose that it will cause conflicts between the two variants if they reside in the same file.

---

I have lots of sites using the mobile menu approach and have no issues. The mobile menu page will show in the page and layer gallery for all variants, but your desktop menu should not have a link to it. For completeness ensure that the desktop variant of the mobile menu page does have your main menus visible. A simple test to see what happens across all variants is to squeeze your browser width until you see the mobile variant appear. It is unlikely a visitor using a desktop will hit the mobile menu page (assuming you do not have a link to it), but were they to do so, they should see your main menus. I am also using dropdown menus on other sites without any issues too.

I have now removed the drop down completely from the mobile variant and replaced it with a single button that links to a menu page as you suggested and it works a treat. There are no longer any gaps at the bottom which was my main gripe and it actually makes it easier to navigate the mobile version. I have not linked through to the menu page on desktop version so that shouldn't hinder my visitors to much. Ill just put a button on that page linking back to the mobile version of the menu just in case.
I have only implemented it on the main 4 pages of the website and will implement it across the entire website either tonight or tomorrow.
Thank you so much for the menu page idea.

Home Menu Button / Menu Page / No gap at bottom
Attachment 125900 Attachment 125901 Attachment 125902

Well done Paul; best to remove your submenus under 'Setup & Imaging' & 'Astro Gallery'. The two tabs in Setup and Imaging could be combined and the Astro submenu could sit on the Astro page. You could also consider making the Astro page a separate doc (in the same directory). The Xara NavBar submenu structure is primitive and best avoided. This way the menu structure is consistent across both variants.

Attachment 125903