Not sure if it's my coding or an Win IE bug (works fine on all other recent browsers on both PC and Mac including Mac IE), but the simple inclusion of a '#' in a href interferes with the correct css display of the link - in this case it wrongly takes on the 'menu' div style.

Here's the page: http://www.selectivemutism.info/test.html.

...and the links:

<a href="#top">Top</a> (displays incorrectly)

<a href="top">Top</a> (displays correctly)


...and the code:


<html>

<head>
<style type="text/css" media="screen"><!--
body, html {
color: #333;
font-size: 10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
background-color: white;
margin: 0;
padding: 0;
height: auto }

p, ul, li, td {
font-size: 10px;
font-family: Verdana, Arial, Helvetica, sans-serif }

#menu a, a:visited, a:active {
color: #636;
text-decoration: none;
display: block;
margin-right: 20px;
margin-left: 20px;
padding-top: 5px;
padding-bottom: 5px;
border-bottom: 1px solid #ccc }

#menu a:hover {
color: black;
text-decoration: none;
display: block;
margin-right: 20px;
margin-left: 20px;
padding-top: 5px;
padding-bottom: 5px;
border-bottom: 1px solid #ccc }

#menu p {
padding-left: 15px }

a, a:active {
color: #c00;
text-decoration: underline }

a:visited {
color: #777;
text-decoration: underline }

a:hover {
color: #000;
font-weight: normal }

--></style>
</head>

<body>
<a id="top" name="top"></a><a href="#top">Top</a>&nbsp;|&nbsp;<a href="(EmptyReference!)">Home</a>&nbsp;|&nbsp;<a href="(EmptyReference!)">Privacy</a>&nbsp;|&nbsp;<a href="(EmptyReference!)">Disclaimer</a>
<p><br>
<br>
<br>
This is the correct displaybr>
<br>
<a href="top">Top</a>&nbsp;|&nbsp;<a href="(EmptyReference!)">Home</a>&nbsp;|&nbsp;<a href="(EmptyReference!)">Privacy</a>&nbsp;|&nbsp;<a href="(EmptyReference!)">Disclaimer</a></p>
</body>

</html>

Can anyone explain please?