CSS horizontal menu breaking when zooming Chrome / Safari - iphone

Question

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:
HTML:
<div id="navbar">
<ul>
<li id="zero"> за нас</li>
<li id="one"> услуги</li>
<li id="two">нашата кухня</li>
<li id="three" >галерия</li>
<li id="four">филми</li>
<li id="five">кой се е хранил при нас? </li>
<li id="six">контакти </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;}

Answer 1

Try applying the following settings:
html, body {
margin:0;
padding:0;
}
#navbar {
width: 857px; /* updated width to center properly */
height: 57px;
margin: 0px auto;
/*padding-left:25px;*/
padding-top:1px;
white-space:nowrap;
}
#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 26px 5px 26px; /* decreased padding very slightly */
}
Also try placing this meta tag in your header:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Let me know if that solves the issue.