Blue thingy in my layout Options

[Firiath]

Hmm... I can't find out what's going wrong
But my layout used to look like this:

click to enlarge

But after I left it for about a week, it turned to this:

click to enlarge

I'm pretty sure I'm missing something xD

Here's my code if you need it:

CODE

<style type="text/css">

body{
background-color: #000000;
scrollbar-arrow-color:#ffffff;
scrollbar-track-color:#000000;
scrollbar-shadow-color:#000000;
scrollbar-face-color:#000000;
scrollbar-highlight-color:#000000;
color:#ffffff;
}

body,table, td, li, p, div{font-size: 10px; font-family: small fonts; color: #FFFFFF;}
a, a:link{font:normal 10px verdana; color:#ffffff !important;}
a:active{font:normal 10px verdana; color:#ffffff !important;}
a:visited{font:normal 10px verdana; color:#ffffff !important;}
a:hover{font:normal 11px verdana; color:red !important;}
b{ color: #ffffff; font-family: small fonts; font-size: 10px; }
i{ color: #ffffff; font-family: small fonts; font-size: 10px; }
u{ color: #ffffff; font-family: small fonts; font-size: 10px; }
nav{color: red; font-family:verdana; fint-size:12px;}

#profile div#splash{display:none !important;}
#profile div#bestfriends{display:none !important;}
#profile div#contactme{display:none !important;}
#profile div#comments{display:none !important;}
#profile div#links{display:none !important;}
#profile div#stats{display:none !important;}
#profile div#recententries{display:none !important;}
#profile div#recentphotos{display:none !important;}
#profile div#favorites{display:none !important;}
#profile div#skills{display:none !important;}
#profile div#aboutme{display:none !important;}
#profile div#submissions{display:none !important;}
#header{display:none;}
#footer{display:none;}



#background{position: absolute; left: 50%; margin-left: -300px; top: 50%; margin-top: -300px; width: 600px; height: 600px; overflow:none;}

#navi{position: absolute; left: 50%; margin-left: -164.5px; top: 50%; margin-top: -70px; width: 339px; height: 59px; overflow:auto;}

#comment{position: absolute; left: 50%; margin-left: -165px; top: 50%; margin-top: 10px; width: 340px; height: 162px; overflow:auto;}



</style>




<div id="background">
<img src="http://i306.photobucket.com/albums/nn243/xzkdxrawrx/blastoff.png">
</div>


<div id="navi">
<center><a class="nav" href="http://createblog.com">Home</a> • <a class="navigation" href="http://createblog.com/home/">My Account</a> • <a class="navigation" href="http://xzkdxrawrx.createblog.com/layouts/">Layouts</a> • <a class="navigation" href="http://xzkdxrawrx.createblog.com/graphics/">Graphics</a></center>
</div>




<div id= "comment">
<form action='comment.php' method='POST'>


<textarea name='comment' cols='20' rows='4'></textarea>

<input type='submit' value='Comment' class='button' />

</form>
</div>

[Firiath]

Yeah probably.
The thing is, it showed properly a few times after the new nav was put in ._.
I'm pretty sure the blue gradient is from the nav xD