WN - padding i textbox??

WN (https://www.wn.se/forum/index.php)

- Klientsidans teknologier, design och grafik (https://www.wn.se/forum/forumdisplay.php?f=12)

- - padding i textbox?? (https://www.wn.se/forum/showthread.php?t=1039467)

youheardit

2009-12-06 21:58

padding i textbox??

1 bifogad(e) fil(er)

Hejsan!
har ett problem med padding i textbox, det funkar klockrent i Chrome, men i firefox blir det fel (kolla bifogad bild)

CSS:

Kod:

background: #ffffff url(globe_field.png) no-repeat left center;

padding: 7px 45px;

width: 320px;

height: 27px;

border: 1px #b1b1b1 solid;

float: left;

font-size: 14px;

font-weight: bold;

tacksam för svar! :)
med vänliga hälsningar!
//Philip Andersson!

kw_wasabi

2009-12-06 22:34

Du kanske behöver skriva ut alla mått i paddingen.

padding: 7px 45px 0px 0px; (top, right, bottom, left)

Lindahl

2009-12-06 22:40

Citat:

Ursprungligen postat av kw_wasabi (Inlägg 20334339)

Du kanske behöver skriva ut alla mått i paddingen.

padding: 7px 45px; är detsamma som padding: 7px 45px 7px 45px;

youheardit

2009-12-06 22:54

när jag googleade fick jag oxå upp detta svar. men utan resultat i firefox, fast kan problemet vara att jag använder den "inbyggda" firefoxen till ubuntu 9.10 ? kanske är en annan version!

allstars

2009-12-07 08:46

Citat:

Ursprungligen postat av youheardit (Inlägg 20334337)

Hejsan!
har ett problem med padding i textbox, det funkar klockrent i Chrome, men i firefox blir det fel (kolla bifogad bild)

CSS:

Kod:

background: #ffffff url(globe_field.png) no-repeat left center;

padding: 7px 45px;

width: 320px;

height: 27px;

border: 1px #b1b1b1 solid;

float: left;

font-size: 14px;

font-weight: bold;

tacksam för svar! :)
med vänliga hälsningar!
//Philip Andersson!

Hur ser stilen på rubriken och övrigt innehåll ut?

Header

2009-12-07 08:52

Vad händer om du lägger till en rad med line-height : 27px

rhdf	2009-12-07 17:11

ett ytterligare tips är att använda text-indent för att "komma förbi" bakgrundsbilden
dvs
text-indent:<bakgrundsbildens bredd + 5px>

mephisto73

2009-12-15 12:13

Jag gillar den här lösningen (kanske inte är ett alternativ i ditt fall, men)

CSS:

Kod:

.iconGlobe  {padding: 10px 15px 10px 40px; background: transparent url(globe_field.png) no-repeat center left;}



.textBox {padding:1em;}

Markup:

Kod:

<div class="textBox">

     <span class="iconGlobe">Din text här</span>

</div>

Alla tider är GMT +2. Klockan är nu 12:17.