Safari Mobile - Named Anchors Broken when specifying body margins

Discussion in 'Web Design and Development' started by mattboy-slim, Feb 17, 2009.

  1. mattboy-slim macrumors newbie

    Feb 17, 2009
    On mobile Safari (iPod/iPhone), named anchors do not work if the body margins are specified (in external CSS or inline).

          body {
          background-color: #ffffff;
             margin-top: 0px;
          <a id="top" name="top">This is the top</a>
          <a href="#top" class="center">Back to top^</a>
    The named anchor works just fine if I remove the CSS-specified margins, but as soon as I re-add them, the named anchors do not work again. I spent 15 minutes removing different chunks of the code to determine what the problem was, but I can find no fix through Google searches or the like.

    Any suggestions or knowledge on the subject?

  2. SrWebDeveloper macrumors 68000


    Dec 7, 2007
    Alexandria, VA, USA
    Why both the name and ID in the anchor tag? As an experiment use only the name (for any DOC TYPE other than XHTML strict) or use only the id if XHTML strict. If no DOC TYPE is specified, add the right one - it helps with validation when debugging issues like this.

    The only related anchor bug I could find at bugs was:

    If my id/name advice doesn't work I need to see your center class which you referenced in your HTML but did not include in your post, wondering if there is an overflowing element issue. If all else fails, I can test on my iphone 3G if you gimme the URL, I keep it updated, too. On a side note, in an overflowing situation add overflow: hidden or temporarily add borders around all elements to see what's overlapped, visually, and adjust accordingly.

    I covered all the bases in this reply, hopefully at least one of these suggestions will fix ya.


Share This Page