Centering horizontal links w/paddings

CSS Centering and Padding

[MWpro]

Here is a small problem I have encountered while completely redoing a client's site from tables to css.

We have a 750px wide div with 6 links in them, each at 12px. When they are put on the page, they clutter together like normal text should: understandable. My solution to space them out was to add this in the css:

a {
other link properties up here;
text-align: center;
padding-right: 50px;
}

It spaces them out pretty well, however, they are not completely centered because the last link has a padding-right of 50px. I could just work around it by adding extra divs, but I am wondering if there is a cleaner way to center the links with spacing in between?

[Birdman]

You could try:

a{
width: 12.5%;
}

...or

a{
margin: 0px 25px 0px 25px;
}

[MWpro]

Very nice solutions, thank you.

[DCElliott]

Using %ages has the added advantage of allowing the link elements to "squish" when the page is resized horizontally. On one of my pages I have a crossways A - Z alpha index made with CSS buttons that shrink in both width and spacing so that they always take up the same relative width on the page. Experiment with this and I think you can have very nice "accordian" links.

DE

[MWpro]

At the moment I have a fixed layout, but I will keep that in mind when I redo my fluid business site in css, thanks :)

I've got another question, this time concerning netscape 4 and links.

Say I have some code like this:

<div id="links">
<a href=".html">Link One</a>
<a href=".html">Link Two</a>
.... etc
</div>

and here is the relavent css:

#links a {
text-align: center;
margin: 0px 25px 0px 25px;
}

In IE and Opera, I get the effect I want, which is having the links horizontal right next to each other. But netscape 4 goes crazy and puts them vertical, right under each other. Any suggestions?

[grahamstewart]

Try ditching the text-align:center - it isn't doing anything anyway.

[MWpro]

You're right, it isn't doing anything.

But they are still vertically listed x.x

[grahamstewart]

Hmm.. Tried adding display: inline;?
I'm just guessing - I hate NN4 and stay away from it at all costs.

[MWpro]

Inline will only work when the margin/width suggested above to be used for spacing is not present. When the spacing is there, then they bunch up and are all on top of each other as one big jumbled word. However when the spacing is not there, then the links are on the same line, but are not spaced how i wanted them to be. Any other ideas?

I agree with you, graham; I hate netscape and think they should discontinue it and make people upgrade... it is a total inconvenience since many css codes get distorted on it.

[grahamstewart]

Maybe NN4 isn't making the div 100% wide by default?
Try using the classic CSS debugging tool..

div {
border: 1px solid red;
}

..and see if that clarifies the situation any.

[Birdman]

>>I hate netscape and think they should discontinue it and make people upgrade...

:) Don't we wish!

Don't forget to evaluate the styles on the div itself to see if there is something conflicting.

Added: or like Graham said, add 100% width to the div.

[MWpro]

Nah doesn't really clarify it. I have a width of 750px declared for the div because a fixed design is needed for the page. In addition to the links overlapping problem, in netscape 4 the div with the id of links doesn't even extend the whole 750px... Here is the css for the div and the links. i hate netscape x.x

#links {
background-image: url(image.gif);
background-repeat: no-repeat;
width: 750px;
height: 20px;
}

#links a {
text-decoration: none;
font-weight: bold;
color: #FFFFFF;
font-size: 11px;
font-family: verdana;
display: inline;
margin: 0px 25px 0px 25px;
}