Webpages sliding around in browser

**Abikadabra** · 03 October 2011, 09:00 AM

Hi, hoping someone can help me with this as I can't seem to find it mentioned on the Xara site. I have created a website for myself, and also for a friend, using WDPremium 7 and a couple of her pages and a couple of mine slide around in the browser, particularly on apple computers. When I say slide, I mean the page doesn't seem to be stable and sometimes can end up in the left hand corner! It is particularly unstable when viewind in safari on apple, but can also be unstable on my friends laptop (which is not an apple) when viewing with firefox. I did not use a template with my site, but I did with my friend's site. The offending pages on her site are the packages page and the rates page. Although the packages page is the same width as all the other pages, it is much longer than most of the others, and for some reason the horizontal scrollbar appears on this page although its width has been set. Oh, and I have also unchecked 'clip to page edge' on the website properties menu. I do this on all the sites I create and I have not had this problem before with the page sliding around, so I don't think it is that. There does not seem to be any errant item on the page background, so I am confused as to why both this page and the rates page have scrollbars appearing. Her site is www.grandiscottages.com.au and my site is www.rubytours.com.au . I would really appreciate any feedback regarding this problem as I would like to rectify this problem as soon as possible. Thanks in advance of any help. Abi

**Drwyd** · 03 October 2011, 09:47 AM

Hi Abi

It's due to "clip to page edges" being unchecked and the image larger than the browser window.

The scrollbar can be removed by putting the following code in the head section of your page :-

Code:

<style>
html {
overflow-x:hidden; overflow-y:scroll;
}
</style>

As for preventing movement, there is probably a way. If no-one has solved it by the time I get back tonight I'll have go.

**Abikadabra** · 03 October 2011, 01:03 PM

Hi Drwyd. Forgive me if I think for a moment that you are God...I think all people who can make stuff and fix stuff with code are a bit special. Thank you so much for your help - scroll bars are gone! Cheers, Abi

**Drwyd** · 03 October 2011, 05:12 PM

LOL I forgive you Abi, I forgive you

At TG you'll find yourself in the land of the immortals. There are plenty of code heads around here

I'll have a stab at preventing unclipped pages from moving. It's been bugging me on a couple of my sites as well.

**Drwyd** · 03 October 2011, 07:43 PM

Behold Mortal ... ahem ... sorry ... Hi Abi

I have a solution BUT it's not pretty

Create (within 6 days) a 99% transparent rectangle that is large enough to encompass the width of your design (including background) 2000px should do it.
Position it centrally at the top of your page. You may want to use a lesser transparency till you are happy with it's position.
Position your background design where you want it to manifest ... sorry appear. and group it (CTRL+G) with the rectangle.
Export it to your index_htm_files folder. (this folder is created the first time you export the site to your hard drive.) call it something like bgimage.jpg
Move it off to the paste board or cast it out ... sorry delete it.
Add the following to your website page head code (see image below)

Code:

<style>
html {
background-image: url("index_htm_files/bgimage.jpg");
background-repeat: no-repeat;
background-position:center top;
}
</style>

I hope I have got that all in the right order and that it is clear. If not, feel free to summon me

I suspect that the Holy Ghost (Covoxer) has a simpler way

**Abikadabra** · 04 October 2011, 02:21 AM

LSF! (that's Ozspeak for LOL and it just means leg slapping funny). I will give this a go when I get home from tour tonight. I am a bit technically deprived, but I am up for the challenge. I am in the middle of making a new site for myself (Ruby Tours) with clipped edges so I might leave that one for now, but I will definitely have a go for Grandis Cottages. If I create this within 6 days, on the seventh day can I rest? Thank you, and amen

**covoxer** · 04 October 2011, 05:42 AM

Can't you just use a pasteboard background? (Ctrl+Drag and Drop your background image over the pasteboard)

**Drwyd** · 04 October 2011, 10:13 AM

Hi John

Essentially Abi is looking for a non tiled positionable background image that extends beyond the bounds of the browser window without forcing scrolling or scroll bars.

I'm hoping you have a simpler solution than my clunky workaround