[CSS] Problem z przewijającym się tłem forumlarza text w IE

[mako241]

Kod: Zaznacz cały

#box_search input.text {
border: none; 
height: 20px; 
width: 120px; 
background: #F3F3F3 url(gfx/search.png); 
font-size: 12px; line-height: 17px; 
vertical-align: middle; color:#999;}

Teraz problem jest następujący. W Mozilli wyświetla się wszystko tak jak oczekuję, natomiast w IE kiedy wpisuję tekst dłuższy niż 120px razem z tekstem przwija się tło. Screen na podwójnym zoomie:



Co zrobić, aby tło wyglądało zawsze tak samo, nieruchomo, jak obecnie ma to miejsce w Mozilli?


Przy okazji zadam dwa inne pytania, żeby nie zaśmiecać forum:

1. Jak zrobić, aby tekst wpisywany w formularzu znajdował się po środku w pionie? W IE wystarcza "line-height: 20px;", jednak w Mozilli nadal tekst jest u góry pola formularza. Jest jakaś inna opcja niż "przycięcie" paddingami?

2. Jak guzikowi < input type="submit" > nadać swoje, rysunkowe tło?
To, niestety nie działa ani dla IE ani dla MFF.

Kod: Zaznacz cały

#box_search input.button{background: url(gfx/search_btn.png); height: 23px;}

Oczywiście odrazu proszę o wskazówkę, jak nadać inny wygląd przycisku, kiedy jest wciskany.

[ooo_michal]

Zaczne od końca:
google -> obrazek jako przycisk -> strona nr 3 - już w opisie strony jest odpowiedź ale przeczytaj całość to się dowiesz więcej.

Kod: Zaznacz cały

vertical-align: middle

Polecenie można zastosować do elementów wyświetlanych w linii (inline) lub komórek tabeli (<td>...</td> i <th>...</th>).

Kod: Zaznacz cały

background-position: right

[mako241]

Zaczne od końca:
google -> obrazek jako przycisk -> strona nr 3 - już w opisie strony jest odpowiedź ale przeczytaj całość to się dowiesz więcej.

W tym przypadku było wszystko dobrze, zapomniałem dodać border:none; przez co efekt tła nie był widoczny,

Kod: Zaznacz cały

vertical-align: middle

Polecenie można zastosować do elementów wyświetlanych w linii (inline) lub komórek tabeli (<td>...</td> i <th>...</th>).

Dobrze, jednak jak osiągnąć wyśrodkowanie pionowe formularza TEXT, jeśli line-height działa tylko w IE, a nie chcę do tego używać paddingów?

Kod: Zaznacz cały

background-position: right

Prawie dobrze, kiedy piszę się tekst tło sprawia wrażenie nieruchomego. Jednak, kiedy po wpisaniu tekstu cofamy kursor na początek tekstu (np. mając świadomość, że popełniliśmy wcześniej literówkę), tło się powiela i przewija.

[ooo_michal]

To znowu od końca

Prawie dobrze, kiedy piszę się tekst tło sprawia wrażenie nieruchomego. Jednak, kiedy po wpisaniu tekstu cofamy kursor na początek tekstu (np. mając świadomość, że popełniliśmy wcześniej literówkę), tło się powiela i przewija.

Zrób tak: input do którego będą przylegały po lewej i prawej divy mające jako tło obrazki z zaokrąglonymi rogami. inputowi daj tło z tej części obrazka, która sie powtarza. Będzie dobrze

Dobrze, jednak jak osiągnąć wyśrodkowanie pionowe formularza TEXT, jeśli line-height działa tylko w IE, a nie chcę do tego używać paddingów?

Chyba najlepiej to wyjdzie za pomocą paddingów. W tej chwili nie widzę innego rozwiązania.

[mako241]

Zrób tak: input do którego będą przylegały po lewej i prawej divy mające jako tło obrazki z zaokrąglonymi rogami. inputowi daj tło z tej części obrazka, która sie powtarza. Będzie dobrze

Na to sam bym wpadł, wolałbym prawdziwe rozwiązanie, a nie taki półśrodek...
ale dziękuję za sugestie...

[gorylek]

Kiedy ten półśrodek to prawdziwe rozwiązanie. Dajesz graficzke szerokości 1px na repeat-x tak by mało zajmował i symulował tło a po bokach ustawiasz graficzke która ma za zadanie symulować zaokrąglone rogi. Innego wyjście nie masz.