im making a website, it has a #logo and #navigation which is some tabs centered under the #logo. it was all working fine untill i put in the doctype declaration xhtml1.1. this is my code:

<div id="navigation">
<ul>
<li><a href="index.html"><span>Home</span></a></li>
<li><a href="contact.html"><span>Contact</span></a></li>
<li><a href="gallery.html"><span>Gallery</span></a></li>
<li><a href="team.html"><span>Team Members</span></a></li>
</ul>
</div>


#navigation a
{
border-top: 5px solid black;
color: #000;
background: #ffa20c url(images/lefttab.gif) left top no-repeat;
text-decoration: none;
padding-left: 10px
}

#navigation a span
{
background: url(images/righttab.gif) right top no-repeat;
padding-right: 10px
}

#navigation a, #navigation a span
{
display: block;
float: left;
}

/* Hide from IE5-Mac \*/
#navigation a, #navigation a span
{
float: none
}
/* End hide */

#navigation a:hover {
color: #fff;
background: #781351 url(images/lefttabhover.gif) left top no-repeat;
padding-left: 10px
}

#navigation a:hover span
{
background: url(images/righttabhover.gif) right top no-repeat;
padding-right: 10px
}

#navigation ul
{
text-align: center;
list-style-type: none;
padding: 0px;
margin: 0 0 0px 36%;
}

#navigation li
{
float: left;
margin: 0px;
display:inline;
}


anyonr know whats wrong?

Please post the URL to the page.

not got a url sorry, its for a project you see

Apparently your layout relies upon browsers' quirks modes. See also Activating Browser Modes with Doctype.