13 Replies Latest reply: Jul 4, 2012 10:36 AM by MurraySummers RSS

    Line appears below navigation on iPad

    brightbelt Community Member

      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.

        • 1. Re: Line appears below navigation on iPad
          MurraySummers CommunityMVP

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

          • 2. Re: Line appears below navigation on iPad
            brightbelt Community Member

            Many Thanks Murray for your suggestion - I had implemented that -2px margin when I was doing CSS-based rounded corners for the conent area but I wanted the top part of the content  to attach and meld to the navigation area because of the nav sharp corners. I have since changed by just using a Gif-based photoshop graphic with rounded corners for the footer only. I forgot to clear that code in the process.

             

            While that's a good change, I do see that this problem still persists. This issue goes back a ways and I have received emails from time to time from others with these same issues.  And as you correctly pointed out, it happens on the iphone as well.

             

            I appreciate your help and any fuirther ideas anyone might have.... !

             

            Many Thanks,

            Frank B.

            • 3. Re: Line appears below navigation on iPad
              MurraySummers CommunityMVP

              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.

              • 4. Re: Line appears below navigation on iPad
                osgood_ CommunityMVP

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

                • 5. Re: Line appears below navigation on iPad
                  osgood_ CommunityMVP

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

                  • 6. Re: Line appears below navigation on iPad
                    David_Powers CommunityMVP

                    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.

                    • 7. Re: Line appears below navigation on iPad
                      David_Powers CommunityMVP

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

                      • 8. Re: Line appears below navigation on iPad
                        brightbelt Community Member

                        Many Thanks to all you guys for helping. I re-did the sprite and as suggested, I widened the vertical gap between the two positions and the lines are now gone as far as I can tell.

                         

                        And thanks Osgood - I put your code in.

                         

                        There is still ONE possible issue but it may not be resolvable..... When using the touch screen to navigate, one gets a 'hit' (active) area that is the large rectangle that represents the top part of the sprite, INCLUDING the new added vertical space. So one gets a hit area that is way larger than the percieved link.

                         

                        Did I explain that ok? Also, it may help to know - I ended up adding 10 pixels of vetical space for this to work. I tried adding only 2-8 pixels but the lines were still there.  So I know this accounts for the hit area, but I'm not sure there's much we could do about it.

                         

                        Many Thanks to all you guys for helping !!

                        Frank B.

                        • 9. Re: Line appears below navigation on iPad
                          MurraySummers CommunityMVP

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

                          • 10. Re: Line appears below navigation on iPad
                            brightbelt Community Member

                            Thanks Murray - I did that. It helped to tighten my template structure but as far as I see, the active hit area is still larger. Thanks again for all your help....Frank B

                            • 11. Re: Line appears below navigation on iPad
                              MurraySummers CommunityMVP

                              Try applying it to the anchor tag.

                              • 12. Re: Line appears below navigation on iPad
                                brightbelt Community Member

                                Thanks Murray -  that comes much closer. The hit - active area is still slightly larger than the rollover but it's barely noticeable. I have to set the pixel height at 5px for that - any less causes part of the rollover to get sliced off. And setting it higher than 5px just increases the hit-active area again.

                                 

                                Many Thanks for all your help and for sticking with me on this. If I wanted this to be absolutely exact, I guess I could do it through Fireworks CS4  and javascript. But CSS is a better choice, from what I've heard.

                                Frank B.

                                • 13. Re: Line appears below navigation on iPad
                                  MurraySummers CommunityMVP

                                  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....