Menu text lock... browser compatibility nightmare

Hi,

I cannot say I know alot about website coding, but I manage.

Here's my problem: I've made a website with a text menu, and it is locked and fine in Firefox, but is displaced (most likely due to the scroll bar and screen resolution), PLUS it scrolls up and down in Explorer and my client's Safari, and needs to be LOCKED in its position and stay sharply withing the borders (see menu's blue bar on main home page) www.anniedufort.com (http://www.anniedufort.com).

I have read on position locking modes (fixed, absolute, relative etc...) and tried them all. I cannot seem to find a method that works for all browsers...

Can someone enlighten me on this? It would be very appreciated.

Thanks!

pattrem

it does the same thing in Chrome, FF, opera, safari, and ie

the background is fixed there b/c it has background-attachment: fixed; :
blue house (http://www.securenet.net/members/patrickt/annie/wpimages/wp04b65c4d_06.jpg)

the text moves because it was never specified as fixed
Location, Objets, Textiles, Atelier

So what is your question?

the background is fixed to one spot, the text will scroll.
1. do you want the background to move with the page when you scroll or not?
2. do you want there to be no scroll bar and just have the page fit perfectly?

- scrolled all the way down: (notice location, objets, textiles... overlaps)

http://i1114.photobucket.com/albums/k535/auroralight1/Untitled-117.png

Hi!

What I want is everything to stay fixed, no scroll bar or anything that moves. That menu must be under the "COCON #ONE" text, like in Firefox (1920x1080 resolution).

Thanks alot for your input!

start out by taking out the background-attachment: fixed; out and tell me how things look then


http://i1114.photobucket.com/albums/k535/auroralight1/Untitled-119.png

Wow, does look like it's working (Firefox 7 Explorer)! But since I don't have a way to check the other browsers, can you confirm for me?

Thanks!!!

UPDATE: OOPS, when I zoom in the site, it still happens, the menu text slips to the right side...

*********

try setting the background blue house image to the div below it (highlighted below)

then use


background-position: -300px -50px;


or whatever position works


http://i1114.photobucket.com/albums/k535/auroralight1/Untitled-123.png

this code works nicely, try to just duplicate this


the -185px -10px can be changed, it's the background-position (your preference)

take note that you set the width to over 1200px. not every monitor has that kind of width, a great number have 960

http://i1114.photobucket.com/albums/k535/auroralight1/Untitled-124.png

OK, just a word to tell you I haven't abandoned, some other stuff has come up... I WILL try it out very soon and get back to you! Thanks alot again for your help!

Hi again,

Well I tried your code and it didn't really worked... BUT that lead me to think about a thing I might have done wrong, and then came the solution: I had integrated the background image as a "real" background image instead of adding it as an image where I could write text over (menu). Now everything works (or so it seems on my pc and browers). Hopefully it does on yours as well!

Thanks for your time, much appreciated.