CSS Shift Downward

Question

Can anyone tell me what is going on with this widget: http://davidbeckblog.com/notify/? The relevant CSS is mostly at the bottom of style.css.

Basically, the widget has 3 sections. On the left is the button, the middle is the text box, and the right is a spot for a progress indicator. When I add in the text box and the progress indicator, everything gets pushed down.

Answer 1

Those are inline elements and the vertical align is baseline by default I believe. Set the vertical align on all 3 spans to top, and then it looks like you need to specify margin-top:-3px on span.status and maybe apply 1px top margin to the notify me span.

Alternatively you could have floated all 3 with a clearing element.

Answer 2

This seems to fix it:

.notify-me input, .notify-me span {
    vertical-align: top;
}

.notify-me input {
    margin-top: 0.4ex;
}

(Try to avoid, fixed-pixel margins/padding, as these will more quickly bust when the user changes font sizes.)