Forum Moderators: open
In my html I used to have <a name="top"></a> right after the opening BODY tag, and then could refer it from anywhere in page as <a href="#top">Go back to top</a>.
In XHTML, I tried changing this definition to <a id="top"></a> but it does not validate! What am I missing?
Nick
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head><body bgcolor="#FFFFFF">
<a id="Top"></a>
</body>
</html>
And it validated fine at W3C's validator. What level of XHTML did you use?
thanks!
try validating this:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<title>Test</title>
</head>
<body>
<a id="top"></a>
</body>
</html>
Put it in a block level element like <p> or <div>....
Nick
<body><h6><a id="top"></a></h6><div id="content"> .....tons of content
<div id="navigation"> ...some layout for navigation at the top of the page, but i put it later because this is the idea of a table-less design!
this validates. now the issue is i have my content DIVs at the top of the page (immediately after body) and my navigational DIVs later on in the page. since the <a id="top"> is thus placed only above the content DIVs, it does not really link to the top of the page but to the top of the content. how to get around this? if i put navigational DIVs above content, it seems to work but then i lose all the value of using a table-less design!
hoping to put A right at the top, i tried something like this:
<body>
<div style="left:0px; top:0px"><a id="top"></a></div><div id="content"> .....tons of content
<div id="navigation"> ...some layout for navigation at the top of the page, but i put it later because this is the idea of a table-less design!
doesnt work either. still points to top of content DIV because that is where this particular DIV is located :(
any thoughts?
[edited by: craig1972 at 9:20 am (utc) on Mar. 31, 2003]
thanks.
<body>
<div style="position:absolute; left:0px; top:0px"><a id="top"></a></div>
i work with opera 6.05 and 7.3 ...neither works.
<body id="top">
an id doesn't have to be in anchor tag..
Suzy
1. "Body ID=" works in Opera and Mozilla. Does not work in IE.
2. So I try both. Put the ID "TOP" in the Body as well as the A ID=top immediately after the body tag. Now, it works in all browsers. However, now, it doesn't validate! Because I have two "IDs" which are the same ("top") and I cannot change the name because of HREF in the page later on..
Any ideas for what I can do? My current code is below, it works in all browsers I test with, but does not validate:
<body id="top"><h6><a id="top"></a></h6>
also I think the newer browsers understand the <a href="#top">
without there actually being an id="top" anywhere in the HTML
so I tested it using a different id name and it still worked
Suzy
I am using IE 6.0.2800.1106. Using only <body id="top"> does not work in this IE.
Using A HREF="#top", without an actual ID being present works in IE but does not work in Gecko and Opera engines.
So I am still stuck
It seems that IE doesn't like the id in the body tag though why I don't know
is the start of your content already in a div or table with a unique ID? if so then use that name
or
try this
<body><span id="top"></span>
<p>start your content....</p>
Suzy
That does it SuzyUK. You rock! Thanks so so much!
the code below validates fine with [validator.w3.org...]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head><body><span id="topofpage"></span>
<p>top of page</p>
<p>insert "foo text"</p>
<p><a href="#topofpage">go the top please</a></p>
</body>
</html>
HTML Tidy warns about "empty" tags, but it's not invalid.
Puzzled
Suzy
Thats because you and HTML Tidy seem to be working with "XHTML 1.0 Transitional". I am working with XHTML 1.1 (Strict).
You can try the WDG validator which also accepts raw HTML input to validate:
[htmlhelp.com...]
Following is the code I am using:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body><span id="topofpage"></span>
<p>top of page</p>
<p>insert "foo text"</p>
<p><a href="#topofpage">go the top please</a></p>
</body>
</html>
Also, in my code, I start with DIV tags, not P. Wonder if that makes a difference because DIVs are BLOCK LEVEL elements.
If you are using divs then the first div that you have content in should have an id or class name? Could you use the id name of that div for your link?
I don't think your absolutely positioned div should make a difference...but...
Suzy
<a href="#">top of this page</a>I'm not sure if this is formally correct, but it probably still validates, and definitively works as expected.
When I click on "BACK TO TOP",
OPERA:
TAkes me to almost top, but not top.
MOZILLA/PHOENIX:
Takes me to almost top, but not top.
IE:
Does not work at all. Takes me nowhere.
NOTES:
1. Note that I also have a commented <SPAN ID="TOP"> code in the sample file, immediately after the BODY, you can uncomment that and try it out too. Doesnt work either.
2. The code is valid XHTML 1.1. Geocities includes some crap code at the bottom which you can remove (it is after the </HTML> tag) and then validate it if you wish.
Thanks for any ideas![]
It works in Mozilla and IE, but does not work in the "strict compliance with standards" Opera..unfortunately. Makes for a superb interim solution though! :)
should do it as this is the id of the div you have at the top of your page
Suzy
<added>you may want to remove that link, it's not allowed ;)</added>
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>title</title>
<meta http-equiv="Content-Language" content="en" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
#top {position:absolute;top:0;left:0;}
</style>
</head>
<body><div id="top"> </div>
<p>blablabla page content......</p>
<p><a href="#top">Top of page</a></p>
</body>
</html>
This should take you to the very top of the page in both IE6 and Mozilla. IE6 seems not to recognise the div unless there is some content in it - hence the non-breaking space.
Does it work for you?
<added>Seems OK for Opera 6 and 7 too</added>
thanks suzyUK, i tried making id=leftbar too as it would save me one extra DIV, but doesnt work in opera and mozilla..
solved. thanks a bunch guys!
Its for reasons like this that I stick to XHTML 1.0 Transitional or HTML 4.01 Transitional for the vast majority of my sites. I'm a sucker for standards too, but I don't feel that the time is right yet to go over to XHTML 1.1 - mostly because IE just can't handle it, forcing you to use loads of hacks like the one above (and it can screw up your javascript too).
