CODEWITHSUNDEEP
htmlcss
Anonymous Man
Anonymous Man

Reputation: 3056

Difficulty clicking into textbox after applying css

This seems like a simple thing but I can't figure out what is causing it.

UPDATE: Here is a fiddle where I have replicated the problem: http://jsfiddle.net/X374V/1/

I have a simple text input in a form:

<input type="text" name="commentor" id="commentor"  />

with the style:

#commentor {
    position:relative;
    float:left;
    margin-bottom:5px;
    height:25px;
    width:160px;
    border-style:solid;
    border-width:1px;
    border-color:#000;
    background-color:#CCC;
}

In order to click into the text box to type, i have to click at the very top edge of the box, clicking in the middle is missing it somehow. Is there a way to correct this?

Upvotes: 0

Views: 54

Answers (3)

Harvey A. Ramer
Harvey A. Ramer

Reputation: 772

Add margin-left to the label:

#commentorName {
    position:relative;
    top:8px;
    font-family:futuraCondensed;
    font-size:20px;
    color:#33cccc;
    margin-left: 168px;
}

See fiddle: http://jsfiddle.net/harveyramer/Zp9D3/

Upvotes: 0

keeehlan
keeehlan

Reputation: 8054

Here's a fiddle with it working.

I changed the commentor div to a span.

http://jsfiddle.net/X374V/3/

Upvotes: 1

DD0UG
DD0UG

Reputation: 142

This should fix it. Your div was covering the input.

#commentorName {
    color: #33CCCC;
    display: inline;
    font-family: futuraCondensed;
    font-size: 20px;
    line-height: 1.5em;
    position: relative;
}

Upvotes: 2

Related Questions