Navigation bar (PROBLEM)

[Nattynooster]

Hello, I'm making a website for a friend of mine, located at http://www.theconsolelounge.co.uk/catherine But as you might of noticed, the navigation bar is not doing what it is supposed to be doing, I'm trying to make it fit all onto one line on 800x600, It should do this anyway, but for some reason it won't! It just refuses

here's the #buttons code

#buttons
{
width: 800px;
margin: 0 auto;
padding: 0%;
margin-left: -16%;

[kako13]

Hello, I'm making a website for a friend of mine, located at http://www.theconsolelounge.co.uk/catherine But as you might of noticed, the navigation bar is not doing what it is supposed to be doing, I'm trying to make it fit all onto one line on 800x600, It should do this anyway, but for some reason it won't! It just refuses

here's the #buttons code

#buttons
{
width: 800px;
margin: 0 auto;
padding: 0%;
margin-left: -16%;

Well I'm not 100% of this but you might try adding floating property to your CSS.

More information:
http://www.yourhtmlsource.com/stylesheets/csslayout.html

[Airshow]

Best thing would be to purge floats completely but that seems not to be possible because (inexplicably) you lose control of height and width of the li/a elements, at least in IE6 and hence lose some of the visual effect.

Try this:

#menu {
	background:url("images/menubg.gif") repeat-x top;
	height: 163px;
	margin-bottom: 8px;
}

#buttons {
	width: 100%;
	margin: 0 auto;
	padding: 0%;
	position: relative;
	left: 50%;
	margin-left: -325px;
}

#buttons ul {
	padding-top: 126px;
	list-style-type: none;
}

#buttons li {
	display: inline;
	text-align: center;
}

#buttons a {
	display: block;
	float: left;
	width: 126px;
	height: 27px;
	background: url(images/menu.gif) no-repeat;
	text-align: center;
	text-decoration: none;
	color: #000000;
	font-weight: bold;
	font-size: 14px;
	padding: 10px 0 0 0;
	margin-left: 4px;
}

#buttons a:hover {
	background: #FFFFFF url(images/menu_hover.gif) no-repeat;
}

I have only tested in IE6 so recommend testing in other browsers.

I'm sure there must be a simpler solution but can't spot it.

Airshow

[Nattynooster]

Looks great on my browser, trying others now! thanks rep for both of you

[MidiMagic]

If you have a border, margin, or padding, it goes OUTSIDE the size attribute. This makes the total width greater than 800px.