2

How can I add css to be only read by safari? bascially a div needs moving 5pixels to the left, as it shows fine on ff/ie etc

Thanks

EDIT - added code

code:

#subheading
{
background-color: #004376;
color: #ffffff;
height: 25px;
padding: 10px;
margin: 0 933px;
margin-top: -25px;
width: 761px;   
}
1
  • 1
    Code to the site would be useful - I'd say it's very unlikely this is a Webkit bug, and that you could change the way you've coded it and it will work properly. Dec 4, 2009 at 19:39

2 Answers 2

5

you can have a check for a specific css property in webkit. This would likely work in chrome as well.

@media screen and (-webkit-min-device-pixel-ratio:0) {
        .someClass{
            color:#FF0000;
        }
    }
7
  • Thanks it seems to be a safari only bug? any chance I could get it only for this.
    – Elliott
    Dec 4, 2009 at 19:37
  • 1
    Are you sure the bug isn't in chrome also? I think they have the same rendering engine.
    – Jage
    Dec 4, 2009 at 19:41
  • yup I just checked and it looks fine.
    – Elliott
    Dec 4, 2009 at 19:42
  • Safari uses the same rendering engine as Google Chrome (webkit), so it's unlikely to have a problem occur in only one of the those. If it truly only occurs on Safari, you might consider a Javascript solution. Even better, try to figure out why the problem is really happening and figure out a way to avoid browser-specific CSS. Dec 4, 2009 at 19:45
  • Thanks I have checked on both mac and pc and its only in Safari, I have added the code above its the margin it seems to be having a problem with.
    – Elliott
    Dec 4, 2009 at 19:46
0
margin: 0 933px;
margin-top: -25px;
width: 761px;

This doesn't sound right. The first line sets both left and right margin to 933px. And the width is 761px. The total width of the element would be (933 * 2 + 10 * 2 + 761) = 2647px.

Is this what you want it to be?

4
  • I thought it would be something to do with this, but it seems to show fine on everything but safari. What would be the fix? thanks
    – Elliott
    Dec 4, 2009 at 19:54
  • You may have other overrides. Can you post a link to your page or a small test case that reproduces your problem?
    – Chetan S
    Dec 4, 2009 at 19:56
  • What should it look like? It looks the same in IE8, Firefox, Chrome to me.
    – Chetan S
    Dec 4, 2009 at 20:05
  • Safari(Win) too. The page you've linked appears the same in all browsers. I did not see any difference in Safari. The subheader is rendered towards the far right side of the menu bar.
    – Chetan S
    Dec 4, 2009 at 20:13

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.