SitePoint Sponsor

User Tag List

Results 1 to 17 of 17
  1. #1
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy Messed up on WinXP safari and Opera!!!

    So annoying.... I try and do a really neat and boxy boring design and it still ends up wrong in one or two browsers...!!!

    Here is my website: LINKY

    It's messed up in my winXP version of Safari (Safari Screenshot) ... and Opera (Screenshot of Opera)

    Its just the NAV bar which gets all MESSED UP! ... please tell me what i am doing wrong...?
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  2. #2
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    nobody knows??? please help?
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  3. #3
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Er … would you mind showing us how you intend it to look? It's rather hard to say what's wrong without knowing what it's supposed to be like.

    I see the 'New' bubble on top of the nav bar, and the 'under construction' notice is shifted down a bit (and illustrates why you should set a background colour along with your foreground colour, because it's now partially white on white).
    Birnam wood is come to Dunsinane

  4. #4
    SitePoint Addict
    Join Date
    Jun 2007
    Location
    Sydney, Australia
    Posts
    253
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well if you look at the two screenshots, and open the link in firefox, you would see the problem, but since you use Opera...

    Anyway the problem is that in Opera and Safari, there is a grey gap between the nav and the content...

  5. #5
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The problem in Opera seems to be that the line height declaration for the nav list items is ignored. You can removed the grey gap by setting min-height:30px for #nav or #navul, but it will still look odd because of the vertical alignment. Setting line-height:30px for #nav or #navul doesn't seem to have any effect.
    Birnam wood is come to Dunsinane

  6. #6
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the help....

    So .. what could be the reason for safari and opera ignoring the line-height deceleration?
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  7. #7
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It looks like a bug in Opera, but I'm not 100% sure. Don't know about Safari, but it could be the same thing. The two validation errors on that page shouldn't affect the rendering (but should be fixed nevertheless).

    Opera handles line-height properly in my trivial test document, so there might be something else in your page that affects it. I'll look around and see if I can find anything.
    Birnam wood is come to Dunsinane

  8. #8
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you

    I doubt its a error in the browser... because my other websites which use line-height work perfectly...

    I could just set a margin or padding or something to the <li> and leave the line-height deceleration.... Although I would much rather get to the root cause...
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  9. #9
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think it might be a UL or LI issue... Because the "FYI: STILL UNDER CONSTRUCTION" div also uses the line-height decleration and it works great...
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  10. #10
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay, I've found what's causing this in Opera (and how to fix it). But not why.

    The list items with class navli have display:inline and line-height:30px. But they contain links with line-height:normal, which seems to mess things up. If you remove that declaration for the links (#nav a) or set it to 30px, the alignment will be okay in Opera. I don't know if it affects Safari.
    Birnam wood is come to Dunsinane

  11. #11
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    PERFECT THANKYOU SO MUCH AutisticCuckoo!!

    I took away the line-height on <li> and just declared it on "#nav a"

    Thank you so much!!!
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  12. #12
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You're very welcome.
    I'm glad it worked out. Did it also solve the problem in Safari?
    Birnam wood is come to Dunsinane

  13. #13
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yep it solved the problem in safari also.

    Thank you...
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  14. #14
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Great!

    That means IE and Firefox do one thing, while Opera and Safari do another. I wonder if either 'side' is wrong, or if the CSS spec is ambiguous in this respect. My interpretation of the spec would lead me to believe that the behaviour exhibited by IE and Firefox is correct but I'm not 100&#37; sure.
    Birnam wood is come to Dunsinane

  15. #15
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    My own gut instinct tells me to lean towards Opera and Safari here, but I could be wrong. I'm not about to look into the matter.

    But this is a classic reason why I always try to style the innermost children directly rather than letting the cascade kick in - fewer chances of something going wrong.

  16. #16
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The cascade isn't an issue in this case.

    The problem is caused by setting a different line-height for an inline box that is a descendant of another inline box. This seems to nullify the line-height setting on the parent box. I can't quite make out what's supposed to happen, but I think the behaviour in IE and Firefox is the correct one.
    Birnam wood is come to Dunsinane

  17. #17
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Meh, my brain wasn't in "CSS mode" at the time I posted that since I had just gotten done watching "Reservoir Dogs".


Bookmarks

Posting Permissions

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