XHTML-strict compliant Horizontal CSS list navigation

programming web dev
1

Hi, folks.
I put together a fairly [COLOR=“blue”]simple centered horizontal navigation bar[/COLOR] which is essentially a formatted unordered list, (as you probably guessed).

It works just fine until I add XHTML-strict doc type def to it.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

Then the menu gets all disfigured and squeezed to the left.:frowning:

Is there a shortcut to making this page XHTML-strict compliant without breaking the menu?
Here’s the file [COLOR=“blue”]archive[/COLOR] in case any of you folks are in a helping mood today. Not that you’d need the files since the code is pretty small and simple.

Thank you in advance for any insight.

[COLOR=“Red”][SIZE=“4”]EDIT:[/SIZE][/COLOR]
Ok guys, I managed to get it this far. The list is supposed to be inside a div which is centered in the page. What puzzles me is how the horizontal list gets broken even though the width of the containing div equals the sum of the widths of all buttons (136x4=544). Why is that? Logically it should be sufficient to accommodate them all. Is there a way to fix this?
The following is the updated version which is different from the page I linked to above.
[SIZE=“2”][FONT=“Tahoma”]Here’s the[/FONT][/SIZE]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Welcome to AM PM Appliance Repair</title>
<link href="style2.css" rel="stylesheet" type="text/css" />
</head>
    <body>
        <div id="navmenu">
            <ul>
                <li id="buttons"><a href="#">home</a></li>
                <li id="buttons"><a href="#">warranty</a></li>
                <li id="buttons"><a href="#">appointments</a></li>
                <li id="buttons"><a href="#">contact</a></li>
            </ul>
        </div>
    </body>
</html>

[SIZE=“2”][FONT=“Tahoma”]-And the CSS[/FONT][/SIZE]

[color="magenta"]
#buttons
{[/color]
	width[color="magenta"]:[/color][color="blue"]136px[/color][color="magenta"];[/color]
	height[color="magenta"]:[/color][color="blue"]30px[/color][color="magenta"];[/color]
	list-style-type[color="magenta"]:[/color][color="blue"]none[/color][color="magenta"];[/color]	
	font-family[color="magenta"]:[/color][color="blue"]Verdana[/color][color="magenta"];[/color]
	font-size[color="magenta"]:[/color][color="blue"]12px[/color][color="magenta"];[/color]
	text-align[color="magenta"]:[/color][color="blue"]center[/color][color="magenta"];[/color]
	line-height[color="magenta"]:[/color][color="blue"]30px[/color][color="magenta"];[/color]
	background-image[color="magenta"]:[/color][color="blue"]url(spritesheet.gif)[/color][color="magenta"];[/color]
	background-repeat[color="magenta"]:[/color][color="blue"]no-repeat[/color][color="magenta"];[/color]
	float[color="magenta"]:[/color][color="blue"]left[/color][color="magenta"];[/color]
[color="magenta"]}
#buttons a 
{[/color]
	color[color="magenta"]:[/color][color="blue"]#FFF[/color][color="magenta"];[/color]
	text-decoration[color="magenta"]:[/color][color="blue"]none[/color][color="magenta"];[/color]
	display[color="magenta"]:[/color][color="blue"]block[/color][color="magenta"];[/color]
[color="magenta"]}
#buttons a:hover
{[/color]
	color[color="magenta"]:[/color][color="blue"]#9F3[/color][color="magenta"];[/color]
	background-image[color="magenta"]:[/color][color="blue"]url(spritesheet.gif)[/color][color="magenta"];[/color]	
	background-position[color="magenta"]:[/color][color="blue"]0px -30px[/color][color="magenta"];[/color]
[color="magenta"]}
#navmenu
{[/color]
	margin[color="magenta"]:[/color][color="blue"]0px auto[/color][color="magenta"];[/color]
	padding[color="magenta"]:[/color][color="blue"]0px[/color][color="magenta"];[/color]
	width[color="magenta"]:[/color][color="blue"]544px[/color][color="magenta"];[/color]
	height[color="magenta"]:[/color][color="blue"]30px[/color][color="magenta"];[/color]
	border[color="magenta"]:[/color][color="blue"]1px solid red[/color][color="magenta"];[/color]
	text-indent[color="magenta"]:[/color][color="blue"]0px[/color][color="magenta"];[/color]
[color="magenta"]}[/color]

Oh, and here’s the sprite sheet just in case:
Please help:(
Thank you