Safari Mobile - Named Anchors Broken when specifying body margins

[mattboy-slim]

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;
         margin-left: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?

Thanks,
Matt

 

[SrWebDeveloper]

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 Quirksmode.org/Safari bugs was:

Anchor (or "#name")links don't work when the target anchor is inside an overflowing element.

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.

-jim