Vertikalstille tekst i input-felter

[Akerbak]

Jeg har knotet med dette flere ganger, og sitter nå og virkelig jobber for det, men nei: å vertikalstille tekst i input-felter med satt størrelse viser seg igjen å bli håpløst.

 

Er det noen som har fått til dette? I CSS2.0 skulle man tro man endelig hadde klart å løse browserforskjellene takket være voice-family med inherit-verdien, men da velger opera og tolke attributter forskjellig fra IE og FF (til en forandring).

 

Så, mitt spørsmål, finnes det en fornuftig metode som vertikalstiller tekst i input-felter for alle browsere?

 

Takker for svar og diskusjoner!

[semafor]

Vertikalstille? Padding?

 

input.text {

padding: 1em;

}

 

Eller misforstår jeg?

[Akerbak]

Hehe, du er delvis innpå det... Problemet er strengt tatt ett bakgrunnsbilde som krever en bestemt høyde på input-feltet, og ved kun å bruke padding for å forskyve teksten i forhold til størrelsen vil enten teksten bli skjøvet for langt ned (Opera har allerede midtstilt teksten), eller størrelsen på selve inputfeltet blir for stort (FF legger paddingen til høyden og forårsaker bakgrunnsforskyvning på hele input-feltet).

Det siste går an å løse med voice-family, men da står vi fortsatt fast med Opera-problemet.

 

Opera takler å midtstille teksten vertikalt takket være vertical-align, som faktisk funker mtp at HTML klassifiserer inputs som inline elements, og det dermed er enkelt å provosere block-display på dem, men da står vi fortsatt igjen med det originale problemet i FF og IE...

 

Var det forståelig hvor problemet ligger?

[semafor]

Ja, men det høres ut som det er andre faktorer enn de du beskriver som spiller inn. Er det mulig å ta en titt på problemet?

 

Trekk evt. ut problembarnet (skjemaet).

[Akerbak]

Javisst.

 

Skjemaet i HTML-en:

<form action="contact.php" method="post">
<p>Navn:</p>
<p><input class="textfield" type="text" name="the_person" value="" /></p>
<p>E-post:</p>

<p><input class="textfield" type="text" name="the_email" /></p>
<p>Emne:</p>
<p><input  class="textfield" type="text" name="the_subject" /></p>
<p>Melding:</p>
<p><textarea class="textspace" name="the_message"></textarea></p>
<p><input class="button" type="submit" name="sendMail" value=" " /></p>
</form>

 

 

Stilsett for input-feltene:

input.textfield {
width: 420px;
height: 36px;
border: none;
padding-left: 12px;
padding-top: 10px;
border:solid 0 #fff;
background: #fff url(../img/c/input.jpg) no-repeat;
display: block;
voice-family: "\"}\""; 
voice-family:inherit;
width:407px;
height: 25px;
margin-bottom: 5px;
}

 

Linkene til filene er her, om du vil ha dem i sin helhet:

Siden med kontaktskjemaet

Direktelink til CSS-filen

 

Takker på forhånd for innsatsen, skrik ut om du trenger mer / annet.

[semafor]

Er ikke form til å laste ned å teste selv, men prøv å sentrer bakgrunnen?

 

Hvis ikke, skal jeg se på det i kväll.

 

background: #fff url(../img/c/input.jpg) no-repeat center center;