CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Matt Parkins
Matt Parkins

Reputation: 24698

Textbox moves unexpectedly after text entry

I have a text box in some html that has a jquery button attached to it. If the user enters some text and then moves the focus away from the text box (using tab or the mouse) then the text box inexplicably moves down about 4 pixels.

<div class='input-append'>
    <input class="tin" type="text" name="s" />
    <button class="btn btn-large btn-primary" type="submit">GO!</button>
</div>

and the CSS:

.tin
{
    font: bold 1.9em sans-serif;
    height: 27px;
    -webkit-border-radius: 12px 0 0 12px;
    -moz-border-radius: 12px 0 0 12px;
    border-radius: 12px 0 0 12px;
    width: 480px;
}

The unexpected movement occurs in Chrome & Safari, but not IE which seems to chop off some of the entered text (the outer border of the text box overwrites some of the bottom of the text which is reasonably large), which makes me think it is some kind of line-height issue perhaps?

Upvotes: 0

Views: 189

Answers (2)

GaganB
GaganB

Reputation: 31

I tried the code you sent. If I wrote like this 

<style type="text/css">
        .tin
        {// the css}
    </style>

then the problem is replicated and if I wrote like this

<script type="text/css">
        .tin
        {//css}</script>

What approach you are using?

Upvotes: 0

Akhil Sekharan
Akhil Sekharan

Reputation: 12693

Just pure guess. It might have something to do with your css.

For instance:

.btn
{
    width: 90px;
}
.btn:focus
{
    width: 200px;
}

Upvotes: 1

Related Questions