Question

Its been a few hours now and I cannot figure out why there is a gap in my layout.

picture:

http://dl.dropbox.com/u/4123377/gap.png

html: http://pastebin.com/7WktN5EA

css: http://pastebin.com/Fj8rukJ8

The button is "#login"

Answer 1

The #login ul ul seems to be setting a top value of 50, which applies to the first element as well as all the others – so the first element seems to be causing the gap.

#login ul ul {
    background-image: url(../assets/loggeddarkfill.png); 
    background-repeat: no-repeat;
    position: absolute;
    top: 50px; /* this guy */
    visibility: hidden;
}

The right value is 40px – that will get rid of the gap and position the list like you want it.