Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Aug 2012
    Location
    Brooklyn, New York
    Posts
    11
    Thanks
    3
    Thanked 0 Times in 0 Posts

    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;}

    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
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    I had a similar issue with iPhones with a button - have a look at this thread for more details. Sounds like it might be in the same area.

  • Users who have thanked SB65 for this post:

    rapha (10-17-2012)

  • #3
    New Coder
    Join Date
    Aug 2012
    Location
    Brooklyn, New York
    Posts
    11
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Tx!

    Thank you SB65!

    Could indeed be a similar issue.
    Will give it a shot.

    I guess
    Code:
    -webkit-appearance:none
    goes in the CSS file rule related to those buttons, right?

    What if I have webkit transparencies or embedded fonts in my style sheet, would those code lines affect each other? Just curious.

  • #4
    New Coder
    Join Date
    Aug 2012
    Location
    Brooklyn, New York
    Posts
    11
    Thanks
    3
    Thanked 0 Times in 0 Posts
    I tried it with the recommended code in the style sheet.

    Unfortunately it didn't resolve the problem.

    Here's what it (still) looks like on the iPhone (Safari and Chrome):


    instead of (all desktop browsers):


    Maybe I just didn't use your code the right way?


  •  

    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
    •