Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [xhtml/css] problem z inputami i textarea w ie, <textarea> oraz <input type="text">
toomay
post
Post #1





Grupa: Zarejestrowani
Postów: 10
Pomógł: 0
Dołączył: 23.04.2007

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

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
Go to the top of the page
+Quote Post
Darti
post
Post #2





Grupa: Zarejestrowani
Postów: 1 076
Pomógł: 62
Dołączył: 6.03.2005
Skąd: Wroc

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

[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
Go to the top of the page
+Quote Post
toomay
post
Post #3





Grupa: Zarejestrowani
Postów: 10
Pomógł: 0
Dołączył: 23.04.2007

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

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
Go to the top of the page
+Quote Post
Darti
post
Post #4





Grupa: Zarejestrowani
Postów: 1 076
Pomógł: 62
Dołączył: 6.03.2005
Skąd: Wroc

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

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 (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)
Go to the top of the page
+Quote Post
toomay
post
Post #5





Grupa: Zarejestrowani
Postów: 10
Pomógł: 0
Dołączył: 23.04.2007

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

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 (IMG:http://forum.php.pl/style_emoticons/default/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 (IMG:http://forum.php.pl/style_emoticons/default/sad.gif) .

pozdrawiam
toomay
Go to the top of the page
+Quote Post
Darti
post
Post #6





Grupa: Zarejestrowani
Postów: 1 076
Pomógł: 62
Dołączył: 6.03.2005
Skąd: Wroc

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

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.
Go to the top of the page
+Quote Post
toomay
post
Post #7





Grupa: Zarejestrowani
Postów: 10
Pomógł: 0
Dołączył: 23.04.2007

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

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
Go to the top of the page
+Quote Post
Darti
post
Post #8





Grupa: Zarejestrowani
Postów: 1 076
Pomógł: 62
Dołączył: 6.03.2005
Skąd: Wroc

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

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 (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)

Ten post edytował Darti 24.04.2007, 22:55:58
Go to the top of the page
+Quote Post
toomay
post
Post #9





Grupa: Zarejestrowani
Postów: 10
Pomógł: 0
Dołączył: 23.04.2007

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

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 (IMG:http://forum.php.pl/style_emoticons/default/guitar.gif) .

Mimo wszystko dziekuje, jako jedyny zdecydowales sie pomoc. Grunt ze problem z borderem zostal rozwiazany (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)

pozdrawiam
toomay
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

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

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 15.09.2025 - 18:12
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn