CODEWITHSUNDEEP
htmlcss
Rahul Desai
Rahul Desai

Reputation: 15491

HTML textbox not working

This is some simple problem, but I am not able to resolve it. I am unable to click on the textbox and get it working.
Please refer to my fiddle here: http://jsfiddle.net/5JeaQ/

HTML:

<div id="container">
    <div id="form">
        <form id="lookup" method="post">
            <fieldset>
                <legend>Phone Directory</legend>
                <input type="text" id="name" placeholder="Enter name.." autocomplete="off"/>
                <span id="buttons">
                    <input type="submit" id="submit" value="Submit"/>
                    <input type="button" id="list_all" value="List All"/>
                </span>
            </fieldset>
        </form>
    </div>
    <div id="results"></div>
</div>

CSS:

#container{
    width: 30%;             
    margin: 0 auto;
    /*text-align: center;*/
}           
#name{
    display: block;
    /*margin: 0 auto;*/
}
#buttons{
    padding-top: 25px;
}
fieldset{
    border-radius: 10px;
}
td{
    text-align: center;
}

Upvotes: 2

Views: 2916

Answers (3)

Karthick Kumar
Karthick Kumar

Reputation: 2361

try this 

#buttons{
padding-top: 0px;

}

Demo 

http://jsfiddle.net/5JeaQ/8/

Upvotes: 0

Surjith S M
Surjith S M

Reputation: 6740

Remove this 

#buttons{
    padding-top: 25px;
}

Working Fiddle

Upvotes: 0

donnywals
donnywals

Reputation: 7591

Your buttons have padding top. Why is that? It doesn't seem to do anything and removing it fixes your problem.

fiddle

css:

#container{
    width: 30%;             
    margin: 0 auto;
    /*text-align: center;*/
}           
#name{
    display: block;
    /*margin: 0 auto;*/
}

fieldset{
    border-radius: 10px;
}
td{
    text-align: center;
}
/*legend{
text-align: center;
}*/

Upvotes: 2

Related Questions