Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [xhtml/css] problem z inputami i textarea w ie
Forum PHP.pl > Forum > Przedszkole
toomay
Witam, moj problem tkwi w tym ze mam zrobiony formularz ktory wyglada tak:

  1. <form method="POST">
  2. <input name="check" type="hidden" value="1" />
  3. <input name="date" type="hidden" value="<?PHP echo ''.date('d.m.Y').'' ?>" />
  4. <input name="hour" type="hidden" value="<?PHP echo ''.date('G:i').'' ?>" />
  5. <table class="tab_form">
  6. <tr>
  7. <td class="td_form_left_1">
  8. e-mail:
  9. </td>
  10. [html]<td class="td_form_right">
  11. <input name="email" type="text" value="<?PHP
  12. if($email)
  13. {
  14. echo $email;
  15. }
  16. ?>" />
  17. </td>
  18. </tr>
  19. <tr>
  20. <td class="td_form_left_1">
  21. tytuł:
  22. </td>
  23. <td class="td_form_right">
  24. <input name="title" type="text" value="<?PHP
  25. if($title)
  26. {
  27. echo $title;
  28. }
  29. ?>" />
  30. </td>
  31. </tr>
  32. <tr>
  33. <td colspan="2">
  34. wiadomość:
  35. <br />
  36. <textarea name="message" rows="10">
  37. <?PHP
  38. if($message)
  39. {
  40. echo $message;
  41. }
  42. ?>
  43. </td>
  44. </tr>
  45. <tr>
  46. <td colspan="2">
  47. <input type="submit" value="ok" />
  48. </td>
  49. </tr>
  50. </form>

oraz plik css (potrzebny fragment)który wygląda tak:
  1. form{
  2. margin: 0;
  3. }
  4. input, textarea{
  5. width: 100%;
  6. background-color: #B2B2B2;
  7. border: 1px solid #888888;
  8. font-size: 9px;
  9. color: #444444;
  10. }
  11. .tab_form{
  12. width: 100%;
  13. border-collapse: collapse;
  14. background-color: #FFFFCC;
  15. }
  16. .tab_form td{
  17. border: 1px solid #000000;
  18. padding: 4px;
  19. }
  20. .td_form_left_1{
  21. text-align: right;
  22. width: 60px;
  23. }
  24. .td_form_right{
  25. vertical-align: middle;
  26. }

W FF wszystko dziala tak jak powinno - chociaz nie do konca, ale o tym pozniej.
Glownym problemem jest to ze w ie obramowanie tabeli po prawej stronie znika w miejscach gdzie wstawione jest <textarea> i <input type="text">, w wierszu gdzie znajduje sie submit obramowanie jest widoczne (i to mnie najbardziej dziwi). Po zmianie szerokosci ze 100% (textarea, input{ ... } - patrz plik .css) na np. 98% wyswietla sie dobrze zarowno w ie jak i ff, tyle ze inputy i textarea nie sa rozciagniete maksymalnie a przeciez o to chodzi zeby byly.
Ponad to prawy odstęp (padding) w przypadku <textarea> i <input type="text"> nie wynosci 4px tak jak jest to ustalone tylko cos kolo 2px (w ff bo w ie niewidac gdzie sie konczy) a w przypadku inputa submit wszystko jest ok !? padding wszedzie wyglada tak samo.
Podsumowujac: inputy z textem i textarea (miejsca gdzie mozna cos wpisac) sprawiaja problemy.
Za wszelka pomoc bede bardzo wdzieczny.


pozdrawiam
toomay
Darti
  1. .tab_form{
  2. width: 100%;
  3. border: 1px solid #000000;
  4. border-collapse: collapse;
  5. background-color: #FFFFCC;
  6. }
toomay
Dzieki wielkie za odpowiedz, pomoglo.

Niestety nadal pozostaje problem z paddingiem.
aktualny kod:
  1. form{
  2. margin: 0;
  3. padding: 0;
  4. }
  5. input, textarea, select{
  6. width: 100%;
  7. background-color: #B2B2B2;
  8. border: 1px solid #888888;
  9. font-size: 9px;
  10. color: #444444;
  11. }
  12. .div_form{
  13. width: 420px;
  14. margin-left: auto;
  15. margin-right: auto;
  16. }
  17. .tab_form{
  18. width: 100%;
  19. border: 1px solid #000000;
  20. border-collapse: collapse;
  21. background-color: #FFFFCC;
  22. }
  23. .tab_form td{
  24. border: 1px solid #000000;
  25. padding: 4px;
  26. }
  27. .td_form_left_1{
  28. text-align: right;
  29. width: 60px;
  30. }
  31. .td_form_right{
  32. vertical-align: middle;
  33. }


Jak widac padding ustawiony jest na 4px. Problem w tym ze po prawej stronie kazdego <input type="text"> oraz <textarea> padding w przypadku ie wynosi 0 (czyli go niema) a w przypadku FF wynosi (na oko) 2px. Dziwi mnie to bo wystepuje to tylko w przypadku inputow textowych oraz textarea czyli obiektow w ktorych mozna cos wpisac, w przypadku <input type="file lub submit"> wszystko jest ok, padding wszedzie taki sam.

pozdrawiam
toomay
Darti
wrzuć do nagłówka:
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
i dopiero zacznij zabawę ze stylami, IE (jak i FF) są czułe na to.
pzdr smile.gif
toomay
Do tej pory mialem w naglowku:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">


I cala strona zrobiona jest pod to.
Po wrzuceniu Twojego naglowka duzo rzeczy sie "popsulo", jedynym pozytywem jest to ze zniknal problem z tym paddingiem ohmy.gif .
Pozatym chce aby strona byla zgodna z xhtml 1.0 (w Twoim naglowku widze html 4.0). Nie bedzie z tym problemu ? Tak wlasciwie to po co ta zmiana ? Nie obejdzie sie bez niej?
Pytam jak najbardziej powaznie bo perspektywa zmiany tego naglowka sprawia ze mam ochote zamknac sie w sobie sad.gif .

pozdrawiam
toomay
Darti
No ja tego Doctypa wziąłem z MSDE Microsoftu:
http://msdn.microsoft.com/workshop/author/...cts/doctype.asp różnica zdaje się jest pomiędzy Strict a Transitional.
toomay
Nierozumiem do czego zmierzasz. Mniejsza o roznice pomiedzy strict a transitional. Chodzi o sam fakt zmiany naglowka

z mojego obecnego:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">


na podany przez Ciebie:
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">


Wlasciwie po co mam to robic. Poprosze konkrety. Ja widze tylko jedna zalete takiego posuniecia tj. rozwiazanie problemu z paddingiem natomist wad jest nieco wiecej, musze przerabiac cala strone pozatym chyba niebedzie zgodna z xhtml 1.0 a do tego zmierzam. Czy niema innej mozliwosci "naprawy" tego paddingu ?

pozdrawiam
toomay
Darti
No to jeden konkret - IE 6.0 nie obsługuje poprawnie XHTML 1.0, dlatego webmasterzy używają zazwyczaj języka przejściowego (transitional) zamiast strict, dla kompatybilności ze starszymi (niekompatybilnymi z XHTML) przeglądarkami.
Dla przykładu sprawdź nagłówek forum.php.pl smile.gif
toomay
Witam, poszedlem za Twoja rada i zmienilem doctype ze strict na transitional. Strona wyswietla sie tak samo jak sie wyswietlala wiec jest ok.
Chodz nie do konca - problem z paddingiem guitar.gif .

Mimo wszystko dziekuje, jako jedyny zdecydowales sie pomoc. Grunt ze problem z borderem zostal rozwiazany smile.gif

pozdrawiam
toomay
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.