Hello, I have two questions regarding HTML on Neopets.

(1) Whenever I attempt to paste my HTML code for the petpage I receive this error message. (I will post the beginning of my HTML below, please let me know if you need more)

Invalid words or disallowed element names found in your style tags. (Class or ID names must be preceded with a . or #).

navbar

Okay, so I assume they mean change <ul id="navbar"> to <ul id="#navbar"> , but when I do the navigation bars appearance gets messed up. It simply reverts to a list of blue links at the top of the page. Could anyone help me with this?

(2) Instead of simply scrolling down the page, how would I get each section of the navigation bar (such as Contact Me and Requests) actually be a seperate page? If that is too difficult or not possible, how would I get it so the text within the sections are actually closer together rather than spaced so far apart.

HTML Code

<style type="text/css">


body { background: #778899; }


#Home {
background: #000000;
}

#About {
background: #000000;
}
#Favorites {
background: #000000;
}

#Requests {
background: #000000;
}

#ContactMe {
background: #000000;
}

#Neo {
background: #000000;
}
#Links {
background: #000000;
}
/*Navbar*/
#navbar {list-style:none;}

#navbar li {display:inline;
float:left;}

#navbar li a {text-decoration:none;
padding:5px;
background-color:#000000;
color:#C0C0C0;
font-weight:bold;
font-family:Sylfaen, Helvetica, sans-serif;}

#navbar li a:hover{}</style>



<ul id="navbar">
<li><a href="#Home">Home</a></li>
<li><a href="#About">About Me</a></li>
<li><a href="#Neo">Neopets</a></li>
<li><a href="#Favorites">Favorites</a></li>
<li><a href="#Requests">Requests</a></li>
<li><a href="#ContactMe">Contact Me</a></li>
<li><a href="#CLinks>Links</a></li>
</ul><br /><br />

<div style="height: 1500px; overflow: auto; overflow-y: hidden;">

<div id="Home" class="switch" style="height: 1500px;">

Thank you so much!