[HTML] Znacznik form w komórce psuje układ

HTML to podstawy w dziedzinie tworzenia stron WWW, Style CSS warto opanować, bowiem za ich pomocą można dostosować odpowiednio wygląd swojej witryny WWW. Zagłębiamy się dalej i udostępniamy w tym forum możliwość zadawania pytań o JavaScript.
ODPOWIEDZ
Cvaniak
Nowy
Nowy
Posty: 22
Rejestracja: ndz lip 24, 2005 12:36 pm

[HTML] Znacznik form w komórce psuje układ

Post autor: Cvaniak »

Tak jak w temacie, napisze ten post i musze odejsc od kompa bo nie wytrzymam juz dluzej z tym htmlem. Chodzi o to, ze jak mam taki kod:

Kod: Zaznacz cały

<table cellpadding="0" cellspacing="0">
<tr>
	<td><img src="icon.gif" /></td>
</tr>
<tr>
	<td><input type="text" name="search" size="18" /><input type="submit" value="Szukaj" /></td>
</tr>
<tr>
	<td><a href="" style="font-size: 10px">Zaawansowane wyszukiwanie</a><br /><br /></td>
</tr>
</table>
Wszystko jest ok, wyswietlane tak:
[-----ICON.GIF------]
[---------SEARCH-----------][-SZUKAJ-]
Zaawansowane wyszukiwanie

Kiedy jednak dodam znaczniki <form></form>:

Kod: Zaznacz cały

<td><form method="post"><input type="text" name="search" size="18" /><input type="submit" value="Szukaj" /></form></td>
Efekt końcowy w firefoxie jest dobry, ale w IE wygląda to tak:
[-----ICON.GIF------]

[---------SEARCH-----------][-SZUKAJ-]

Zaawansowane wyszukiwanie


a w operze:
[-----ICON.GIF------]
[---------SEARCH-----------][-SZUKAJ-]

Zaawansowane wyszukiwanie

Pomozcie prosze bo ja juz nie mam sil :(
Hawk
Przelotem
Przelotem
Posty: 209
Rejestracja: ndz gru 22, 2002 9:34 pm

Re: [HTML] Znacznik form w komórce psuje układ

Post autor: Hawk »

Nie posiadam IE (jaka szkoda...), wiec nie sprawdze, ale sprobuj wywalic znacznik form poza tabele.
Stig
Administrator
Posty: 938
Rejestracja: pn paź 04, 2004 10:52 am

Re: [HTML] Znacznik form w komórce psuje układ

Post autor: Stig »

Przede wszystkim tabele służą do przekazywania danych tabelarycznych, a więc takie ich zastosowanie jest błędem. Proponuję rozwiązać ten problem w następujący sposób:

Kod: Zaznacz cały

fieldset, form {
border: 0;
margin: 0;
padding: 0; }

a, img {
display: block; }

a {
font-size: 10px; }
...
<img src="icon.gif" />
<form method="post" action="#">
<fieldset><input type="text" name="search" size="18" /><input type="submit" value="Szukaj" /></fieldset>
</form>
<a href="" style="font-size: 10px">Zaawansowane wyszukiwanie</a>
ODPOWIEDZ