View Full Version : Menu text lock... browser compatibility nightmare

11-21-2011, 02:39 AM

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.



11-21-2011, 03:33 AM
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)


11-21-2011, 04:53 AM

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!

11-21-2011, 06:14 AM
start out by taking out the background-attachment: fixed; out and tell me how things look then


11-21-2011, 06:03 PM
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?


11-21-2011, 06:25 PM
UPDATE: OOPS, when I zoom in the site, it still happens, the menu text slips to the right side...


11-22-2011, 12:12 AM
try setting the background blue house image to the div below it (highlighted below)

then use

background-position: -300px -50px;

or whatever position works


11-22-2011, 12:21 AM
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


11-22-2011, 09:02 PM
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!

11-27-2011, 02:37 AM
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.