htmlcssurl-fragment

HTML fragment links work with CSS positioning?

Last night I decided to add HTML fragment links in my computer listing page. However, no matter the pattern of linking, or whichever browser I use, those fragment links are simply not navigatable.

http://icelava.net/mycomputers.aspx#SEPHIROTH

http://icelava.net/mycomputers.aspx#DIABLO

UPDATE on Answer: the links now flow correctly to the fragment locations after my mistake with the tag attribute has been highlighted.

I did not find any real answer, but from what I have read, there are hints to suggest that my use of CSS positioning to form the two-column layout with two DIVs may be giving the browser trouble in figuring the vertical location of the fragment links.

#ContentCol
{
   margin-right: 130px;
   padding: 3px;
}

#RightSideCol
{
   background-color: #fff;
   float: right;
   padding: 0px;
   width: 126px;
}

If that is the case, what would an appropriate approach be to allow HTML fragment links?

Solution

  • In order for those urls to navigate to your intended target, you need named anchors instead of the linked anchors that you have in your page. Example:

    <a name="SEPHIROTH" />

    (without the hashmark) instead of:

    <a href="#SEPHIROTH"> #1</a>

    Preferably, instead of using named anchors, you could also just give the element that you want to navigate an id attribute.

    <td id="SEPHIROTH">...</td>

    Another example. Try this link: http://icelava.net/mycomputers.aspx#FooterBanner You see, it scrolls down to your footer, because of the id attribute.