text floating over menu, wierd...

[Jarod]

any reason why my code is looking like this? http://i50.tinypic.com/2h87l3o.png

 

here is my html and css code:

	<div id="header"> <!-- start of header -->
	<div id="logo_span"><!-- Making space for logo (1000 x 144) --></div>
	<div id="top_menu-gd">
	<div id="top_menu-left">
	<div id="top_menu-right">
		<span id="date">Dec.14.2009</span>
		<ul>
			<li><a href="#">Home</a></li>
			<li><a href="#">About TrooKine</a></li>
			<li><a href="#">Community</a></li>
			<li><a href="#">Play Runescape</a></li>
		</ul>
	</div>
	</div>
	</div>
</div> <!-- end of header -->

#header { background: url("images/logo_2.png") no-repeat; }
#header > #logo_span { height: 144px; min-height: 144px; max-height: 144px; }
#header #top_menu-gd { background: url("images/top_nav_gd.png") repeat-x; color: #181818; }
#header #top_menu-left { background: url("images/top_nav_left_p.png") no-repeat top left; }
#header #top_menu-right { background: url("images/top_nav_right_p.png") no-repeat top right; padding: 45px 15px; }
#header #top_menu-gd #date { float: right; }
#header #top_menu-gd ul { margin: 0; padding: 0; list-style: none; display: inline; }
#header #top_menu-gd ul li { display: inline; }
#header #top_menu-gd ul li a { display: inline-block; padding: 0 15px; font-weight: 700; color: #181818; text-transform: uppercase; }
#header #top_menu-gd ul li a:hover { color: #919191; }
#header #top_menu-gd ul li a:first-child { padding-left: 0px; }

[vinpkl]

how do you want it to look like.

 

give more details.

 

vineet