Question

I’m having far too much trouble figuring out why an icon on my website isn’t aligned as it is on other pages using the same CSS and source files.

Here is where it is behaving oddly in all browsers: http://igpmanager.com/account
The icon for ‘home’ (top left corner under the website logo) is aligned to the top of its container for some reason.

Yet it shares exactly the same HTML/CSS source (as far as I can tell) with this page: http://igpmanager.com. Yet the same icon on this page is aligned to the middle of its container. This is where I want it to be on the /account URL also.

What is causing this? I’ve looked quite thoroughly for an answer but haven’t had any luck in finding it.

Answer 1

Actually everything is top aligned, the reason that the text drops lower is because you have set

#nav a, #nav a:visited, #nav a:active {
...
line-height: 26px;
...
}

Which pushes your text down, but line-height has no impact on image positioning. You would be better of removing the line-height declaration and adding padding-top instead, and reducing the element’s height to compensate

#nav a, #nav a:visited, #nav a:active {
    display: block;
    background-color: #33383F;
    color: #B3B6BF;
    height: 18px;
    padding: 4px 12px;
    text-decoration: none;
    font-weight: normal;
    border: 1px solid #4D545F;
    border-bottom: none;
    border-radius: 4px 4px 0px 0px;
    -webkit-border-radius: 4px 4px 0px 0px;
    -moz-border-radius: 4px 4px 0px 0px;
    word-wrap: break-word;
}