Problem z formatowaniem pól input

0

Witam,
Mam problem z wyrówaniem pól input w formularzu. W operze mi się udało, ale w IE nie. Tutaj jest obrazek jak to wygląda:
http://img146.imageshack.us/i/problemrn.jpg/
Pomógł by mi ktoś zmodyfikować poniższy kod, aby było dobrze, bo ja już ok 3,5 h nad tym spędziłem i nie wiem, nie umiem. Z góry dziękuję za chęci.

Kod źródłowy:

<TABLE CELLPADDING="0" CELLSPACING="0" style="text-align: center; width: 274px"> 
				<TR> 
				  <TD style="text-align: center"> 
					 <FORM METHOD="post">
						<INPUT NAME="op" TYPE="hidden" VALUE="Szukaj"> 
						<h2 style="text-align: center">WYSZUKIWARKA OFERT</h2>
						<TABLE style="width:270px; text-align: center"  CELLPADDING="0" CELLSPACING="0"> 
						  <TR> 
							 <TD style="width: 135px; vertical-align: top; text-align: left; padding-top: 5px"> 
								Typ nieruchomości:
							 </TD>
							 <TD style="width: 135px; vertical-align: top; text-align: right; padding-top: 5px"> 
								 <SELECT NAME="TypNieruchomosci" style="width: 135px; text-align: right;">
									 <OPTION VALUE="" SELECTED="SELECTED">Wybierz</OPTION>
									 <OPTION VALUE="Mieszkania">Mieszkania</OPTION>
									 <OPTION VALUE="Domy">Domy</OPTION>
									 <OPTION VALUE="Działki i grunty">Działki i grunty</OPTION>
									 <OPTION VALUE="Garaże">Garaże</OPTION>
									 <OPTION VALUE="Lokale użytkowe">Lokale użytkowe</OPTION>
								 </SELECT>
						        </TD>
						  <TR> 
							 <TD style="width: 135px; vertical-align: top; text-align: left; padding-top: 5px"> 
							     Typ oferty:
							 </TD>
	                                                 <TD style="width: 135px; vertical-align: top; text-align: right; padding-top: 5px">
								  <SELECT NAME="TypOferty" style="width: 135px; text-align: right;">
									 <OPTION VALUE="" SELECTED="SELECTED">Wybierz</OPTION>
									 <OPTION VALUE="OfertySprzedazy">oferty sprzedaży</OPTION>
									 <OPTION VALUE="OfertyKupna">oferty kupna</OPTION>
									 <OPTION VALUE="OfertyZamiany">oferty zamiany</OPTION>
									 <OPTION VALUE="OfertyNajmu">oferty najmu</OPTION>
									 <OPTION VALUE="OfertyWynajmu">oferty wynajmu</OPTION>
								  </SELECT>
							 </TD> 
						  </TR> 
						  <TR> 
							 <TD style="width: 135px; vertical-align: top; text-align: left; padding-top: 5px"> 
								 Województwo:
							 </TD>
							 <TD style="width: 135px; vertical-align: top; text-align: right; padding-top: 5px"> 
								<SELECT NAME="Region" style="width: 135px; text-align: right;">
								        <OPTION VALUE="">Wybierz</OPTION>
	    							        <OPTION VALUE="Dolnoslaskie">Dolnośląskie</OPTION>
                                                                        <OPTION VALUE="Kujawskopomorskie">Kujawsko-pomorskie</OPTION>
									<OPTION VALUE="Lubelskie">Lubelskie</OPTION>
									<OPTION VALUE="Lubuskie">Lubuskie</OPTION>
									<OPTION VALUE="Lodzkie">Łódzkie</OPTION>
									<OPTION VALUE="Malopolskie">Małopolskie</OPTION>
									<OPTION VALUE="Mazowieckie">Mazowieckie</OPTION>
									<OPTION VALUE="Opolskie">Opolskie</OPTION>
									<OPTION VALUE="Podkarpackie">Podkarpackie</OPTION>
									<OPTION VALUE="Podlaskie">Podlaskie</OPTION>
									<OPTION VALUE="Pomorskie">Pomorskie</OPTION>
									<OPTION VALUE="Slaskie">Śląskie</OPTION>
									<OPTION VALUE="Swietokrzyskie">Świętokrzyskie</OPTION>
									<OPTION VALUE="Warminskomazurskie">Warmińsko-mazurskie</OPTION>
									<OPTION VALUE="Wielkopolskie">Wielkopolskie</OPTION>
									<OPTION VALUE="Zachodniopomorskie">Zachodnio-pomorskie</OPTION>
									<OPTION VALUE="Zagranica">Zagranica</OPTION>
								</SELECT>
							</TD>
						  </TR>
						  <TR> 
							 <TD style="width: 135px; vertical-align: top; text-align: left; padding-top: 5px"> 
								Miasto:
							 </TD>
							 <TD style="width: 135px; vertical-align: top; text-align: right; padding-top: 5px"> 
								<INPUT TYPE="TEXT" NAME="Miejscowosc" style="width: 131px; text-align: right;" MAXLENGTH="100">
							 </TD>
						  </TR>
						  <TR>
							 <TD style="width: 135px; vertical-align: top; text-align: left; padding-top: 5px">
								Powierzchnia [m2]: 
								</TD>
								<TD style="width: 135px; vertical-align: top; text-align: right; padding-top: 5px"> 
								<INPUT TYPE="TEXT" NAME="MinPow" style="width: 58px" MAXLENGTH="20">&nbsp;-&nbsp;<INPUT TYPE="TEXT" NAME="MaxPow" style="width: 57px" MAXLENGTH="20">
								</TD>
							 </TD>
						  </TR> 
						  <TR>
						      <TD style="width: 135px; vertical-align: top; text-align: left; padding-top: 5px">
								 Cena [PLN]: 
							  </TD>
							  <TD style="width: 135px; vertical-align: top; text-align: right; padding-top: 5px"> 
								 <INPUT TYPE="TEXT" NAME="MinCena" style="width: 58px" MAXLENGTH="20">&nbsp;-&nbsp;<INPUT TYPE="TEXT" NAME="MaxCena" style="width: 57px" MAXLENGTH="20">
							 </TD>
						  <TR> 
							 <TD style="width: 135px; vertical-align: top; text-align: left; padding-top: 5px">  
								Liczba pokoi:
							 <TD style="width: 135px; vertical-align: top; text-align: right; padding-top: 5px"> 
							     <SELECT NAME="LiczbaPokoi" style="width: 135px; text-align: right;">
            						     <OPTION VALUE="0" SELECTED="SELECTED">Dowolna</OPTION>
            						     <OPTION VALUE="1">1</OPTION>
            						     <OPTION VALUE="2">2</OPTION>
            					      	     <OPTION VALUE="3">3</OPTION>
            						     <OPTION VALUE="4">4</OPTION>
            						     <OPTION VALUE="5">5</OPTION>
 							     <OPTION VALUE="6">6</OPTION>
	    						     <OPTION VALUE="7">7</OPTION>
            						     <OPTION VALUE="8">8</OPTION>
    							     <OPTION VALUE="9">9</OPTION>
    							     <OPTION VALUE="10">Powyżej</OPTION>
							     </SELECT>
							 </TD>
						  </TR>
						  <TR>
						  <TD colspan="2" style="vertical-align: top; text-align: center; padding-top: 5px">
						      <INPUT TYPE="SUBMIT" VALUE="Szukaj"> 
					          </TD>
						</TR>
					</TABLE></FORM></TD> 
				</TR> 
			 </TABLE>

styl użyty w dokumencie:

p,li,ul {  
font-family: Georgia, Times New Roman, Times, serif; 
font-size: 9pt; 
color: #000000}

BODY
{

 scrollbar-base-color: #FFFFFF; 
 scrollbar-face-color: #E0E0E0; 
 scrollbar-track-color: #F5F5F5; 
 scrollbar-arrow-color: #747474;
 scrollbar-highlight-color: #FFFFFF; 
 scrollbar-3dlight-color: #CCCCCC; 
 scrollbar-shadow-color: #E0E0E0;
 scrollbar-darkshadow-color: #747474; 
}

SELECT 
{background-color: #FFFFFF; 
 color: #000000;
 font-size: 10pt;
 font-family: Arial;
 font-weight: normal;}

TEXTAREA,.TEXTBOX,.FILE
{background-color: #FFFFFF; 
 border: #7F9DB9 1px solid; 
 color: black; 
 font-family: Arial; 
 font-size: 8pt; 
 font-weight: normal;
}

.SUBMIT
{background-color: #cadeee; 
 border: #7F9DB9 1px solid; 
 color: black; 
 font-family: Arial; 
 font-size: 8pt; 
 font-weight: bold;}

FORM{
	margin : 0px;
	margin : 0px;
}

a:link, a:visited, a:active  
{text-decoration:underline; 
 color:#000000}
a:hover 
{text-decoration:none;
 color:#FF802B}


table
{
   border: 0px;
   margin: 0px;
   padding: 0px;
   text-align: center;	
}

tr
{    
   border: 0px;
   margin: 0px;
   padding: 0px;
}

td
{
   color: white;
   font-family: Arial;
   font-size: 10pt;
   font-style: normal;
   font-weight: normal;
   text-decoration: none;
   text-indent: 0px;
   border: 0px;
   margin: 0px;
   padding: 0px;
}

h2
{
   color: white;
   font-family: Arial;
   font-size: 12pt;
   font-style: normal;
   font-weight: bold;
   text-align: center;
   text-decoration: none;
   margin-bottom: 0px;
   margin-top: 0px;
   padding-bottom: 0px;
   padding-top: 0px;
}

0

Radził bym ci cały kod przerobić na div. Tabelki służą do prezentowania danych :)

0

Z divami podobnie było, bez różnicy.

0

W tych po prawej wystarczyło by ustawić float: right; . A w reście na float;left. Jeżeli byś operował na div.
Miałem podobny problem i nie do końca pamiętam jak go rozwiązałem :)
Zazwyczaj float left rozwiązuje problem w IE.

0

Ja jednak zostaję przy tabelce, bo nie chce mi się zmieniać całego kodu. Jakiś pewnie jest myk jak rozwiązać problem tylko może z kilka geniuszy na świecie wie, a my to ciemna masa i nie umiemy.

1

@tomek m.
Nie "paru geniuszy", tylko praktycznie każdy profesjonalny frontend developer. W Polsce: co najmniej kilkaset czy kilka tysięcy osób. Uzyskanie takiego efektu nie stanowi żadnych trudności, w poprzednich dwóch projektach coś takiego miałem.

Problem (nie mój :) ) w tym, że kod, który tu podałeś, ma na tyle nikłą jakość i jest tak nieczytelnie podany, że zwyczajnie nie chce mi się w nim babrać. Może gdybyś dał link do żywej wersji strony...

Tak czy siak, jeśli chcesz tworzyć strony www, to polecam Ci naukę CSS. Tabelek w ten sposób to się używało dziesięć czy piętnaście (!) lat temu. Teraz mamy XXI wiek, rok 2011, a najwyraźniej kolejna nowa strona zyskuje kod made in 1995. Nie tłumacz się tym, że "nie należysz do grona paru geniuszy", bo to głupia, szkodliwa i błędna wymówka. Po prostu nie poświęciłeś jeszcze wystarczającej ilości czasu na naukę właściwych rzeczy.

Zerknij sobie na jakiś kurs HTML/CSS. Z polskich to chyba przyzwoity powinien być ten: http://kurs.browsehappy.pl/ (chociaż sam go nie przerabiałem -- powstał dla mnie za późno).

1

tomek

Ja osobiście nie korzystam z tabelek gdyż wpierw zabrałem się za div. Dlaczego Div a nie tabele? Odsyłam do tego arta http://www.kurshtml.edu.pl/css/wstep,szablon.html

Tabelki służą do prezentacji danych tabelarycznych. Mają same wady. Dla mnie najważniejsze:
-Str powolniej działa
-Nie wszystkie funkcje CSS są dostępne
-Całość jest gorsza w edycji.

Twój kod jest bardzo nie czytelny i sam do niego nie zerkałem. Zobaczyłem tylko na obrazek i od razu wiedziałem o co chodzi. Ale dopiero potem zerknąłem chwilowo na kod i patrzę td. :). Spróbuj całość zrobić na Div wtedy poprawię ci każdy błąd.

Samego CSS możesz się nauczyć w 2tyg robiąc przykładową str.

0

Proszę tylko pamiętać, że "robienie strony na divach" to tylko pewna przenośnia, dość niefortunne określenie. Elementów div powinniśmy używać jak najrzadziej. One same są niewiele lepsze od tabeli. Zamiast "div-ów", należy używać semantycznego kodu znaczników (HTML-a) by podkreślić strukturę dokumentu, a następnie CSS by opisać sposób prezentacji tegoż dokumentu. div nie jest elementem semantycznym i gdy tylko ma to sens, należy użyć czegoś bardziej strukturalnego (ul, blockquote, address, h1..h6, czy pochodzące z HTML-a 5 header, footer, article, section, nav...)

0

Ja jestem za stosowaniem div jako samej struktury. Z resztą każdą str można robić modułowo wykorzystując <?php require_once('./index.php'); i swoje umiejętności :) Tylko dlaczego każdy klepie w html :(

0

Alex011251 napisał(a)

Ja jestem za stosowaniem div jako samej struktury.

Nie jestem pewien o co Ci chodzi. Skoro napisałeś to w odpowiedzi na mój poprzedni post, to zdaje się, że jesteś za tym, by używać wyłącznie divów (a nie semantycznych tagów) jako samej struktury. Jeśli tak, to you're doing it wrong.