HTML fragment links work with CSS positioning?

Question

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?

assplecake · Accepted Answer · 2009-01-30T02:59:44.323

3

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.

edited Jan 30 '09 at 02:59

answered Jan 30 '09 at 02:54

assplecake

349
2
5

OH! i forgot.... href="#fragment" links to another position in the page with that fragment link. It does not specify the link location itself. Thanks. – icelava Jan 30 '09 at 03:49

score 0 · Answer 2 · answered Jan 30 '09 at 03:13

If your code, you have, for example:

<a href="#SEPHIROTH">#3</a> Dell XPS M1530

You may want to add an id attribute:

<a id="SEPHIROTH" href="#SEPHIROTH">#3</a> Dell XPS M1530

When you click that <a>, it would 'jump' to itself. Is this what you want?

HTML fragment links work with CSS positioning?

2 Answers2