How to anchor the top of the page as "top"

Written By: Shadow
Submitted At: 2009-08-24 08:43:05
Num Views: 1058
Category: HTML / CSS

I need a bit of help again..
What I did was:

<h1 align="center"><a name="top">Random Images</h1>

And then at the bottom of the page:

<p>Back to the <a href="#top">top</a>.</p>

It works fine in Firefox, but in IE it says it's unable to display the page...

By Shadow @ 2009-08-24 08:43:05

The problem is you are telling it to go to a page called #top which does not exist. Firefox is clever enough to know that this is an anchor and just appends the #top to your page name, but IE... well the name says it all! :)

For example:
If your page is called "index.html"
Firefox will change the href property to "index.html#top"
While IE just goes and keeps the href property "#top"

What you need to do is change your page href to explicitly go to the current page.

If your page is called index.html and you want to go to the anchor called "top".

By PHPin24 @ 2009-08-24 08:57:08

I get what your saying.. But I get the same result when I change it.
Back to the <a href="pictures.html#top">top.</a>
Still works in Firefox, not IE.
Is there another way of doing this?

By Shadow @ 2009-08-24 09:09:27

I don't think this is the issue but I see another issue with your initial code

<h1 align="center"><a name="top">Random Images</h1>

There is no closing tag for the <a> tag

Change to

<h1 align="center"><a name="top"></a>Random Images</h1>

or
Change to

<a name="top"></a><h1 align="center">Random Images</h1>

IE might be picking up that the tag is not closed and therefor not registering it as an anchor thus trying to link to a page. If this still does not work send me the full HTML page.

If we can't figure that out we can do it with JS, but it is not recommended in this case.

By PHPin24 @ 2009-08-24 09:31:29

Nope.. Still nothing..
Here's the code:

<!DOCTYPE html PUBLIC �-//W3C//DTD XHTML 1.0 Transitional//EN�
�http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd�>
<html xmlns=�http://www.w3.org/1999/xhtml�>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Placing Pictures</title>
<link rel="stylesheet" type="text/css" href="../CSS/style.css" />
</head>

<body>
<a name="top"></a><h1 align="center">Random Images</h1>
<p>
Use <a href="http://hotwired.lycos.com/webmonkey/99/15/index0a.html" target="_blank">webmonkey</a>
to see how to correctly compress pictures.
</p></br></br>
<p><a href="http://www.google.com" target="blank"><img src="pics/broken_heart.jpg" width="410"
height="378" alt="Google.com" border="0" align="top" hspace="20" vspace="25" /></a>
Picture 1
</p>
<p>
<img src="pics/broken_heart.jpg" width="205" height="189" alt="Broken Heart" border="1" align="middle" />
Picture 2
</p>
<p>
<img src="pics/broken_heart.jpg" width="103" height="99" alt="Broken Heart" border="1" align="bottom" />
Picture 3
</p>
<p>
<img src="pics/broken_heart.jpg" width="103" height="99" alt="Broken Heart" border="1" align="left" />
Picture 4
</p>
<p>
<img src="pics/broken_heart.jpg" width="103" height="99" alt="Broken Heart" border="1" align="right" />
</p></br></br></br></br>
<p>
Back to the <a href="pictures.html#top">top.</a>
</p>
</body>

</html>

By Shadow @ 2009-08-24 09:53:10

In which IE are you testing? 8? I tested in 5.5, 6, 7 and Firefox. No issues.

The only thing left is that the file you are running is maybe not the same name or extension as the one you are linking to. I have done this many times as you don't always see the extension, but I doubt that.

Alternatively log onto skype so we can discuss

By PHPin24 @ 2009-08-24 10:26:18

Check the URL you are using for funny characters. If you are using a local copy of the file ensure there are no spaces in the url or characters like ` or ' or "

By PHPin24 @ 2009-08-24 11:06:51

Haha!
Great. Yeah my file name had a space and a funny character, fixed it and it works just fine now!
Thanks!

By Shadow @ 2009-08-24 11:10:43