CODEWITHSUNDEEP
cssinternet-explorerforms
freddy6
freddy6

Reputation: 137

cursor alignment in textbox

I have a form which looks exactly the way i want in every browser except for IE. I have been having a difficult time figuring out what adjustment I need to make to the css to make it look right in IE (and still look right in all of the other main browsers)

My HTML is:

        <td valign="top" align="left">

        <form name="postcode" action="plans.php" method="post">
        <input type="text" name="c" size=1 class="postcode" onKeyup="autotab(this, document.postcode.o)" maxlength=1> 
        <input type="text" name="o" size=1 class="postcode" onKeyup="autotab(this, document.postcode.d)" maxlength=1> 
        <input type="text" name="d" size=1 class="postcode" onKeyup="autotab(this, document.postcode.e)" maxlength=1>
        <input type="text" name="e" size=1 class="postcode" maxlength=1>
        <br/><br/><br/>
        then choose...<br/><br/>
        <input name="electricity" type="checkbox" value="electricity" />electricity
        <br/>
        <input name="gas" type="checkbox"  value="gas" />gas
        <br/><br/><br/><br/>
        <input type="image" src="images/billCompare-view-plans.gif" value ="show plans" >
          </p>
        </form>
    </td>

and my css is:

    @charset "UTF-8";
    /* CSS Document */
    body { 
        font-size:14px;
        font-family:"Century Gothic";
    }

    .table_header{
        font-size:18px;
        font-family:"Century Gothic";
        color:#FFF;
    }

    .body_text{
        text-align:justify;
    }

    .menu{ 
        text-align:right;
        vertical-align:bottom;
    }

    .postcode{
            border-style:double;
            font-size:20px;
            border-color:#F60;
            text-align:center;
            vertical-align:middle;
            height:70px;
    }

    input.checkbox{
    height:40px; 
        width: 40px;
    } 

    form p label { position: absolute; top: 0; left: 0;}

The cursor on all other browsers is aligned in the center and middle of the boxes(which is what i want). but for some reason in IE in aligned center and to the top.

any help would be much appreciated.

Upvotes: 0

Views: 11167

Answers (2)

Andrea Turri
Andrea Turri

Reputation: 6500

You need to set the input line height with a percentage: line-height: 140%;.

The percentage valor will align Placeholder and input text.

Upvotes: 0

solartic
solartic

Reputation: 4319

Just had this issue. What worked for me was using line-height.

Try adding line-height: 70px to .postcode

Upvotes: 5

Related Questions