#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2008
    Posts
    11
    Rep Power
    0

    Navigation not rendering peroperly in Windows Safari and Google Chrome


    If you go to the example site: devbum.com/coded/audven/

    The top navigation seems to be pushed upwards in Windows Safari and Google Chrome and not centered like in FF, IE6, IE7, and Opera. I'm not sure why it's doing this though... does it also render differently on Mac Safari?
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2008
    Posts
    11
    Rep Power
    0
    When I add "line-height: 39px;" to the the #header element it seems to fix the vertical centering problem with Chrome and WinSafari but it throws it off in the other browsers and it seems any kind of margin or padding adjustments I make to correct the alignment in FF/IE it throws it back off in WinSafari and Chrome.
  4. #3
  5. Devshed Intermediate (1500 - 1999 posts)

    Join Date
    Jun 2001
    Location
    Right now? On my chair.
    Posts
    1,777
    Rep Power
    258
    Shows perfectly in windows FF3, IE7, and chrome.

    Add
    Code:
    * {
      margin:0;
      padding:0;
    }
    To the top of your CSS. Be warned: some padding/margins on your other elements may need changing.
    Use markup the semantic way. You wouldn't want your dog answering the phone for you, would you?
    HTML Validator || CSS Validator -- HTML / CSS Main forums. JavaScript and PHP...maybe
    Bones: HTML; Skin: CSS; Muscle: JavaScript; Brains: PHP; Memory: MySQL
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2008
    Posts
    11
    Rep Power
    0
    Thanks for your response, but your suggestion didn't change anything on my end.

    I also find it weird that it renders fine in your Chrome but not in mine.
  8. #5
  9. Devshed Intermediate (1500 - 1999 posts)

    Join Date
    Jun 2001
    Location
    Right now? On my chair.
    Posts
    1,777
    Rep Power
    258
    Try taking out display:inline on the navigation..
    Use markup the semantic way. You wouldn't want your dog answering the phone for you, would you?
    HTML Validator || CSS Validator -- HTML / CSS Main forums. JavaScript and PHP...maybe
    Bones: HTML; Skin: CSS; Muscle: JavaScript; Brains: PHP; Memory: MySQL
  10. #6
  11. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2008
    Posts
    11
    Rep Power
    0
    Originally Posted by groundscape
    Try taking out display:inline on the navigation..
    Nope didn't work either, thanks for your input though.
  12. #7
  13. Devshed Intermediate (1500 - 1999 posts)

    Join Date
    Jun 2001
    Location
    Right now? On my chair.
    Posts
    1,777
    Rep Power
    258
    Try giving the top padding you have on "#navigation a"
    Use markup the semantic way. You wouldn't want your dog answering the phone for you, would you?
    HTML Validator || CSS Validator -- HTML / CSS Main forums. JavaScript and PHP...maybe
    Bones: HTML; Skin: CSS; Muscle: JavaScript; Brains: PHP; Memory: MySQL
  14. #8
  15. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2008
    Posts
    11
    Rep Power
    0
    Originally Posted by groundscape
    Try giving the top padding you have on "#navigation a"
    That didn't work either, I am in quite the conundrum.

    edit: after some extensive thinking I found out it was actually the negative margin in the #logobox that was causing the issue, I moved the negative margin to both #navigation and #login which seems to have fixed the problem and it now renders fine in both browsers.

    thanks for all your help!

IMN logo majestic logo threadwatch logo seochat tools logo