Question

I’m building a jQuery form-field validator, and at the moment I’m working on building in the pop-up notifications in CSS.

The problem is, I can’t get .notification-point to align to the center of .notification-body, regardless of the application of margin-top/padding-top properties.

Here’s a link to my JsFiddle: http://jsfiddle.net/Z6Jtd/8/

Any help/edits would be greatly appreciated!

Answer 1

Solution: http://jsfiddle.net/vonkly/Z6Jtd/9/

There you go.

Note: I changed your javascript a little. I removed .fadeOut; I would highly recommend creating a function for .focusout() – or better yet, detect changes to the value and when it matches the required rule, hide the message.

---

For future readers:

The solution to this issue was to wrap both the marker (“point”) and the body (“message”) in a container with position: relative; on it.

Then, I positioned the marker using position: absolute; and top: 8px.

Next, I added margin-left: 12px to the message in order to not overlap the marker.

CSS

input[type="text"], input[type="password"] {
    display: inline-block;
    font: bold 13px Arial;
    color: #555;
    width: 300px;
    padding: 8px 10px;
    border: 0;
}

.notify-wrap {
    position: relative;
    display: none;
}

.notify-point {
    position: absolute;
    top: 8px;
    display: inline-block;
    border-style: solid;
    border-color: transparent rgba(0, 0, 0, 0.75) transparent transparent;
    border-width: 6px;
}

.notify-body {
    margin-left: 12px; /* push the body out to make room for point */
    padding: 8px 10px;
    font: bold 11px Arial, Helvetica;
    color: #fff !important;
    background-color: rgba(0, 0, 0, 0.75);
}

note: above code is modified to not take up loads of room with border-radius, etc

HTML

<div id="email">
<input name="1" type="text" value="Enter your email address"/>
    <div class="notify-wrap x1">
        <div class="notify-point"></div>
        <div class="notify-body">
            You've entered an invalid email address.
        </div>
    </div>
</div>

note: on notify-wrap, i added the class x1 to define a specific error message to keep in line with the OP’s original formatting for javascript.

Javascript (jQuery)

$('input').focus( function() {
    var num = $(this).attr('name');
    $('div.notify-wrap.x' + num).css('display','inline-block');
});