CSS horizonatl menu help

Hello,

I'm working on a project. I'm trying to style a horizontal menu, and it has dots and it's not allowing me to align it anywhere. Any help appreciated.

See my site here: webpuffs.com/tests

here's my css:

Html:

 

you can change the float left and padding value and align it anywhere.

 

Try to set the width of the <li> tag .

 

i am also got lot of problem,please help me out

 

You got WAY too complex on your CSS. The 'hide from IE mac' is proof enough of that.

Let's see... should probably be using a reset letting us axe a whole bunch of declarations, condense some values, floats are inherently display:block, so there's no reason to be stating that at the same time, since there are no dropdowns you can dodge a whole bunch of issues by making the LI display:inline... your HTML is ul="navigation" - but your CSS is #navigation UL. Since you have no UL inside your first UL, that code does nothing.... and how big are these 'tab' images you are trying to use? Since they are likely a pixel metric using EM fonts is PROBABLY going to break the layout on large font/120dpi machines... in any case I suspect those images should probably be a single image, not multiples (using sliding doors).

something like this:

/* null margins and padding to give good cross-browser baseline */
html,body,address,blockquote,div,
form,fieldset,caption,
h1,h2,h3,h4,h5,h6,
hr,ul,li,ol,ul,
table,tr,td,th,p,img {
	margin:0;
	padding:0;
}

img,fieldset {
	border:none;
}

#navigation {
	list-style:none;
	/* assuming the hover states are 30px tall */
	font:normal 16px/20px arial,helvetica,sans-serif;
}

#navigation li {
	display:inline;
}

/*
	don't forget :active and :hover for keyboard navigation, 
	and we can use a single image to create your backgrounds by
	placing the 'subimages' in each 'corner' - removing the
	'delay' on first hover.
*/

#navigation a {
	float:left;
	padding-left:10px;
	text-decoration:none;
	color:#FFF;
	background:#0E49B1 url(images/navigation.png) top left no-repeat;
}

#navigation a span {
	display:block;
	padding:5px 10px 5px 0;
	background:url(images/navigation.png) top right no-repeat;
}

#navigation a:active,
#navigation a:focus,
#navigation a:hover {
	color:#FFF;
	background-color:#857E67;
	background-position:bottom left;
}

#navigation a:active span,
#navigation a:focus span,
#navigation a:hover span {
	background-position:bottom right;
}

Code (markup):

Of course that reset is going to likely make you have to rewrite all the rest of your CSS to deal with it, and I guessed as to the image makeup - I'd have to see the images you want to use in order to tailor it properly.