5

I have this problem. I searched the site and others were having similar problems, but none of the answers seemed to work. Those included setting line-height to 0px; and setting all margins/paddings to 0px. I use Google Chrome's Inspect Element material to check the margins/paddings. I hovered over my "a" element and "li" element to see if they had any unnecessary paddings or margins, but they didn't.

What was weird is that they had a little white space, not occupied by any element in the entire document, between each link.

Right now, as there are no borders between the text, it is unrecognizable, but the space around the "a" in Link4 is smaller than the space around the text in Link1. The width of the first "li" element is strangely 4px wider than the 4th "li" container, and there is a little white space. I want to get rid of the white space, any ideas?

Here is the code:

CSS:

html {
    overflow-y: scroll;
}
body {
    background-color: #ffdeff;
    overflow: hidden;
}
#wrapper {
    width: 1000px;
    height: 0px;
    overflow: hidden;
    margin: auto;
    background-color: white;
    border-left: 1px solid rgb(210, 210, 210);
}
#header {
    width: 1000px;
    height: 0px;
    overflow: hidden;
    margin: auto;
}
#header-toolbar {
    width: 1000px;
    list-style-type: none;
    border-radius: 3px;
    position: absolute;
}
#nav-position {
    position: absolute;
    float: left;
    padding: 0px;
    margin: 0px;
}
.nav-link-container {
    background-color: #FF66CC;
    display: inline;
    padding: 0px;
    text-align: center;
}
.nav-link {
    padding: 0px;
    margin-top: 5px;
    margin-bottom: 5px;
    text-align: center;
    line-height: 0px;
    display: table;
    display: inline;
    margin: 0 auto;
}

HTML document:

    <body>
        <script src="jquery-1.9.1.js"></script>
        <script>
        </script>
        <div id="wrapper">
            <div id="header">
                <div id="header-toolbar">
                    <ul id="nav-position">
                        <li class="nav-link-container">
                            <a class="nav-link">Link1</a>
                        </li>
                        <li class="nav-link-container">
                            <a class="nav-link">Link2</a>
                        </li>
                        <li class="nav-link-container">
                            <a class="nav-link">Link3</a>
                        </li>
                        <li class="nav-link-container">
                            <a class="nav-link">Link4</a>
                        </li>
                    </ul>
                </div>
            </div>
            <div id="main"></div>
            <div id="footer"></div>
        </div>
    </body>
</html>

Anything helps! Thank you very much!

Antony
  • 14,900
  • 10
  • 46
  • 74
Yooka Kim
  • 53
  • 4
  • 3
    The problem is `display: inline`. This respects whitespaces like line breaks in your code. – Linus Caldwell May 11 '13 at 06:29
  • Related: http://stackoverflow.com/questions/12183341/how-to-remove-invisible-space-from-html – m90 May 11 '13 at 06:30
  • Thank you very much for the answer, but how should I fix it? Should I try "inline-block"? – Yooka Kim May 11 '13 at 06:31
  • What Linus said is correct. So, you have a couple options...remove some of the spaces (e.g. `
  • Link1`), compensate for it with negative margins, or use something other than `display:inline`. Unfortunately `inline-block` suffers from the same problem as `inline`.
    • – Matt Browne May 11 '13 at 06:32
  • Depends on what you want (I'd guess `float: left; display: block` does the job, but as I said: it depends). Please create a http://jsfiddle.net so we can play around. – Linus Caldwell May 11 '13 at 06:33
  • [Here's a fiddle](http://jsfiddle.net/M9DAE/) to get things started. – Antony May 11 '13 at 06:35
  • Yes! Thanks you Matt Browne! I tried removing all of the spaces in the code itself, and the "li"s all turned consistent and equal with no whitespaces. – Yooka Kim May 11 '13 at 06:35
  • And now, how do I mark an answer... new here, haha. – Yooka Kim May 11 '13 at 06:35
  • You can't mark a comment as an answer, but fortunately a real "answer" just appeared :) – Matt Browne May 11 '13 at 06:37