iphone browsers displaying wrong menu background

[Rapha]

The top menus on

this website

display the wrong background color/image (black instead of white respectively transparent) in Safari and Chrome on my iPhone. I have no idea why, it works on all desktop browsers I tested, PC and Mac. I tried to change the images to transparent .png's but that didn't resolve the issue.
Why does this happen and how can I make sure it displays correctly on all mobile browsers?
Thanks!

a {
* * * * text-decoration: none;
* * * * color: #a9a9a9;}
a:hover, a:focus {
* * * * text-decoration: none;
* * * * color: #be1f2d;}
li {
* * * * list-style-type: none;
* * * * display: inline;}
#container {
* * * * position: relative;
* * * * top: 0px;
* * * * margin: 0px auto;
* * * * width: 860px;
* * * * min-height: 100%;
* * * * height: auto !important;
* * * * height: 100%;
* * * * border: none;}
#topmenu {
* * * * position: relative;
* * * * top: 0px;
* * * * left: 212px;
* * * * width: 660px;}
.menubuttons {
* * * * position: relative;
* * * * top: 0px;
* * * * width: 100px;
* * * * height: 34px;
* * * * background-image: url("../images/menubg.png");
* * * * background-repeat: repeat-x;
* * * * padding-top: 10px;
* * * * float: left;}
.menubuttons:hover {
* * * * position: relative;
* * * * top: 0px;
* * * * width: 100px;
* * * * height: 34px;
* * * * background-image: url("../images/menubg_h.png");
* * * * background-repeat: repeat-x;
* * * * padding-top: 10px;
* * * * float: left;}
.menubuttonactive {
* * * * position :relative;
* * * * top: 0px;
* * * * width: 100px;
* * * * height: 34px;
* * * * background-image: url("../images/menubg_a.png");
* * * * background-repeat: repeat-x;
* * * * padding-top: 10px;
* * * * float: left;}
.menubuttonactive a {
* * * * color: #be1f2d;}

<div id="topmenu">
* * * * <ul id="menulist">
* * * * * * <li class="menubuttonactive"><a href="portfolio.html">portfolio</a></li>
* * * * * * <li class="buttonspaces"><img src="images/spacer.png" width="68" height="36" alt="spacer" /></li>
* * * * * * <li class="menubuttons"><a href="about.html">about</a></li>
* * * * * * <li class="buttonspaces"><img src="images/spacer.png" width="12" height="36" alt="spacer" /></li>
* * * * * * <li class="menubuttons"><a href="downloads/raphael_zwyer_CV.pdf" target="_new">resume</a></li>
* * * * * * <li class="buttonspaces"><img src="images/spacer.png" width="180" height="36" alt="spacer" /></li>
* * * * * * <li id="contactrollover">
* * * * * * * * <div class="menubuttons">
* * * * * * * * * * <a href="mailto:info@raphaelzwyer.com" target="_new">contact</a>
* * * * * * * * * * <span id="addressbox">
* * * * * * * * * * * * <p id="email"><a href="mailto:info@raphaelzwyer.com" target="_new">info@raphaelzwyer.com</a></p>
* * * * * * * * * * * * <p id="phone"><a href="tel:917-650-9534" target="_new">917-650-9534</a></p>
* * * * * * * * * * * * <p id="address">143 leonard street, apartment 5, brooklyn ny 11206</p>
* * * * * * * * * * </span>
* * * * * * * * </div> <!-- end of menubuttons -->
* * * * * * </li> <!-- end of contactrollover --> 
* * * * </ul> <!-- end of menulist --> 
* * * </div> <!-- end of topmenu -->

[theyoker]

I ran it on an Iphone simulator and it works. Tested it on my tablet with Chrome and its default internet Browser and it works. I can't really say
beyond that.