CSS targetting Safari Only

mediamole · August 13th, 2009, 07:38 PM

I had a spacing issue with an unordered list which I styled with CSS for my global navigation.

The navigation looked fine in all browsers, apart from Safari 3. To fix the problem a friend recommended this CSS hack:

Code:

    <style type="text/css">
   @media screen and (-webkit-min-device-pixel-ratio:0){
      #nav-wrap li a, #nav-wrap ul li li a { padding:0 12px; }
      #nav-wrap ul li:hover ul { width:146px; }
      
   }
   </style>

This resolved the extra spacing added by Safari 3. The trouble was the hack was picked up by Chrome as well. But with a few adjustments it didn't look too bad.

The issue I now have is I dont need this hack for Safari 4, as without the hack the site looks fine; However, the hack is still needed for Safari 3 but if I add it Safari 4 also picks up the hack code.

I was wondering if anyone had come up with a way of targeting CSS for certain versions of Safari?