Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 7 of 7
  1. #1
    Member beans's Avatar
    Join Date
    Jul 2005
    Location
    Melbourne, Australia
    Posts
    66
    Member #
    10559
    Ok guys, I need a little help. I'm not sure that I've used CSS positioning correctly, and, as is nearly always the case- things aren't looking the same in all browsers.

    I just want to get this little bug sorted before I move on to others. In Safari, the site looks how I expect it to. In Firefox, it did look how I expected it to, but today after going back to it from a week off, I've noticed the main navigation has moved and isn't where it should be. See attached screenshots.

    In IE6 on the PC (only PC i have access to), the menu sits about halfway down the header div, instead of along the bottom where I would like it to be. I have attached my CSS (which is messy, sorry), but to tell you the truth I am not sure that I have gone about the positioning in the correct manner. I just don't know enough about it to know what is the correct manner.

    The current URL is http://www.ryder.net.au/news

    It is most definitely incomplete and needs a spit and polish.

    I hope people are not sick of CSS questions and someone can give me guidance. I will be very thankful! :classic: :surprised:

    *edit* css attachment doesn't seem to work so here is the link.
    Attached Images Attached Images
    - gah!

  2.  

  3. #2
    Senior Member Shani's Avatar
    Join Date
    Nov 2004
    Posts
    1,140
    Member #
    8171
    I'm not 100% on this, but the thing that looks strange to me is the positioning on #navcontainer.

    Why make it [minicode]bottom: -245[/minicode]? Did you try [minicode]top:245[/minicode]?

    I've attached an IE6 on PC screenshot from this PC. Fine in FF.
    Shani

    I have an eye for detail like you'd never believe.

  4. #3
    Member beans's Avatar
    Join Date
    Jul 2005
    Location
    Melbourne, Australia
    Posts
    66
    Member #
    10559
    Quote Originally Posted by DCScene
    I'm not 100% on this, but the thing that looks strange to me is the positioning on #navcontainer.

    Why make it [minicode]bottom: -245[/minicode]? Did you try [minicode]top:245[/minicode]?

    I've attached an IE6 on PC screenshot from this PC. Fine in FF.

    Haha, see- i have no clue why i had done it like that. The #mail div had the same sort of thing, so I have changed them both to [minicode]top: [/minicode] instead of [minicode]bottom: [/minicode]. Although I can't check if that has fixed the positioning in IE.

    There is a slight descrepancy between Safari and Firefox now- in Firefox the horizontal navigation seems to sit where it should, but in Safari it's about 1cm higher. Oh well, one step at a time...
    - gah!

  5. #4
    Senior Member Shani's Avatar
    Join Date
    Nov 2004
    Posts
    1,140
    Member #
    8171
    Okay, apparently that's not it. It looks the same as yesterday. If I have some time later I'll download the files and mess with them.
    Shani

    I have an eye for detail like you'd never believe.

  6. #5
    Senior Member Shani's Avatar
    Join Date
    Nov 2004
    Posts
    1,140
    Member #
    8171
    Okay, the [minicode]ul[/minicode] is not responding to the position set on [minicode]#navcontainer[/minicode]. To remedy this, I used padding.

    Line 54: [minicode]padding: 225px 0 0 0;[/minicode]. It's working on IE6 and FF2 on PC.
    Shani

    I have an eye for detail like you'd never believe.

  7. #6
    Member beans's Avatar
    Join Date
    Jul 2005
    Location
    Melbourne, Australia
    Posts
    66
    Member #
    10559
    Quote Originally Posted by DCScene
    Okay, the [minicode]ul[/minicode] is not responding to the position set on [minicode]#navcontainer[/minicode]. To remedy this, I used padding.

    Line 54: [minicode]padding: 225px 0 0 0;[/minicode]. It's working on IE6 and FF2 on PC.

    Thanks for the tip! And thank you so much for actually taking the time to help me, I really do appreciate it.

    I've done that and I'm at work now so I can check, it looks ok except now the menu sitting a little low (in attached pic- should be where the green line is, not the red line). But honestly if that's my biggest issue then I don't mind because it doesn't look that bad and doesn't break the site.


    Hmm but I have just noticed another thing, on all pages except the home page and photos page in IE, the header image seems to be getting shifted a few pixels to the left. Annoying!
    Attached Images Attached Images
    - gah!

  8. #7
    Senior Member Shani's Avatar
    Join Date
    Nov 2004
    Posts
    1,140
    Member #
    8171
    Glad I could help.

    As long as sits at the same spot on each browser, it's just a matter of changing the number (maybe it should be 200px instead of 225px).

    The header image shifting... could that have anything to do with a scrollbar. It might sound silly but I drove myself nuts because of that one time!

    Not sure how much experience you have to CSS, but here's the best tip I've ever gotten for creating cross-browser layouts: Add a border. It's a diagnostic tool. For example, when I put a border on the [minicode]#navcontainer[/minicode] and the [minicode]ul[/minicode], I saw that in IE they were completely disjointed, so no matter what I did to move the [minicode]#navcontainer[/minicode], the [minicode]ul[/minicode] did not move.

    Tricks like using padding for positioning come with time, but in the meantime, add as many diagnostic tricks as you can!
    Shani

    I have an eye for detail like you'd never believe.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 03:34 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com