Mysidia Adoptables Support Forum - Profile.php and Online.php Aesthetic Problems

I found that the profile.php?user=USERNAME as well as the online.php ruins the CSS? They both show the text-size font enlarged. I used Google Chrome to 'inspect element' it, and it showed that the font-size:12px; was crossed out, therefore not applying to those two pages?
--- I installed a fresh copy of Mys, to see if it still happens. And it doesn't! So my edited site must have enlarged text due to my template...
Here is my CSS:

Code:

body {background:url(ploop.png)repeat;font-family:Verdana, Arial, Tahoma, sans-serif;font-size:12px;color:#503A2C;}

a {color:#4E2433;text-decoration:none;text-shadow: 0px 0px 10px #FFF;}

a:hover{color:#E8B1C4;text-shadow: 0px 0px 10px #000;}

#wrapper {width:950px;margin:0 auto;}

#box1 {height:100px;overflow:auto;margin:3px;background-color:#82655D;border:1px solid #68514B;color:#FFF;}

#box2 {height:100px;overflow:auto;margin:3px;background-color:#E6D5C3;border:1px solid #D8C8B8;color:#000;}

#box3 {height:100px;overflow:auto;margin:3px;background-color:#82655D;border:1px solid #68514B;color:#FFF;}

#box4 {height:100px;overflow:auto;margin:3px;background-color:#FFF;border:1px solid #E2E2E2;color:#000;}

#box5 {height:425px;margin:3px;background-color:#D9CCAE;border:1px solid #CCBFA5;color:#000}

#menu {height:27px;margin:3px;padding-left:3px;background-color:#7F5966;padding-right:0px;}

#content {height:388px;overflow:auto;margin:3px;background-color:#FFF;border:1px solid #E2E2E2;text-align:center;color:#503A2C;}

#content h1 {font-size:16pt;border-bottom:1px dotted #ccc;margin:10px;text-shadow:0px 1px 1px #FFF;background-color:#B5937E;color:#503A2C;}

#footer {height:50px;margin:3px;background-color:#B5A785;border:1px solid #A89B7C;color:#000;}

And here is my HTML:

Code:

<!DOCTYPE html>

<head><title>:BROWSERTITLE:</title>

<link rel="stylesheet" href="css/menu.css" type="text/css" />

<link rel="stylesheet" href="templates/wip/style.css" type="text/css" />

<!--[if lte IE 6]>

<link rel="stylesheet" media="all" type="text/css" href="media/dropdown_ie.css" />

<![endif]-->

</head>

<body>

<div id="wrapper">

<table border="0" width="100%">

<tr>

<td><div id="box1">Newest Addition:</div></td> <td><div id="box2">News:</div></td> <td><div id="box3">:SIDEFEED:</div></td> <td><div id="box4">Did you know...?</div></td>

</tr>

<tr>

<td colspan="3"><div id="menu">:LINKSBAR:</div></td><td colspan="1" rowspan="2"><div id="box5">CHATTTTTTTT</div></td>



</tr>

<tr>

<td colspan="3"><div id="content"><h1>:ARTICLETITLE:</h1><p>:ARTICLECONTENT:</p></div></td><tr/>

<tr>

<td colspan="4"><div id="footer"><a href='http://www.mysidiaadoptables.com'>Mysidia Adoptables</a> | Footer</div></td>

</tr>

</table></div>

</body>

</html>

ALSO:
The profile.php?user=USERNAME doesn't show the navbar... The nav bar disappears.
I view-sourced it, and it shows that the navbar is hidden?

Code:

<a class="hide" href="index.php" style="position: relative; top: 0px; left: 0px; display: none;">Home</a>

Why does it say "style="position: relative; top: 0px; left: 0px; display: none;""?? It's not on any other regularly-working pages (e.g. index.php)?
In index.php, it shows just simply

Code:

<a class="hide" href="index.php">Home</a>

In IE, it's even worse. o-o The template is completely deformed for both pages...
I would show you my website, but I don't want it revealed yet- so if necessary, I can PM you it :)

Thanks!