Code Interference..., ...could it be messing up my navigation bar?!?!?! Options

[Laurygrl]

Hi...

I recently added a code to my profile that would give me a 'friend space' with the image rollover feature.

However, I noticed that it seems to be messing up my navigation bar's description area. When the code is inserted, it makes the description illegible. Here is my MySpace.

These are the codes that I am currently using:

Navigation Bar

CODE

<style type="text/css">
.navbardiv { padding-top:4px;position:absolute; z-index:7; width:800px; height:22px;left:50%; top:0%; margin-left:-400px; margin-top:127px;text-align:center; background-color:744343; color:D8CCCC;}
a.navbar:link, a.navbar:visited, a.navbar:active, a.navbar:hover {color:A37B7B; text-decoration:none; filter:none; }
* html .navbardiv { height:25px; }
div table table tr td font {visibility:hidden;}
div table table table tr td font {visibility:visible;}
a.navbar span { display:none; }
a.navbar:hover span { position:absolute; top: 25px; left:0px; width: 800px; height:25px;z-index:8; color:D8CCCC; background-color:744343; filter:none;text-align:; text-decoration:none; display: block; }
</style>
<div class="navbardiv"><a href="http://home8.myspace.com/index.cfm?fuseaction=user" class="navbar">home.<span>... 'cause there is no place quite like it.    </span></a>  ♥  <a href="http://collect.myspace.com/index.cfm?fuseaction=invite.addfriend_verify&friendID=24120849" class="navbar">add me...<span>... but not just because you want an impressive 'friends list'.   </span></a>  ♥  <a href="http://mail.myspace.com/index.cfm?fuseaction=mail.message&friendID=24120849" class="navbar">message me...<span>... and put a smile on my face.   </span></a>  ♥  <a href="http://collect.myspace.com/index.cfm?fuseaction=block.blockUser&userID=24120849" class="navbar">block.<span>... but why would you want to do a thing like that?   </span></div>

Friend Space/ Image Rollover

CODE

<style stype="text/css">
a span{display:none;}
a:hover span {display: block;
position: absolute; top: 985px; left: 820px; width:100px;
padding: 0px; margin: 0px; z-index: 5;
color: white; background: black;filter:none;
font-size: 10px;font-family: small fonts; text-align: left; text-decoration:none;}

.hidethem {visibility:hidden; display:none;}
</style>

<fieldset><legend><font color=#000000>friends are your needs answered.</font></legend><p>
<a href="http://profile.myspace.com/index.cfm?fuseaction=user.viewprofile&friendid=66449155">sierra: my beautiful niece.<span><img src="http://i42.photobucket.com/albums/e349/laurygrl/SierraMySpace.jpg"></span></a><br>
<a href="http://profile.myspace.com/index.cfm?fuseaction=user.viewprofile&friendid=48369780">liam: my drunken partner-in-crime.<span><img src="http://i42.photobucket.com/albums/e349/laurygrl/LiamMySpace.jpg"></span></a><br>
<a href="http://profile.myspace.com/index.cfm?fuseaction=user.viewprofile&friendid=52227695&MyToken=437be16d-97cf-45ce-bec2-626d3c6c7914">chris p.: long-lost and refound.<span><img src="http://i42.photobucket.com/albums/e349/laurygrl/ChirsMySpace.jpg"></span></a><br><a href="http://profile.myspace.com/index.cfm?fuseaction=user.viewprofile&friendid=20113117">melissa: g-town represent.<span><img src="http://myspace-794.vo.llnwd.net/00513/49/74/513534794_m.jpg"></span></a><br><a href="http://profile.myspace.com/index.cfm?fuseaction=user.viewprofile&friendid=19260935">chris c.: and all of our dumpster chats.<span><img src="http://myspace-527.vo.llnwd.net/00883/72/54/883404527_m.jpg"></span></a><br><br><br><br><br><br><br><br><br><center><a href="http://home.myspace.com/index.cfm?fuseaction=user.viewfriends&friendID=24120849">
more.</right></center></fieldset>

Was wondering if anybody knew why this was doing it and/or if there was a way to fix this.

Also, could someone let me know if the image rollover is aligned in the box. I am new to the who div alignment thing, and I didn't know if there was the possibility that it would show up differently on another computer.

Thanks. I appreciate all of the help anybody can give me.