Ok, in my sig, the site SearchBliss Web Tools has a top navbar (blue with white links). I want the links centered and I can't get it ti work. The problem is I am currently using padding which looks fine in FF and Opera, but is too far left on IE...so how can I center it so it looks good on all browsers?

Here id the CSS section in question:

#menu{
width:950px;
height:60px;
margin:0 auto;
background:#6AA2FD url(images/img04.gif);
}
#menu a{
display:block;
float:left;
padding:18px 14px 0 14px;
text-decoration:none;
font-size:1.5em;
font-weight:bold;
color:#FFFFFF;
}

I bolded the section that I'd need to change to get it to center. margin:0 auto didn't work, and text-align:center didn't either???
Any suggestions would be great?
Thanks!

You can't float and center at the same time AND unless it has a fixed width it will be as wide as the content. (so you it will be "text-align:center" but you can't tell)

Originally Posted by chrishirst

You can't float and center at the same time AND unless it has a fixed width it will be as wide as the content. (so you it will be "text-align:center" but you can't tell)

Rganks Chris, but when I remove the float:left and add "text-align:center", I get the menu links centered on top of each other instead of left to right...grrrrr. This is making me nuts!

float them AND set a fixed width with text-align: center.

Originally Posted by kline11

Rganks Chris, but when I remove the float:left and add "text-align:center", I get the menu links centered on top of each other instead of left to right...grrrrr. This is making me nuts!

It's stll stacking them...I must be missing something. I already have a fixed width in this section:

#menu{
width:950px;
height:60px;
margin:0 auto;
background:#6AA2FD url(images/img04.gif);
}

What am I missing?
Thanks Chris.

Aye but you then set the <a>nchor element to be display:block;

Originally Posted by kline11

It's stll stacking them...I must be missing something. I already have a fixed width in this section:

#menu{
width:950px;
height:60px;
margin:0 auto;
background:#6AA2FD url(images/img04.gif);
}

What am I missing?
Thanks Chris.

OK, here is what I have now, and it looks the same as it did before:

#menu a{
text-align:center;
float:left;
padding:18px 14px 0 14px;
text-decoration:none;
font-size:1.5em;
font-weight:bold;
color:#FFFFFF;
}

I tried removing the padding, that was worse. I really stink as CSS!
Thanks Chris,
John

This must be possible, right?!? Arrrg!

#menu a{
text-align:center;
display:block;
width:nn em|%|px|pt|ex
float:left;
padding:18px 14px 0 14px;
text-decoration:none;
font-size:1.5em;
font-weight:bold;
color:#FFFFFF;
}

OK, here is what I have and NO change???
#menu a{
text-align:center;
display:block;
width:950px;
float:left;
padding:18px 14px 0 14px;
text-decoration:none;
font-size:1.5em;
font-weight:bold;
color:#FFFFFF;
}

What a PITA! I really appreciate your help Chris.

But at 950 px it will be the width of the page, so that negates the float

Originally Posted by chrishirst

But at 950 px it will be the width of the page, so that negates the float

It doesn't seem to matter what the pixels are, 950, 500, or 200, it just stacks them on top of each other instead of left to right???

Her John

There are two ways i solve my coding problems, Firstly, add borders to the individual areas you are trying to fix, using a different colour for each one (in this case, the UL LI A and even DIV elements in your CSS file would have a different coloured 1px solid border.

This helps to show me where the problem lies. If that doesnt work, search the web for an example/tutorial that does do what i want, and then manipulate the code with my own values until it's padding, colours etc match what i want.

Below is what i was using on my main site a little while back.

#nav, #nav ul
{
background-color:#fff;
color:#000;
margin:0;
padding:0;
list-style:none;
}

#nav li
{
background-color:#fff;
color:#000;
float:left;
padding:0 1px 0 0;
}

#nav li a
{
background-color:#ccc;
display:block;
padding:5px;
}

Thanks,
I believe I found a solution and it looks good in IE and FF, however I cannoy test it in IE8 or Opera. If you or anyone else could take a look, that would be a help. Thqnks again Chris and solvision!

IE8 Ok, Opera 9.6 Ok, Opera 10 Ok

I can check earlier versions when I fire another machine up, probably not today though

Originally Posted by chrishirst

IE8 Ok, Opera 9.6 Ok, Opera 10 Ok

I can check earlier versions when I fire another machine up, probably not today though

Thanks Chris! I can't send you Talkapation until I "spread more around". I'd buy you a beer if I lived in the UK (You don't want an Ameriscan beer - we can't do it right). If you have a PayPal account, PM me the email and I send you a little "beer money".

I had enough American "beer" to last a lifetime a few years ago when on holiday (vacation) there

And have you no shame sir! Trying to bribe an Englishman like that.

Originally Posted by chrishirst

I had enough American "beer" to last a lifetime a few years ago when on holiday (vacation) there

And have you no shame sir! Trying to bribe an Englishman like that.

Sir, I have plenty of shame.

I wish I could get a "real" beer like I did many years back in London...with real foam, and room temprature the way beer was ment to be made...NOT cold. But since I can't, I would love to "send" you a beer as long as you drink it in my honor. PayPal email please.