Nav menu is showing up pressed together in only Safari. Thoughts?

Question

I made this website using Zurb foundation framework, and to get a handrawn design for the nav menu I had to do it in a somewhat roundabout way. Here is the way I implemented it:

<div class="row">
    <div class="large-3 columns">
      <h1><a href="index.html"><img width="100px" height="100px" src="img/logo.png" onmouseover="this.src='img/logo_bold.png'"
onmouseout="this.src='img/logo.png'"></a></h1>
    </div>
    <div class="large-9 columns">
      <ul class="right button-group">

      <li><a href="features.html"><img class="nav_img" src="img/features.png" onmouseover="this.src='img/features_bold.png'"
onmouseout="this.src='img/features.png'"></a></li>
      <li><a href="download.html"><img class="nav_img" src="img/download.png" onmouseover="this.src='img/download_bold.png'"
onmouseout="this.src='img/download.png'"></a></li>
      <li><a href="contact.php"><img class="nav_img" src="img/contact.png"onmouseover="this.src='img/contact_bold.png'"
onmouseout="this.src='img/contact.png'"></a></li>

      </ul>
  </div>
</div>

Now whenever it is opened in safari 6.0.5 the nav gets squished together like this . Any thoughts on a workaround for safari?

Answer 1

It's the "Touch Events" in custom.modernizr.js . Remove that and you're good to go.

Here's a link to the same build but minus Touch Events:
http://modernizr.com/download/#-inlinesvg-svg-svgclippaths-shiv-mq-cssclasses-teststyles-prefixes-ie8compat-load

If you want to optimize for mobile/touch devices, one big improvement would be CSS sprites instead of js rollovers. Here's a dated but great CSS tricks article on the subject.