Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS] Input type=text + background = IE7 problem
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
nitek
witam,

poszukałem trochę zanim zdecydowałem się napisać, ale moje siły się już kończą, więc piszę..
Na stronie http://id2it.pl/nitek/dgproject/ dałem sobie ładnego inputa, nałożyłem na niego tło i wszystko działa pięknie pod IE6, FF i Chrome. Problem mam tym razem z IE7 - gdy wpiszemy więcej tekstu, tło zamiast zostać w miejscu, ucieka w lewo..

Próbowałem znaleźć jakieś sensowne rozwiązanie, ale niestety nic nie pomogło.

kod poniżej, może ktoś się z tym spotkał i będzie potrafił mi pomóc?

Kod
//HTML
<input type="text" class="newsletter_box" value="wpisz adres e-mail do subskrypcji" maxlength="50">

//CSS
.newsletter_box{
  background: url('../img/newsbox.png') no-repeat;
  width:235px;
  height:25px;
  margin-top:-24px;
  padding-left:10px;
  padding-right:10px;
  color:#443749;
  padding-top:7px;
  border:0 none;
  vertical-align:middle;
  cursor:text;
}


Nie zwracajcie uwagi na resztę kodu, pisałem na szybkiego i jest tam niezły bałagan - na porządki przyjdzie czas później..

//edit - nie zauważyłem, że kod się rozjechał przy wklejaniu
erix
SOA#1?

Odpaliłem pod IE7 i niby normalnie...
nitek
Nie mam pod ręką laptopa z IE7, ale jeszcze do południa nie było u mnie normalnie winksmiley.jpg

Co do pytania, jako perfekcjonista winksmiley.jpg często sprawdzam wszystko pod IE6,7,8 (czasem rzucę okiem nawet na zabytkowe 5.5), FF, Chrome i Safari. Lubię gdy wszystko gra jak należy.
Kod już poprawiłem, stronka oczywiście się waliduje..

później pewnie pójdzie do innego działu na forum, pod ocenę winksmiley.jpg

//edit
obrazek ze screenem tutaj, jednak jest źle pod IE7
Nickel
Można go tak oszukać winksmiley.jpg

  1. <?php
  2. background: url('../img/newsbox.png') no-repeat right;
  3. ?>


Tylko sprawdź to na innych browserach również.
nitek
Cytat(Nickel @ 26.06.2009, 09:52:32 ) *
Można go tak oszukać winksmiley.jpg

  1. <?php
  2. background: url('../img/newsbox.png') no-repeat right;
  3. ?>


Tylko sprawdź to na innych browserach również.


Pomysł dobry, ale jak wpisze coś więcej, potem wcisnę 'Home' na klawiaturze, to też sie rozjeżdża winksmiley.jpg
czyli nie do końca działa..

w chwili obecnej mam coś takiego:
Kod
background: url('../img/newsbox.png') repeat-x right;
Nickel
Rzeczywiście, idealne to to nie jest winksmiley.jpg

Jeśli koniecznie chcesz, żeby to wyglądało dobrze to może jeszcze coś takiego:
  1. <?php
  2. .newsletter_box{
  3. background: url('newsbox.png') no-repeat right;
  4. width:240px;
  5. height:25px;
  6. margin-top:-24px;
  7. padding-left:5px;
  8. padding-right:10px;
  9. color:#443749;
  10. padding-top:7px;
  11. border:0 none;
  12. vertical-align:middle;
  13. cursor:text;
  14. }
  15.  
  16. .newsletter_box input
  17. {
  18.    width:235px;
  19.     height:25px;
  20.    border: none;
  21.    background: none;
  22.    margin-top: -5px;
  23. }
  24. ?>


a w htmlu
  1. <?php
  2. <div class="newsletter_box"><input class="newsletter_box" value="wpisz adres e-mail do subskrypcji" maxlength="50" type="text" /></div>
  3. ?>


Trzeba to pewnie jeszcze "dopieścić", ale ogólnie powinno działać winksmiley.jpg Wadą jest to, że musisz dodać dodatkowego teoretycznie niepotrzebnego diva. Sprawdzałem tylko w IE7 i FF3.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.