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

[HTML] pobierz, plaintext 
  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. </textarea>
  44. </td>
  45. </tr>
  46. <tr>
  47. <td colspan="2">
  48. <input type="submit" value="ok" />
  49. </td>
  50. </tr>
  51. </table>
  52. </form>
[HTML] pobierz, plaintext

oraz plik css (potrzebny fragment)który wygląda tak:
[HTML] pobierz, plaintext 
  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. }
[HTML] pobierz, plaintext

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
24.04.2007, 14:27:31 
[HTML] pobierz, plaintext 
  1. .tab_form{
  2. width: 100%;
  3. border: 1px solid #000000;
  4. border-collapse: collapse;
  5. background-color: #FFFFCC;
  6. }
[HTML] pobierz, plaintext
toomay
24.04.2007, 15:56:02
Dzieki wielkie za odpowiedz, pomoglo.

Niestety nadal pozostaje problem z paddingiem.
aktualny kod:
[HTML] pobierz, plaintext 
  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. }
[HTML] pobierz, plaintext


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
24.04.2007, 18:53:44
wrzuć do nagłówka:
[HTML] pobierz, plaintext 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
[HTML] pobierz, plaintext
i dopiero zacznij zabawę ze stylami, IE (jak i FF) są czułe na to.
pzdr smile.gif
toomay
24.04.2007, 20:28:24
Do tej pory mialem w naglowku:

[HTML] pobierz, plaintext 
  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">
[HTML] pobierz, plaintext


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
24.04.2007, 20:48:45
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
24.04.2007, 21:01:58
Nierozumiem do czego zmierzasz. Mniejsza o roznice pomiedzy strict a transitional. Chodzi o sam fakt zmiany naglowka

z mojego obecnego:
[HTML] pobierz, plaintext 
  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">
[HTML] pobierz, plaintext


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


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
24.04.2007, 22:53:06
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
25.04.2007, 06:38:57
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.