Nav link position Issue

Having issue with the nav links across the bar not being lined up correctly.

Any help would be appreciated.


The total height of your tabs is too large for th header height, pushing down on the nav links beneath.

Try reducing the margin or the padding here: a.tabNav

Thanks. But changing the padding fixes the nav link issue, but now the text on the tab is very high.

I think (though can’t test) that padding on the <a> is the cause, along with it being display:block.

Worst comes to worse, a good debugging idea is to remove all styles until you don’t have the issue anymore, then add in very small amounts of CSS at a time until you find what is the trigger.

I’m at work so unable to test anything :(.

Edit-You’re on the tab now, You have the tab set with a height right? The anchor is showing to be the height of the tab, however the text won’t sit in the middle.

You’ll need this.

Needed to add “position: absolute;” to the nav link bar.


Do not use that solution. See my edit above.

You’re welcome to keep your “fix” but it’s not a very good one :).

I will take a look at your solution - Any reason that is not a good fix?, as it seems to show the same in (Chrome, Opera, IE 8, and Firefox).

Thanks again.

It may show the same, but you shouldn’t need to do position:absolute, and I doubt you set coordinates, which mean that the position will probably vary from browser to browser, especially once text-align is set in the later phases of your web development.

Develop good practices now :).

Thanks for the help, but i was unable to get your solution to work for some reason.

The examples in the link I gave are extremely straight foward. What were you having trouble getting working?

Right now you are just giving a top padding to make it seem like it’s centered…