SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Addict
    Join Date
    Sep 2008
    Location
    Rudgwick, UK
    Posts
    377
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    "tab" list, not working in Safari

    Hi,

    Once again, it comes down to stupid cross browser compatibility

    http://cssdesk.com/sw3U6

    This works fine in FF, IE and Chrome... but not in Safari (or any Apple mobile devices). If I remove the padding on the li element, it kinda works... but then you loose all the padding on the tab (which I can't do, as it looks rubbish)

    Can anyone spot whats up with it? I really do wish Mozilla, Apple, M$ and any other browser developers would cooperate when making the standards for their browsers... I dread to think how many hours a year I waste trying to fix up cross browser issues

    TIA!

    Andy

  2. #2
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    Don't set the width/lengths in px. I recomend using ems The 'problem' is that different. Bowsers have diferent default text sizes. Safari is probably bigger than the other browsers thus it wraps around.this is not a real crossbrowser issue; If you used text only zoom in the other browser you'd see your layout would break as well.

    Hope that helps.

  3. #3
    SitePoint Addict
    Join Date
    Sep 2008
    Location
    Rudgwick, UK
    Posts
    377
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OMG you actually legend! I've been going round and round in circles with this one! I changed the font to 1.1em, and it works perfectly now - I would never have worked that out!

    Thanks again!

    Andy

  4. #4
    SitePoint Addict
    Join Date
    Sep 2008
    Location
    Rudgwick, UK
    Posts
    377
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Mmm actually, that worked on the demo page - but not on the live one Its a bit hard to show a proper demo - as the site is currently behind an IP block (as we dont want google finding it, and penalizing us for duplicated content with the live site)

    If your happy to take a look, and provide your IP - please PM it to me, and I'll add you to the IP block so you can see it

    TIA!

    Andy

  5. #5
    SitePoint Addict
    Join Date
    Sep 2008
    Location
    Rudgwick, UK
    Posts
    377
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Mmm, I can't seem to edit my above post?

    Anyway - here is a simpler example:

    http://cssdesk.com/sw3U6

    I've removed the .label bit, and just have plain text in the 3rd tab. However, it STILL overflows to the 2nd line in Safari - even though there seems ample space in #cat_tabs #tab_list ul (the bit with a green background)

    Any more ideas? I'm really drawing blanks here

    TIA

    Andy

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I can't see any overflow in your example above. There are three tabs centred on the red bar in Safari PC and Mac.

    Am I looking at the wrong thing?

  7. #7
    SitePoint Addict
    Join Date
    Sep 2008
    Location
    Rudgwick, UK
    Posts
    377
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    Thanks for the reply. The problem occurs when you shrink the width of the window down. There still seems to be about 15-20px free on both sides of the tabs, yet the 3rd tab (part of it) jumps down onto the next line. Please see:

    broke.png

    Any ideas? I'm really drawing a blank on it ATM

    TIA

    Andy

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Ok I can see safari wraps the element a little earlier than other browsers. It looks like it adds the padding on the inline elements onto the end of the line. A more robust solution would be to use inline-block instead of inline and the browser will take beter care of margins and padding.

    e.g.

    Code:
    #tab_list li {
      display:inline-block;
      margin:-5px 0 -1px;
      vertical-align:top;
    }
    
    /* ie7 support if needed */
    #tab_list li {
    *display:inline;
    *zoom:1.0;
    }
    You may need to tweak a few things to get exactly the display as before but should easily be achievable.

  9. #9
    SitePoint Addict
    Join Date
    Sep 2008
    Location
    Rudgwick, UK
    Posts
    377
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul,

    You absolute gem - that was it!

    I changed the display: inline to what you suggested, and it works exactly as it should have in Safari now

    Thanks a ton - you saved what little bit of hair I have left! hehe

    Thanks again

    Andy


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
  •