Div, Form i tło div'a Opcje

[daris]

Mam taki kod:

[HTML] pobierz, plaintext 
<div class=panel>
  <div class=title>Styl</div> <!-- to tytuł, tło to górna zaokrąglona ramka -->
 		<div class=content> <!-- tu jest kolor jako tło i border-left i right -->
 		  <form method="post" action="style.php">Wybierz styl z poniższej listy:
 		    <select name="style"><option value=black selected>black</option></select>
 		    <input type="submit" value="OK">
   		</form> 
 		</div>
 		<div class=panel_bottom></div> <!-- to dół panelu, tło to obrazek z zaokrągloną ramką -->
 	</div>
[HTML] pobierz, plaintext 

i na dole wyświetla się bez tła:

(IMG:http://img175.imageshack.us/img175/7328/form2wo7.th.png)

Problem występuje tylko jeśli zawartość div'a kończy się na </form>. Znalazłem obejście dodając &nbsp za </form>, ale to znów daje nową linię. Co jest nie tak?

Ten post edytował daris 17.01.2008, 14:35:51

[grzesiek_g]

Spróbuj pobawić się float, jeśli to nic nie da to overflov. Najlepiej w FF zainstaluj np. Firebug - ładnie pokaże ci granice tego div-a i będziesz mógł poeksperymentować ze stylami.

[daris]

Z Firebuga dowiedziałem się tylko tyle że form wyłazi za content. Próbowałem contentowi dać height: 100% ale wtedy każdy panel ma długość ok. 1400px (IMG:http://forum.php.pl/style_emoticons/default/biggrin.gif)

edit: rozszerzenie content'a też nic nie daje

edit2: pomogło dodanie:

Kod

.content {
    overflow: auto;
}

chociaż pod Firefoksem nadal jest odstęp (nowa linia?) pod form'em (w operze jest dobrze)

Ten post edytował daris 17.01.2008, 14:52:29

[grzesiek_g]

Jeśli masz mozliwośc podania linka to go podaj, będzie łatwiej coś powiedzieć.

[batman]

Podaj kod CSS. Może tam masz coś namieszane. Zanim to jednak zrobisz ustaw margin i padding na 0 dla znacznika form.

[daris]

Zanim to jednak zrobisz ustaw margin i padding na 0 dla znacznika form.

Problem po raz drugi rozwiązany (IMG:http://forum.php.pl/style_emoticons/default/biggrin.gif) Pierwsze (overflow: auto) było niepotrzebne. Pomogło oczywiście dodanie do css'a:

Kod

form {margin: 0px;}

Teraz działa i pod Firefoksem i pod Operą (a pod IE to nie wiem czy się czasem cała strona nie rozleci bo ani razu nie testowałem ;P (a na windowsa nie za bardzo chce mi sie przechodzić (IMG:http://forum.php.pl/style_emoticons/default/winksmiley.jpg) (linux only (IMG:http://forum.php.pl/style_emoticons/default/winksmiley.jpg) )))

[grzesiek_g]

O ile dobrze pamiętam to form nie ma nadanych standardowo żadnych styli, jedynie fieldset ma border, więc musiałeś gdzieś nadać sam ten margin.

[daris]

Pewnie sobie odziedziczył po np:
.panel {margin-bottom: 10px;}

[batman]

O ile dobrze pamiętam....

Źle pamiętasz.
Znaczniki z domyślnymi marginesami i/lub dopełnieniami: form, ul, li, p, h(1,2,....).

edit
Marginesy i dopełnienia nie są dziedziczone. W IE występuje błąd na dublowaniu dopełnienia, ale to już inna bajka (IMG:http://forum.php.pl/style_emoticons/default/winksmiley.jpg)

Ten post edytował batman 17.01.2008, 15:53:31

[grzesiek_g]

Źle pamiętasz.
Znaczniki z domyślnymi marginesami i/lub dopełnieniami: form, ul, li, p, h(1,2,....).

Mogę, źle pamiętać bo używam resetowania styli na początku i to wkleja mi się automatycznie przy tworzeniu nowego pliku. Ale pisząc tamtego posta zerknąłem jeszcze do wydrukowanej dokumentacji i nic tam nie było o predefiniowanych stylach dla form. Dla innych które wymieniłeś (nie wszystkie, np blockquote) są odpowiednie wpisy.