Search code examples
htmlcsshref

<a href> link to page prints space?

My Hyperlink Reference links to my page properly, but the navigation bar now prints a few spaces before the text. I think I know why this is, but I'm not sure how to fix this.

My HTML:

            <li class="current_page_item"> <a href="#" accesskey="1" title=""> <a href="index.html"> Homepage </a> </li>
            <li> <a href="#" accesskey="4" title=""> <a href="resume/resume.doc"> R&egrave;sum&egrave; </a> </a> </li>

My CSS:

#menu{
    position: absolute;
    top: 2em;
    right: 0;
}

#menu ul{
    /* display: inline-block; */
    margin-left: -4px;
}

#menu li{
    display: block;
    float: left;
    text-align: center;
}

I think my problem is in the CSS. I commented out display: inline-block; because that is the default space for href links. Instead, I tried to take 4 spaces off which is why I used the -4px;. Anyone have any ideas? Thanks

Solution

  • Firstly, remove any white space you have between your <a> tags as that will add spaces.

    What I think you might have as a problem though is some space between your list items. If you want to keep the list items on separate lines then that's fine, but avoid any white space between the closing and opening <li> tags, like this;

    <li><a ... </a></li><li>
<a ... </a></li><li>
<a ... </a></li>

    This should close the gap between the list elements.

    Hope this helps.