Skip navigation
Currently Being Moderated

Line appears below navigation on iPad

Jul 3, 2012 5:41 PM

Hi, I'm using DW CS4 and Mac OSX. There's a faded black line that appears below my navigation when browsing on the iPad.

 

http://Www.frankbright.com

 

I have no idea why it occurs or how to fix it. I'd really appreciate any ideas or suggestions anyone might have on how to solve this problem.

 

Many Thanks,

Frank B.

 
Replies
  • Currently Being Moderated
    Jul 4, 2012 4:40 AM   in reply to brightbelt

    Also appears on iPhone.  Try removing the -2px margin you have on the #nav element (in your CSS rule) and see if that helps.

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 4, 2012 5:52 AM   in reply to brightbelt

    I'm wondering if it might be pieces of the sprite?  Try increasing the vertical separation between the top sprite and the bottom one in your sprite graphic.

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 4, 2012 6:01 AM   in reply to MurraySummers

    I think your onto something there Murray. I don't have an iphone to check on BUT if you increase the zoom in an ordinary browser a black line appears beneath the nav buttons which should not be happening.

     

     

     

    height: 5px; on the a tag??????


    .container #nav ul li a {
    display:block;
    font-size:13px;
    color: #fff;
    font-weight:bold;
    text-decoration: none;
    width:105px;
    height:5px;
    float: left;
    margin-bottom:0px;
    background-image:url(NavSprite.png);
    background-repeat:no-repeat;
    padding-top: .5em;
    padding-right:1.4em;
    padding-bottom: 1.3em;
    padding-left: 0.8em;
    }

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 4, 2012 6:04 AM   in reply to osgood_

    Also try adding the below to the css as iphone I think messes with the font size which in a restricted height container could be the cause of your problems.

     

    html,body { -webkit-text-size-adjust:none; }

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 4, 2012 6:10 AM   in reply to brightbelt

    This is a bit of a stab in the dark, but I think it might be coming from the lower half of NavSprite.png. If you zoom in, it's possible to see there are gaps in the line, and that they're blue at one end and black at the other, which matches the pattern of the background image.

     

    I would suggest creating a new version of the background image that has a wider vertical gap between the black band a the top and the rollover states.

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 4, 2012 6:12 AM   in reply to MurraySummers

    Ha! I should have refreshed the thread before replying. Great minds, and all that....

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 4, 2012 7:15 AM   in reply to brightbelt

    You could experiment with the "overflow:hidden" style on the #nav element (make sure you assign an explicit height to it.

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 4, 2012 9:19 AM   in reply to brightbelt

    Try applying it to the anchor tag.

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 4, 2012 10:36 AM   in reply to brightbelt

    I have just looked at the page again with my iPhone, and note that I'm now seeing some of the sprite ABOVE the menu buttons - about as much as I was seeing below before. There's still a mismatch there coming from something....

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points