Safari problems...

[Alex]

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

[Blake Tallos]

So what are you saying here? Yeah theres alot of Problems with safari. Theres ways to solve issues.

[Dan Schulz]

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.

[Alex]

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.

<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>

/* @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]

Nobody?

[tspr]

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.

[Alex]

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.

[Erik J]

... 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?

[Alex]

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