Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> [CSS] Input type=text + background = IE7 problem
nitek
post
Post #1





Grupa: Zarejestrowani
Postów: 209
Pomógł: 37
Dołączył: 27.02.2008
Skąd: Kwidzyn

Ostrzeżenie: (0%)
-----


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

Ten post edytował nitek 25.06.2009, 20:04:31
Go to the top of the page
+Quote Post
erix
post
Post #2





Grupa: Moderatorzy
Postów: 15 467
Pomógł: 1451
Dołączył: 25.04.2005
Skąd: Szczebrzeszyn/Rzeszów




SOA#1?

Odpaliłem pod IE7 i niby normalnie...
Go to the top of the page
+Quote Post
nitek
post
Post #3





Grupa: Zarejestrowani
Postów: 209
Pomógł: 37
Dołączył: 27.02.2008
Skąd: Kwidzyn

Ostrzeżenie: (0%)
-----


Nie mam pod ręką laptopa z IE7, ale jeszcze do południa nie było u mnie normalnie (IMG:http://forum.php.pl/style_emoticons/default/winksmiley.jpg)

Co do pytania, jako perfekcjonista (IMG:http://forum.php.pl/style_emoticons/default/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ę (IMG:http://forum.php.pl/style_emoticons/default/winksmiley.jpg)

//edit
obrazek ze screenem tutaj, jednak jest źle pod IE7
(IMG:http://www.id2it.pl/nitek/dgproject/screen_ie7.jpg)
Go to the top of the page
+Quote Post
Nickel
post
Post #4





Grupa: Zarejestrowani
Postów: 23
Pomógł: 5
Dołączył: 20.11.2006

Ostrzeżenie: (0%)
-----


Można go tak oszukać (IMG:http://forum.php.pl/style_emoticons/default/winksmiley.jpg)

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


Tylko sprawdź to na innych browserach również.
Go to the top of the page
+Quote Post
nitek
post
Post #5





Grupa: Zarejestrowani
Postów: 209
Pomógł: 37
Dołączył: 27.02.2008
Skąd: Kwidzyn

Ostrzeżenie: (0%)
-----


Cytat(Nickel @ 26.06.2009, 09:52:32 ) *
Można go tak oszukać (IMG:http://forum.php.pl/style_emoticons/default/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 (IMG:http://forum.php.pl/style_emoticons/default/winksmiley.jpg)
czyli nie do końca działa..

w chwili obecnej mam coś takiego:
Kod
background: url('../img/newsbox.png') repeat-x right;


Ten post edytował nitek 26.06.2009, 10:35:20
Go to the top of the page
+Quote Post
Nickel
post
Post #6





Grupa: Zarejestrowani
Postów: 23
Pomógł: 5
Dołączył: 20.11.2006

Ostrzeżenie: (0%)
-----


Rzeczywiście, idealne to to nie jest (IMG:http://forum.php.pl/style_emoticons/default/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ć (IMG:http://forum.php.pl/style_emoticons/default/winksmiley.jpg) Wadą jest to, że musisz dodać dodatkowego teoretycznie niepotrzebnego diva. Sprawdzałem tylko w IE7 i FF3.

Ten post edytował Nickel 26.06.2009, 11:13:06
Go to the top of the page
+Quote Post

Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Aktualny czas: 24.08.2025 - 10:11