CSS horizontal menu breaking when zooming Chrome / Safari

CSS horizontal menu breaking when zooming Chrome / Safari

I read many similar topics and I tried the suggestions but it seems I
can't get this to work. I am a self-learner, not a professional just
building a website for my parents company and I am having a problem with
my menu. This is working fine in IE and Firefox (at least the versions I
have) but Chrome and Safari don't like it. Initially in Chrome it looks
good but if you zoom out it's breaking and in Safari for iPhone and iPad
it's even worse as the last item on my list is never inline with the rest.
What I read is that I need to to have white-space:nowrap; in my code and I
do but it's not helping, I was playing with the position attribute as well
but none of the values work. Maybe one strange thing about my menu is that
each li has an id tag but that's because I want a different image to hover
over each item and that's the way I could thing of doing it. I would
really appreciate some help, Thanks
Link to the website and code
below:http://redcoral-catering.com/index_catering_redcoral.php
Safari iPhone: http://redcoral-catering.com/images/photo.PNG
HTML:
<div id="navbar">
<ul>
<li id="zero"><a href="/index_catering_redcoral.php"> çà íàñ</a></li>
<li id="one"><a href="/redcoral_services.php"> óñëóãè</a></li>
<li id="two"><a href="/redcoral_cuisine.php">íàøàòà êóõíÿ</a></li>
<li id="three" ><a href="/redcoral_gallery.php">ãàëåðèÿ</a></li>
<li id="four"><a href="/redcoral_movies.php">ôèëìè</a></li>
<li id="five"><a href="/redcoral_celebs.php">êîé ñå å õðàíèë ïðè íàñ?</a>
</li>
<li id="six"><a href="/redcoral_contacts.php">êîíòàêòè</a> </li>
CSS:
#navbar {
width: 894px;
height: 57px;
margin: 0px auto;
padding-left:25px;
padding-top:1px;
/*clear:both;*/
white-space:nowrap;
}
#navbar ul {
font-family: Arial, Verdana;
font-size: 14px;
list-style: none;
margin: 0;
padding: 0;
width:100%;
}
#navbar ul li {
/* display: block; */
display: inline-block;
position: relative;
float: left;
/* border-right: 1px solid #1A1A18;*/
}
#navbar ul li ul { display: none; }
#zero{
background-image: url(images/menu/short.png);
}
#one{
background-image: url(images/menu/short.png);
}
#two{
background-image: url(images/menu/short.png);
}
#three{
background-image: url(images/menu/short.png);
}
#four{
background-image: url(images/menu/short.png);
}
#five{
background-image: url(images/menu/short.png);
}
#six{
background-image: url(images/menu/short.png);
}
#seven{
background-image: url(images/menu/short.png);
}
#navbar ul li a {
display: block;
height: 42px;
text-decoration: none;
text-align: center;
text-transform: uppercase;
font-family: Calibri, sans-serif;
font-size: 13px;
font-weight: bold;
color: #851212;
border: none;
padding: 10px 28px 5px 28px;
}
#zero a:hover { background-image: url(images/menu/22.png); }
#one a:hover { background-image: url(images/menu/22.png);}
#two a:hover { background-image: url(images/menu/24.png);}
#three a:hover { background-image: url(images/menu/22.png);}
#four a:hover { background-image: url(images/menu/22.png);}
#five a:hover { background-image: url(images/menu/23.png);}
#six a:hover { background-image: url(images/menu/26.png);}
#navbar ul li a:hover {
color: #DF0101;}