CODEWITHSUNDEEP
htmlcss
Swati
Swati

Reputation: 57

I cant reduce the height of input with following css code

Please see this css code

#ContactForm .wrapper {
min-height:30px;
padding-bottom:8px;
} 
#ContactForm .bg {
border:1px solid #aaaaaa;
background-color:#e9e9e9;
float:left;
}
#ContactForm .input {
width:200px;
height:12px;
background:none;
padding:6px 10px 6px 10px;
color:#000;
font:10px Arial, Helvetica, sans-serif;
}

When I test it in browser (firefox) the input block is of some height.. I try reducing the top and bottom padding value from 6 to zero but no avail. Also reducing height from 12 to lower value does not help.

It is stubborn and fixed to some height. What could be wrong?? I can provide with other data also, if needed.

This is html code

<div  class="wrapper"> <strong>Phone:</strong>
        <div class="bg">
                <input type="text" class="input" >
        </div>
</div>

Thanks in advance

Upvotes: 0

Views: 156

Answers (2)

Ashis
Ashis

Reputation: 20

i think reducing the height from wrapper will halp.. if not the height must be controlled from some other factor.. check that..

on a look on your code this is the solution..

update us for the same..

#ContactForm .wrapper {
min-height:30px;   (CHECK THIS)
padding-bottom:8px;
}

Upvotes: 1

jenovachild
jenovachild

Reputation: 1781

  1. Make sure the form your input is in is has the id "ContactForm"

  2. Remove the space between #ContactForm and .input like the following example

    #ContactForm.input {
width:200px;
height:12px;
background:none;
padding:6px 10px 6px 10px;
color:#000;
font:10px Arial, Helvetica, sans-serif;
}

That should work.

Upvotes: 0

Related Questions