Shurvir Mori Shurvir Mori - 2 months ago 8
CSS Question

how can I give different css for safari browser

I wanna give different css for safari. Because my code works perfect in chrome and Firefox. But it destroy the structure in safari. so, I want to give different stylesheet for safari.
I already tried,

button{
margin: 0px 10px 0px 0px /* Safari */;
margin: 0px 10px 0px 20px /* chrome */;
}


This is just one example, but there are so many things, which break in safari.

Answer

I agree rajveer mori, try this code

 <head>
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
        <style type="text/css">audio {display: none;}</style>
    </head>
    <body>
    <ul id="nav-two" class="nav">
        <li>
            <a href="#">Home</a>
            <audio id="sound" controls preload="auto"><source src="http://soundbible.com/mp3/MP5_SMG-GunGuru-703432894.mp3" controls></source></audio>
        </li>
        <li><a href="#">About</a></li>
        <li><a href="#">Clients</a></li>
        <li><a href="#">Contact Us</a></li>
    </ul>
    <script>
    $("#nav-two a")
      .each(function(i) {
        if (i != 0) {
          $("#sound")
            .clone()
            .attr("id", "sound" + i)
            .appendTo($(this).parent());
        }
        $(this).data("beep", i);
      })
      .mouseenter(function() {
        $("#sound" + $(this).data("beep"))[0].play();
      });
    $("#sound").attr("id", "sound0");
    </script>
    </body>