SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    @alexstanford Alex's Avatar
    Join Date
    Apr 2004
    Location
    Jacksonville, Florida
    Posts
    757
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Safari problems...

    Hello everyone,

    Once again, confidential project, can't provide much of an example.

    I have a positioning problem specific to Safari, and the only option that seems viable is to find a way to only serve CSS to Safari, and no other browsers. But, I can't seem to find a way to do that.

    Any suggestions?

    Thanks in advance.

    Kind regards,
    Alex Stanford
    Alex Stanford @alexstanford tumblog about.me in fb G+ K
    TechTalkin The Premier Community for Technology Enthusiasts and Professionals
    Full Ambit Media Zero Sacrifice Web Design & Development; Made in the USA @fullambit in fb G+ K

  2. #2
    SitePoint Wizard Blake Tallos's Avatar
    Join Date
    Jun 2008
    Location
    Cuyahoga Falls, Ohio.
    Posts
    1,510
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So what are you saying here? Yeah theres alot of Problems with safari. Theres ways to solve issues.
    Blake Tallos - Software Engineer for Sanctuary
    Software Studio, Inc. C# - Fanatic!
    http://www.sancsoft.com/


  3. #3
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Alex, why don't you post some example code with placeholder content that we can look at? You might be able to get a definitive answer that way.

  4. #4
    @alexstanford Alex's Avatar
    Join Date
    Apr 2004
    Location
    Jacksonville, Florida
    Posts
    757
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Well, the question at hand is quite simple in theory: How can I serve Safari and Safari only with a style sheet?

    For example, one could use conditional comments to include a stylesheet to IE. I cannot seem to find a way to do the equivalent with Safari.

    Below is the sample footer XHTML/CSS involved, div class="footsmgirl" is the div in question, as it does not align properly with footbg's top border.

    HTML Code:
    <div class="footbg">
        <div class="center">
          <div class="footleft">
            <div class="clearfix">
              <div class="footbox"></div>
              <div class="footbox"></div>
              <div class="footbox"></div>
              <div class="footbox"></div>
            </div>
            <p class="foottext">
              Copyright 2007-2008 Some People.  All rights reserved.<br />
              <a href="#">Privacy Policy</a> | <a href="#">Terms of Service</a> | <a href="#">Contact Us</a>
            </p>
          </div>
          <div class="footright">
              <img src="#" alt="" class="footimprove" />
              <form action="#" class="footform">
                <p>
                  <textarea rows="" cols=""></textarea><br />
                  <input type="submit" name="" value="" />
                </p>
              </form>
          </div>
          <div class="clear"></div>
          <div class="footsmgirl"></div>
        </div>
      </div>
    </body>
    </html>
    Code:
    /* @Group Footer */
    .footbg {
    height: 146px;
    width: 100%;
    background: #ececec;
    border: 1px solid #727272;
    border-width: 1px 0px 0px 0px;
    clear: both;
    }
    
    .footleft {
    float: left;
    width: 50%;
    }
    
    .footright {
    float: left;
    width: 50%;
    margin: 0px -1px 0px 0px;
    text-align: right;
    }
    
    .footsmgirl {
    position: absolute;
    right: 0px;
    bottom: 106px;
    background: url(#);
    width: 68px;
    height: 65px;
    }
    
    .footbox {
    float: left;
    width: 100px;
    height: 100px;
    background: #717173;
    margin: 6px 1px 6px 0px;
    }
    
    .foottext {
    font-size: 11px;
    color: #858585;
    font-family: Arial;
    }
    
    .foottext a {
    font-size: 11px;
    color: #858585;
    font-family: Arial;
    text-decoration: none;
    }
    
    .foottext a:hover {
    font-size: 11px;
    color: #858585;
    font-family: Arial;
    text-decoration: underline;
    }
    
    .footimprove {
    margin: 7px 68px 1px 0px; 
    }
    
    .footform textarea {
    border: 1px solid #888888;
    width: 241px;
    height: 64px;
    padding: 3px;
    font-size: 12px;
    font-family: Arial;
    color: #444444;
    margin: 0px 0px 3px 0px;
    }
    
    .footform input {
    background: url(#);
    height: 27px;
    width: 65px;
    border: 0px;
    }
    /* @Group End Footer */
    Alex Stanford @alexstanford tumblog about.me in fb G+ K
    TechTalkin The Premier Community for Technology Enthusiasts and Professionals
    Full Ambit Media Zero Sacrifice Web Design & Development; Made in the USA @fullambit in fb G+ K

  5. #5
    @alexstanford Alex's Avatar
    Join Date
    Apr 2004
    Location
    Jacksonville, Florida
    Posts
    757
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Nobody?
    Alex Stanford @alexstanford tumblog about.me in fb G+ K
    TechTalkin The Premier Community for Technology Enthusiasts and Professionals
    Full Ambit Media Zero Sacrifice Web Design & Development; Made in the USA @fullambit in fb G+ K

  6. #6
    SitePoint Member
    Join Date
    Dec 2007
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Alex, I believe I have a similar bug in Safari
    I have a hidden <div> which opens with javascript and suppose to be a sort of popup floating layer.
    Not a chance.
    Safari treats absolute position as a relative one.
    I do not see any workaround for now. I'll change it for a separate page.

  7. #7
    @alexstanford Alex's Avatar
    Join Date
    Apr 2004
    Location
    Jacksonville, Florida
    Posts
    757
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by tspr View Post
    Alex, I believe I have a similar bug in Safari
    I have a hidden <div> which opens with javascript and suppose to be a sort of popup floating layer.
    Not a chance.
    Safari treats absolute position as a relative one.
    I do not see any workaround for now. I'll change it for a separate page.
    Yeah, I never did find a workaround.
    Alex Stanford @alexstanford tumblog about.me in fb G+ K
    TechTalkin The Premier Community for Technology Enthusiasts and Professionals
    Full Ambit Media Zero Sacrifice Web Design & Development; Made in the USA @fullambit in fb G+ K

  8. #8
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Alex View Post
    ... Below is the sample footer XHTML/CSS involved, div class="footsmgirl" is the div in question, as it does not align properly with footbg's top border.
    I missed your question before. Sorry

    I tried your posted code snippet, and yes, the .footsmgirl div is positioned right:0 but not aligned with the container top border.

    It is aligned with the viewport because it can't refer it's position to any element. Non of it's ancestor has position, so it's position origin goes to the viewport.

    Use your code and test this by apply position on these elements in turn; on html, on body, on .footbg.

    Then with position on .footbg, set margin:0 on body.



    @ tspr, do you have a (non)working code example, or rather a link?
    Happy ADD/ADHD with Asperger's

  9. #9
    @alexstanford Alex's Avatar
    Join Date
    Apr 2004
    Location
    Jacksonville, Florida
    Posts
    757
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Actually erik, I am done with that job, so the specific problem doesn't interest me beyond curiosity. But, thank you.

    Kind regards,
    Alex Stanford
    Alex Stanford @alexstanford tumblog about.me in fb G+ K
    TechTalkin The Premier Community for Technology Enthusiasts and Professionals
    Full Ambit Media Zero Sacrifice Web Design & Development; Made in the USA @fullambit in fb G+ K


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
  •