www.webdeveloper.com
Results 1 to 2 of 2

Thread: iphone browsers displaying wrong menu background

Hybrid View

  1. #1
    Join Date
    Aug 2012
    Location
    New York
    Posts
    13

    iphone browsers displaying wrong menu background

    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!

    Code:
    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;}
    HTML Code:
    <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 -->

  2. #2
    Join Date
    Oct 2012
    Posts
    78
    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.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles