Question

I’m having a problem with the small grey caps lock notifiaction image that comes up when you click in a password field and turn on caps lock. Mines showing outside the box about twenty pixels to the right of it. This is causing an obstruction so the user cant see a div layer thats in that position.

Can someone please tell me why mine isnt showing inside the password field and how i can get it inside?

My HTML form has been edited with css to display an image background over the boxes so i imagine its to do with the css.

But i cant find anything related to it. Thanks.

Code:

<style>



#main{
        width:440px;
        height:0px;
        margin-top:1px;
        margin-left:10px;
        margin-bottom:0px; 
        position:relative;
        text-align:left;
    }

    #main form{
        width:440px;
        height:0px;
        padding-bottom:0px;
    }

    #main form .row{
        position:relative;

    }

    #main form .row.error:after,
    #main form .row.success:after{
        content:'';

        position:absolute;
        right: 60px;
        top: 8px;
        width:32px;
        height:32px;
        background:url('../img/icons.png') no-repeat;
        margin-right:50px;
    }

    #main form .row.error:after{
        background-position: 0 -79px;
    }

    #main form input[name=email],
    #main form input[name=password]{

        border:none;
        background:url('http://www.playtimeboys.com/img/form/text-boxes.png') no-repeat top left;
        font:14px 'Segoe UI','Arial',sans-serif;
        color:#888;

        outline:none;

        height: 48px;
        margin-top:22px;
        margin-left:-10px;
        padding: 0 10px 0 50px;
        width: 350px;
    }



    #main form .email input{
        background-position:0 -96px;
    }

    #main form .email input:focus{
        background-position:0 -144px;
    }


    #main form .password input{
        background-position:0 -193px;
    }

    #main form .password input:focus{
        background-position:0 -241px;
    }



    /*----------------------------
        The Submit Button
    -----------------------------*/


    #main form input[type=submit]{

        border: 1px solid #004C9B;
        border-radius: 3px 3px 3px 3px;
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 1px rgba(0, 0, 0, 0.3);
        color: #D3EBFF;
        cursor: pointer;
        display: block;
        font: bold 24px Cambria,"Hoefler Text",serif;
        margin-top: -46px;
        margin-left:360px;
        padding-top: 7px;
        padding-bottom: 10px;
        text-shadow: 0 -1px 0 #444444;
        width: 100px;
        height:45px;
        position:absolute;
        z-index:100;

        background-color:#0496DA;

        background-image: linear-gradient(top, #0496DA 0%, #0067CD 100%);
        background-image: -o-linear-gradient(top, #0496DA 0%, #0067CD 100%);
        background-image: -moz-linear-gradient(top, #0496DA 0%, #0067CD 100%);
        background-image: -webkit-linear-gradient(top, #0496DA 0%, #0067CD 100%);
        background-image: -ms-linear-gradient(top, #0496DA 0%, #0067CD 100%);
    }

    #main form input[type=submit]:hover{

        background-color:#0383d3;

        background-image: linear-gradient(top, #0383d3 0%, #004c9b 100%);
        background-image: -o-linear-gradient(top, #0383d3 0%, #004c9b 100%);
        background-image: -moz-linear-gradient(top, #0383d3 0%, #004c9b 100%);
        background-image: -webkit-linear-gradient(top, #0383d3 0%, #004c9b 100%);
        background-image: -ms-linear-gradient(top, #0383d3 0%, #004c9b 100%);
        position:absolute;
        z-index:100;
    }

    #main form input[type=submit]:active{

        background-color:#026fcb;

        background-image: linear-gradient(top, #026fcb 0%, #004c9b 100%);
        background-image: -o-linear-gradient(top, #026fcb 0%, #004c9b 100%);
        background-image: -moz-linear-gradient(top, #026fcb 0%, #004c9b 100%);
        background-image: -webkit-linear-gradient(top, #026fcb 0%, #004c9b 100%);
        background-image: -ms-linear-gradient(top, #026fcb 0%, #004c9b 100%);
        position:absolute;
        z-index:100;
    }



    </style>
        </head>


    /*----------------------------
        The HTML
    -----------------------------*/


        <body>
            <div id="main">


                 <form action="login.php" method="post"  >

                    <div class="row email">
                        <input type="email" id="email" name="email" placeholder="Email" value="<?php echo htmlentities($email); ?>" />
                    </div>

                    <div class="row password">
                        <input type="password" id="password" name="password" placeholder="Password" value="<?php echo htmlentities($email); ?>" />
                    </div>
                    <input type="submit" name="submit" value="Login >"  />
                </form>
            </div>
        </body>
    </html>

Answer 1

The problem is in this section:

#main form input[name=email],
#main form input[name=password]{
    [...snip...]
    height: 48px;
    margin-top:22px;
    margin-left:-10px;
    padding: 0 10px 0 50px;
    width: 350px;
}

You have the field set too wide; the capslock image normally shows up inside the text field. Also, the height of the content-box is too large, and makes the notifier show up extra large. Try instead:

    height: 28px; // height of image - 20px
    margin-top:22px;
    margin-left:-10px;
    padding: 10px 10px 10px 50px; // extra 20px of padding on height
    width: 280px; // proper width of image, so contents don't overflow

To understand why this was happening, it helps to remember that even tough you styled over the text filed, it’s still in there somewhere; and the actual bounds of the underlying textfield are harder to see once you’ve applied a style. If you find some formatting of textfields or other form widgets to be acting up, it can help to disable the styles that changed them from the default appearance, such as border:none; and see what the system thinks the widget looks like. From there it can be easier to spot where the error is.