Span problem on Mac/Safari

HTML & CSS
1

I am trying to make this menu work on Mac. It is already displaying properly on windows/ IE6,7,8, Firefox, Chrome, Opera, but on Mac/Safari, Firefox it does not. You can view the html at http://lemy.co.uk
The CSS controling it:

#navMainWrapper{font-size:1.1em;height:23px;line-height:normal;width:957px;}

#navMain {
      float:left;
      width:100%;
	  font-size: 1.1em;
      }	  
#navMain ul {
      margin:0;
      padding: 0;
      list-style:none;
      }

#navMain li {
      float:left;
      margin:0;
      padding:0; 
	  height:23px;
      }
#navMain a {
      margin:0;
      padding:0 0 0 4px;
      float:left;
      background: url(../images/spriteme1.jpg) 0 0 no-repeat;  background-position: 0 -208px; height:23px;
      color: #dfdfdf;
      text-decoration:none;
      }
#navMain a span {
      padding:5px 33px 0 25px;height:18px;
      float:left;
      display:block;
      background: url(../images/spriteme1.jpg) 100% -185px no-repeat;
      color:#dfdfdf;
      }  
#navMain a:hover {
      background-position: 0 -254px;
      color: #dfdfdf;
      cursor: pointer;

      }
#navMain a:hover span {
      background-position: 100% -231px;
	  color:#dfdfdf;
      }

Any pointers on how to fix this would be great, i’ve been trying for a long time, but i’m no expert…

On Mac/Safari 3.2:
http://api.browsershots.org/png/orig...d0d53df44e.png

2

I had to ditch the span and eventually went with fixed width tabs.