Unwanted line of text in div

Question

So, I got a problem I've been trying to figure out for a while. I'm getting an extra row of text (or so it seems) in my DOM-structure that as far as I can tell is added by the browser. This happens in all browsers I've run the code in (IE8, IE9, Chrome 20, Firefox 11) and I want to remove it.

This is my HTML:

<div id="wrapper">
    <div id="inner">
        <div class="item">
            content
        </div>
    </div>
</div>​

And this is my CSS:

#wrapper {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}
.item {
    float: left;
    width: 171px;
    position: relative;
    background: #fc0;
}

And here is a jsfiddle showing my problem: http://jsfiddle.net/henrikandersson/wMg2m/

As you can see, there is a gap between the top and the yellow item, which as far as I can tell is caused by a line of text above the #inner-div that should not be there.

Answer 1

You have an invisible control-command &65279; following the closing > of your wrapper div. Its actually the HTML-encoded byte order mark.

Just delete that one and you'll be fine.

See this updated fiddle.

Answer 2

You have got a special character just after <div id="wrapper"> that is invisible.

So this works:

<div id="wrapper">
    <div id="inner">
        <div class="item">
            s
        </div>
    </div>
</div>

I retyped the code that you had, this fixed the problem.

The problem could be copy and pasted code, or your text editor.

Notepad++ is the best free Windows text editor.

I found the problem by pasting your code in an ANSI-encoded text file in Notepad++. ANSI cannot display that character, so it changes to a ?.