Changing default starting position of #anchor

Question

Assuming your <a> tag has no content, add a class to it tag with a position:relative; top:-50px;

Depending on your document, you my also have to wrap it in an absolute <div>

This should be cross-browser compatible if implemented correctly.

EDIT

This is the test I’ve done locally and it works fine in FF 3.6

<html>

    <body style="margin:0; padding:0;">
        <div style="position:fixed; height:50px; background-color:#F00; width:100%">
        Fixed header
        </div>
        <div style="padding-top:50px">
            <div style="height:100px; margin-top:10px; background-color:#0F0"><a href="#linkhere">Go to anchor</a></div>
            <div style="height:100px; margin-top:10px; background-color:#0F0">Blah</div>
            <div style="height:100px; margin-top:10px; background-color:#0F0">Blah</div>
            <div style="height:100px; margin-top:10px; background-color:#0F0">
                <a name="linkhere" style="position:relative; top:-75px;"></a>
            Link here</div>
            <div style="height:100px; margin-top:10px; background-color:#0F0">Blah</div>
            <div style="height:100px; margin-top:10px; background-color:#0F0">Blah</div>
            <div style="height:100px; margin-top:10px; background-color:#0F0">Blah</div>
            <div style="height:100px; margin-top:10px; background-color:#0F0">Blah</div>
            <div style="height:100px; margin-top:10px; background-color:#0F0">Blah</div>
            <div style="height:100px; margin-top:10px; background-color:#0F0">Blah</div>
            <div style="height:100px; margin-top:10px; background-color:#0F0">Blah</div>
            <div style="height:100px; margin-top:10px; background-color:#0F0">Blah</div>
            <div style="height:100px; margin-top:10px; background-color:#0F0">Blah</div>
            <div style="height:100px; margin-top:10px; background-color:#0F0">Blah</div>
            <div style="height:100px; margin-top:10px; background-color:#0F0">Blah</div>
            <div style="height:100px; margin-top:10px; background-color:#0F0">Blah</div>
        </div>
    </body>
</html>

Leave a Comment Cancel reply