Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New to the CF scene
    Join Date
    Nov 2011
    Location
    Canada
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    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.

    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

  • #2
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    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

    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)

    Last edited by Sammy12; 11-21-2011 at 03:40 AM.

  • #3
    New to the CF scene
    Join Date
    Nov 2011
    Location
    Canada
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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!

  • #4
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    start out by taking out the background-attachment: fixed; out and tell me how things look then



  • #5
    New to the CF scene
    Join Date
    Nov 2011
    Location
    Canada
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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!!!

  • #6
    New to the CF scene
    Join Date
    Nov 2011
    Location
    Canada
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    UPDATE: OOPS, when I zoom in the site, it still happens, the menu text slips to the right side...

    *********

  • #7
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    try setting the background blue house image to the div below it (highlighted below)

    then use

    Code:
    background-position: -300px -50px;
    or whatever position works


    Last edited by Sammy12; 11-22-2011 at 12:18 AM.

  • #8
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    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

    Last edited by Sammy12; 11-22-2011 at 12:24 AM.

  • #9
    New to the CF scene
    Join Date
    Nov 2011
    Location
    Canada
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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!

  • #10
    New to the CF scene
    Join Date
    Nov 2011
    Location
    Canada
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •