SitePoint Sponsor

User Tag List

Results 1 to 24 of 24
  1. #1
    Designer
    Join Date
    Jun 2006
    Location
    Manila
    Posts
    590
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    OS X 10.4 Safari 3-specific CSS hacks anyone? OSX Safari 3 != Win Safari 3!!!

    I was surprised, but apparently, they behave differently. (look at the sitemap button above)

    photo links:

    Windows Safari 3.0.2 AppleWebKit 522.13.1
    http://browsershots.org/png/original...fd43290030.png

    and

    Mac OS X 10.4 Safari 3.0.3 AppleWebKit 522.13.1
    http://browsershots.org/png/original...144d115f02.png

    So far I've only found a javascript detection script for this (which become irrelevant when the JS is switched off), and a CSS detection hack which also "catches" Opera 9. So you would have the CSS calling both browsers, which you don't want to, because Opera 9 renders it exactly the same as Safari 2 and 3 for Windows, and Firefox 2, and Netscape (and IE7 with the IE7 hacks).

    Here's the FF2 image:
    http://browsershots.org/png/original...6db51ae609.png

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

    I don't have either of those 2 browsers but rather than hacking straight away you should look for code that will satisfy both instead.

    The code for your sitemap image is a little ambiguous and I'm guessing that because you haven't set a left positi0on then it sup to the browser to work out where it thinks the element is. In iE this can change dramatically depending on the text-alignment.

    I would first try changing the sitemap code so that there can be no discrepancy about the position.

    e.g.
    Code:
    #submain{position:relative;}
    img#sitemaplink {
    max-width: 611px;
    margin-top: 24px;
    padding-left: 541px;
    position: absolute;
    left:258px;
    }
    I have no idea if that is anything to do with the problem but it would be the first thing I would try. I try to never let the browser decide for itself .

  3. #3
    Designer
    Join Date
    Jun 2006
    Location
    Manila
    Posts
    590
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    HI,

    I don't have either of those 2 browsers but rather than hacking straight away you should look for code that will satisfy both instead.

    The code for your sitemap image is a little ambiguous and I'm guessing that because you haven't set a left positi0on then it sup to the browser to work out where it thinks the element is. In iE this can change dramatically depending on the text-alignment.

    I would first try changing the sitemap code so that there can be no discrepancy about the position.

    e.g.
    Code:
    #submain{position:relative;}
    img#sitemaplink {
    max-width: 611px;
    margin-top: 24px;
    padding-left: 541px;
    position: absolute;
    left:258px;
    }
    I have no idea if that is anything to do with the problem but it would be the first thing I would try. I try to never let the browser decide for itself .
    Actually, I was on my way to doing the same thing you posted above, but I really was trying to find a way to do it without using absolute positioning.

    Besides, finding a hack may be helpful to others here.

    P.S. Btw, is there a way to apply something similar to a div#name{margin:auto;} to center absolute positioned elements in liquid layouts? As you stated, letting the browser decide for itself can lead to some pretty ugly results.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,
    but I really was trying to find a way to do it without using absolute positioning.
    I don't know why you just didn't float it there and what was the 541px left padding doing? It makes the while row an active link which is a bit odd.

    Besides, finding a hack may be helpful to others here.
    The only browser you should hack for is a dead browser. All other browsers (except IE) get updated far too regularly to hack for. Therefore the only browser I will hack for is IE.

    S. Btw, is there a way to apply something similar to a div#name{margin:auto;} to center absolute positioned elements in liquid layouts? As you stated, letting the browser decide for itself can lead to some pretty ugly results
    usually you can do most things without absolute positioning but if you want something centred then you would create a 100% wide absolute element in relation to your context (e.g. position relative on the parent). Then just need a static element inside the absolute element and use auto margins.

    You can of course use the left 50% right 50% technique as I have done with floats here:

  5. #5
    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)
    Why don't you post a link to the Web page here so I can take a look at it? I've dealt with Saffy a lot lately and I can tell you that while it can be a pain in the neck at times, the "fixes" (which don't involve hacks) often end up being better for the other browsers as well.

  6. #6
    Designer
    Join Date
    Jun 2006
    Location
    Manila
    Posts
    590
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Hi,
    I don't know why you just didn't float it there and what was the 541px left padding doing? It makes the while row an active link which is a bit odd.
    Whoops. Did I do that?

    Must've been one of those late nights.

    The only browser you should hack for is a dead browser. All other browsers (except IE) get updated far too regularly to hack for. Therefore the only browser I will hack for is IE.
    Aye, agree completely. Which is why I was surprised/stunned that the two "Saffy's" didn't render the same code in the same way.

    usually you can do most things without absolute positioning but if you want something centred then you would create a 100% wide absolute element in relation to your context (e.g. position relative on the parent). Then just need a static element inside the absolute element and use auto margins.

    You can of course use the left 50% right 50% technique as I have done with floats here:
    Ah, many thanks for that! (I've bookmarked your site now as well.) I must admit I never thought that was possible (auto margins on a nested static element).

    Dan: Link is rudex.ph.

    And to pre-empt anything regarding IE: the boys and girls on the team have all agreed to drop development on on anything <= IE6. You'll simply get a pop-up telling you why you need to upgrade + some suggested browsers.

  7. #7
    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)
    Well they're going to hate me, because I support IE 5.01 + (yes, I really typed that).

  8. #8
    Designer
    Join Date
    Jun 2006
    Location
    Manila
    Posts
    590
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Dan Schulz View Post
    Well they're going to hate me, because I support IE 5.01 + (yes, I really typed that).
    *collective team gasp*

    ...betrayed by the Dan...




















    ::EDIT:: On a lighter note, sorted out that padding-left issue Paul O'B pointed out.

    Ahhh... what would I do without you two.

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Well they're going to hate me, because I support IE 5.01
    So you're the one

    I usually find that most of my layouts work right back to ie5 (pc) with just a few minor fixes. I won't go out of the way to make it perfect but I always do the box model hacks when I'm coding anyway as a matter of course.

    Then usually the only things left are some inline elements (like horizontal list menus) that usually need position:relative (or even height:1px as ie5.+ allows dimensions on inline elements) and that's about it.

  10. #10
    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)
    hasLayout, position: relative, or the occasional simplified Box Model Hack is all I normally have to do in order to get IE 5.01 and 5.5 in line.

  11. #11
    Designer
    Join Date
    Jun 2006
    Location
    Manila
    Posts
    590
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Dan Schulz View Post
    hasLayout, position: relative, or the occasional simplified Box Model Hack is all I normally have to do in order to get IE 5.01 and 5.5 in line.
    Well, with us, it's less to do with the work, and more to do with getting everyone aware about browsers and the web.

    Yes, we know that 90% of surfers may not care, but if we even just get 10% of visitors using IE6 to switch or upgrade, then we feel we've done a little bit to help the profession.

  12. #12
    Designer
    Join Date
    Jun 2006
    Location
    Manila
    Posts
    590
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I just thought I'd bring this back because I actually found the answer sometime ago (I'm sure most people know this by now though...)

    Safari-specific hack:

    "first-of-type"

    So say you're trying to target div#boxone, you would say something (in my experience at least) akin to:

    body:first-of-type div#boxone {}

    to make the changes specific to Safari.

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

    Thanks for posting the hack

    Yes I have seen that hack but didn't really take much notice of it because it is a valid css3 selector and won't be long before Opera and Firefox support it I should imagine. Therefore it's not future proof and you have no real idea of when it will suddenly break. As a short term quick fix then it may be ok but usually these type of things turn out to be long term.

    More info 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)
    AFAIK Opera 9.50 supports :first-of-type() along with all other CSS3 pseudo-classes. It's currently in beta, but will probably be released quite soon.
    Birnam wood is come to Dunsinane

  15. #15
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    AFAIK Opera 9.50 supports :first-of-type()
    lol - I said it wouldn't be long before opera supported it

  16. #16
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AutisticCuckoo View Post
    AFAIK Opera 9.50 supports :first-of-type() along with all other CSS3 pseudo-classes. It's currently in beta, but will probably be released quite soon.
    Yep, Opera 9.5 should support all of the CSS selectors and passes 578 out of 578 tests at CSS3.info.

    http://www.css3.info/selectors-test/test.html

    Off Topic:

    Interestingly, Firefox 2.0.0.10 only passes 357 of these although I've not checked the latest release of Gran Paridiso which is probably a fairer comparison to Opera Kestrel

    Edit: Just tested in Firefox Gran Paridiso 3.0a4 and it's only a slight improvement on the current version with 369 selector tests passed so it's quite a way behind Opera. (stll someway ahead of the 328 that IE7 pass though).


    But as has been mentioned by Paul, it seems silly using anything that will be implemented in the future by other browsers as hacks as they will only be short term and will need fixing in the future.

    The best method as always is to only hack (if needed) for older browsers that won't be updated.

  17. #17
    Designer
    Join Date
    Jun 2006
    Location
    Manila
    Posts
    590
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @Future-proof hacks - have to agree. Although annoyingly, there isn't much else that can be done.

    @Opera 9.5 - Does that mean that they finally fixed that annoying display:none problem?

  18. #18
    SitePoint Member
    Join Date
    Sep 2007
    Location
    NSW, Australia
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I just thought I'd bring this back because I actually found the answer sometime ago (I'm sure most people know this by now though...)

    Safari-specific hack:

    "first-of-type"

    So say you're trying to target div#boxone, you would say something (in my experience at least) akin to:

    body:first-of-type div#boxone {}

    to make the changes specific to Safari.

  19. #19
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This has already been mentioned above...

    It may work now as a hack but it's valid CSS3 and therefore all the other browsers should implement this in future and therefore the hack that you're applying just for Safari now will be implemented at some point in the other browsers and therefore break what they're displaying.

    Opera 9.5 beta already implements the first-of-type selector by the way so anything you assign to this will also be used by the next release of Opera

    Solution: Don't hack for modern standards compliant browsers.

  20. #20
    SitePoint Member
    Join Date
    Sep 2007
    Location
    NSW, Australia
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by XLCowBoy View Post
    I just thought I'd bring this back because I actually found the answer sometime ago (I'm sure most people know this by now though...)

    Safari-specific hack:

    "first-of-type"

    So say you're trying to target div#boxone, you would say something (in my experience at least) akin to:

    body:first-of-type div#boxone {}

    to make the changes specific to Safari.
    "first-of-type" is also supported by Konqueror along with Opera 9.50 as has been mentioned.

    P.S Sorry csswiz, I was trying to reply.

    Alan
    Last edited by stymiee; Dec 9, 2007 at 12:06.

  21. #21
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by cssbughunter View Post
    "first-of-type" is also supported by Konqueror along with Opera 9.50 as has been mentioned.

    P.S Sorry csswiz, I was trying to reply.

    Alan
    Ahh, sorry... hadn't realised that you were trying to quote someone else

  22. #22
    Designer
    Join Date
    Jun 2006
    Location
    Manila
    Posts
    590
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by csswiz View Post
    This has already been mentioned above...

    It may work now as a hack but it's valid CSS3 and therefore all the other browsers should implement this in future and therefore the hack that you're applying just for Safari now will be implemented at some point in the other browsers and therefore break what they're displaying.

    Opera 9.5 beta already implements the first-of-type selector by the way so anything you assign to this will also be used by the next release of Opera

    Solution: Don't hack for modern standards compliant browsers.
    Strangely enough, Safari and Opera were showing the same behaviors, and when the first-of-type "hack" was applied, they were both fixed.

    Has Opera 9.5 fixed their display:none issue?

  23. #23
    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)
    XLCowboy, do you realize that display: none; can cause accessibility issues when not used properly? (Which is why I tend to avoid it.)

  24. #24
    Designer
    Join Date
    Jun 2006
    Location
    Manila
    Posts
    590
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Dan Schulz View Post
    XLCowboy, do you realize that display: none; can cause accessibility issues when not used properly? (Which is why I tend to avoid it.)
    Of course. I do my best to use it properly. Although you have to admit, it does have its uses: Using it to hide definition-type text that only appear when an unusual word is hovered over for example.


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
  •