Strano comportamento di un bordo e dei margini

[Gas75]

Salve.
Ho definito il seguente div...

div.schedalbo { margin: 5px auto; width: 640px;
border: 1px solid #c00000; font-family: Arial, Helvetica;
font-size: 13px; color: #ffffff; text-align: center; }

Come vedete si tratta di una classe, quindi posso ripetere il div quante volte voglio nella pagina web... se le guide sul css cui faccio riferimento non le ha scritte qualche buontempone...

Problema è che:
- su Firefox il bordo in questione si comporta stranamente, appare solamente in cima al primo div schedalbo, ed è come se gli altri gli si attacchino sotto, alla distanza pari al margin che ho dato! Cioè se ho 3 div schedalbo, vedo 3 linee orizzontali, ditanziate 5px, a partire dal bordo top del primo di essi, che si sovrappongono al testo contenuto nel div!
- su Explorer il bordo si vede bene ma i margini destro e sinistro (auto) vengono ignorati, e tutto se ne va sulla sinistra. Va bene che dentro questo div ne ho due con float: left, ma è il loro contenitore che finisce a sinistra...

[Prill]

Fai un clear dei float

[Gas75]

Dovresti cortesemente essere più esplicito.
Ho aggiunto

clear: both

al div, e ora su Firefox ho distanziato adeguatamente i bordi orizzontali (sono tra un div e l'altro), ma non vedo quelli verticali. Su Explorer invece nessuna differenza rispetto a prima.

[sgogghy]

potresti spiegare meglio come devono essere visualizzate le div?

[Gas75]

Ho questo div schedalbo, centrato nel suo box contenitore, composto da due div affiancati, uno sinistra uno a destra.
Sotto ogni schedalbo ce ne sta un altro fino ad arrivare a riempire il box contenitore con 10 div schedalbo, ognuno composto dai due div affiancati. Il bordo deve stare soltanto attorno al div schedalbo.
Questa è la parte di css che riguarda tutta la struttura in questione...

div#main { position: absolute; top: 182px;
left: 140px; bottom: 20px; float: left; padding: 5px;
width: 690px; height: auto; min-height: 300px;
background-color: #000000; font-family: Arial, Helvetica;
font-size: 13px; text-align: justify; overflow: auto; }
/* box contenitore */

div.schedalbo { clear: both; margin: 5px auto;
width: 640px; border: 1px solid #c00000;
font-family: Arial, Helvetica; font-size: 13px;
color: #ffffff; text-align: center; }
/* definizione dei 10 div contenuti nel main */

div.albosx { padding: 2px; float: left; width: 39%;
font-family: Arial, Helvetica; font-size: 13px;
color: #ffffff; text-align: justify; } /* a sinistra dentro schedalbo */

div.titolo { font-family: Arial, Helvetica;
font-size: 13px; color: #ffff00; text-align: justify; }
/* un div interno per cambiare formato a una riga */

div.scena { font-family: Arial, Helvetica; font-size: 13px;
color: #00cc40; text-align: justify; }
/* un div interno per cambiare formato a una riga */

div.albodx { padding: 2px; float: left; width: 59%;
font-family: Arial, Helvetica; font-size: 13px;
color: #ffffff; text-align: justify; }
/* a destra dentro schedalbo */

Vorrei capire perché non vedo il bordo tutt'attorno a schedalbo su Firefox, e perché su Explorer mi ignora il centramento di schedalbo.
Non sono un esperto di css, ma cerco di seguire i comandi base come descritti nelle guide (specie di questo sito), e se definisco un bordo senza dire top, left, ecc..., mi aspetto che circondi tutto il div. Inoltre margin: 5px auto; dovrebbe centrare il div nel suo contenitore, ma non lo fa su Firefox... solamente in questo caso.

[Prill]

Fai un clear all'interno del div schedalbo, subito dopo gli elementi flottanti, oppure se conosci l'altezza del div, che deve essere fissa, impostala sul div e aggiungi un overflow:hidden.
I problemi che rilevavi prima erano dovuti al float che interessava tutti i div che seguivano quelli flottanti, e perciò tendevano a fluttuare pure loro, non disponendosi a lato perché non v'era lo spazio, ma risalendo comunque e ignorando i margini. Il problema che riscontri ora è sempre problema di float, il div contenitore non si estende a inglobare i div flottanti contenuti perché sono sottratti a quello che dovrebbe essere il normale flusso. Aggiungere un div con un clear:both dopo di essi dice al contenitore fin dove deve arrivare (puoi eliminare perciò il clear su schedalbo in quanto è già fatto al suo interno)

[Gas75]

Grazie della spiegazione, ma l'aspetto della pagina non cambia di un pixel usando il clear come dici.
Non mi capacito del fatto che una istruzione di disposizione di un div infici la comparsa o meno dei bordi laterali, quando di spazio ce n'è appositamente a sufficienza.
Così come non mi capacito del fatto che il bordo si stacchi dal div per il quale è stato definito. Mai vista una cosa del genere, né l'argomento viene mai trattato nelle guide che ho consultato. Sicuramente c'è qualche errore nel mio codice, ma anche nelle guide che fanno sembrare il css una roba per non professionisti del web.

[Prill]

sbagli qualcosa. Hai inserito su il css, posta anche l'html (comunque già nel tuo codice si vede qualcosa che non va, che non riguarda il tuo problema, ma pur sempre incongruenze: il tuo div main ha un position:absolute e contemporaneamente un float:left, o usi un float o un posizionamento assoluto)

[Gas75]

E lo so che sbaglio qualcosa!
Intanto anche togliendo i float, la situazione non cambia, forse dipende da qualche div genitore.
Metto qua l'attuale css completo e l'html della pagina web fin dove l'ho scritta. Ci saranno altri errori, ma li sto discutendo in altre discussioni man mano che li trovo... (le parti commentate sono per ricordarmi cosa ho temporaneamente disattivato, perché una volta salvato un css, non posso tornare indietro con FrontPage...).

Ecco qua una pagina dove si evidenziano un po' i vari problemi.
http://dampyr.altervista.org/Storie01-prova.htm
Il css è qui http://dampyr.altervista.org/dampyr.css

[Prill]

html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Dampyr - Il sito: la serie mensile</title>
<link rel="SHORTCUT ICON" href="harlan_ico.gif">
<link rel="stylesheet" type="text/css" href="dampyr2.css">
</head>

<body>
<div id="container">
	<div id="header">[img]banner.gif[/img]</div>
	<div id="titolo">[img]titoli/storie.gif[/img]</div>
	<div id="content">
	<div id="menu">
		<p style="background:#c00000; font-size:16px; font-weight:bold">Menù</p>
			FUMETTO
			AUTORI
			DISEGNATORI
			PERSONAGGI
			SERIE MENSILE
			ALTRE PUBBLICAZIONI
			FRASARIO
			PRAGA
			SOMIGLIANZE
			ARTICOLI
			GADGET
			LINK
	

script google omesso</p></div>
	<div id="spot">script omesso</div>
	<div id="destro">
		<p style="background:#c00000; color:#ffffff; font-size:16px; font-weight: bold">
			N° 1 - N° 10</p>
			Indice generale

			1 - Il figlio del diavolo
			2 - La stirpe della notte
			3 - Fantasmi di sabbia
			4 - Notturno in rosso
			5 - Sotto il Ponte di Pietra
			6 - La Costa degli Scheletri
			7 - Zona proibita
			8 - Dalle tenebre
			9 - Lamiah
			10 - Casa di sangue

			Albi successivi</div>
		
	<div id="main">
		<div style="background:#c00000;color:ffff00;font-size:16px;text-align:center;font-style:italic;">Nella pagella del sito le "@" variano da 1 a 5.</div>

		<div class="schedalbo">
			<div class="albosx">
				<h2 class="titolo"><a name="1"></a>1 - Il figlio del diavolo</h2>
			Testi: Mauro Boselli e Maurizio Colombo

			Disegni: Majo

				<div class="scena">Scena: Yorvolak (Bosnia-Erzegovina)</div>

			Pagella del sito

			Trama: @@@@

			Azione: @@@

			Humor: @

			Sentimento: @@@

			Disegni: @@@@@

			Media pesata: 3,6/5


			<iframe src="approfondimenti/primoalbo.html" name="tab" width="250" height="100" marginheight="0" marginwidth="2" scrolling="auto" frameborder="0"></iframe>

			Frasario</div>
			<div class="albodx">[img]covers/thumbs/1/001.jpg[/img]Quando 
			misteriosi assassini iniziano a sterminare il suo gruppo di guerriglieri insediati a Yorvolak, Kurjak rintraccia Harlan Draka, un presunto esperto di 
			Vampiri, che in realtà si guadagna da vivere attraverso falsi esorcismi praticati assieme al suo giovane assistente Yuri. Harlan, costretto a fronteggiare il branco di Non-morti responsabile di quegli eccidi, scopre di puro istinto i propri poteri di Dampyr, e rapisce Tesla, una di loro. Il mattino dopo, i soldati sopravvissuti abbandonano Kurjak e disertano, dopo aver chiuso il loro capo in chiesa assieme ai due mostri Harlan e Tesla, e portano con loro Yuri. Mentre i 3 iniziano a conoscersi, i disertori sono assaliti e massacrati dai Non-morti di Gorka, il Maestro della Notte cui appartiene anche Tesla; il branco, quindi, si dirige a Yorvolak.

			Tesla, intanto, si rivela una Vampira ribelle, e offre il proprio aiuto consigliando ad Harlan di intingere nel suo sangue i proiettili di Kurjak; in questo modo, i tre riescono ad avere la meglio sul branco di Gorka, ma Harlan è costretto a uccidere Yuri, vampirizzato da Gorka, e sul cadavere del piccolo amico giura vendetta.</div>
			<div style="clear: both"></div>
		</div>
		<div class="schedalbo">
			<div class="albosx">
				<div class="titolo"><a name="2"></a>2 - La stirpe della notte</div>
			Testi: Mauro Boselli e Maurizio Colombo

			Disegni: Majo

				<div class="scena">Scena: Sarajevo (Bosnia-Erzegovina)</div>

			Pagella del sito

			Trama: @@@@@

			Azione: @@@@

			Humor: @@@

			Sentimento: @@@@

			Disegni: @@@@@

			Media pesata: 4,5/5


			Frasario


			Albi correlati: 1.</div>
			<div class="albodx">[img]covers/thumbs/1/002.jpg[/img]Harlan, Kurjak e Tesla entrano nella città in guerra, prendendone coscienza degli orrori. Raggiunta una stanza, Harlan sogna la propria infanzia, che gli mostra il padre Draka prima che al brusco risveglio si trovi di fronte Tesla che, sotto il dominio di Gorka, sta per sparargli, mentre Kurjak è già fuori combattimento; Harlan riesce, attraverso Tesla, a entrare in contatto con Gorka e far tornare in sè Tesla, che tuttavia lascia i suoi compagni per non metterli nuovamente in pericolo. La libertà di Tesla dura poco: mentre si prende cura di una ragazza imbattutasi in tre maniaci, è rintracciata e rapita da Gorka, che intanto ha vampirizzato tutta la Legione Nera, un sadico commando militare capeggiato da Stanko Radek, vecchia conoscenza di Kurjak.

			Sorge l'alba, e mentre Kurjak butta giù un cecchino da una terrazza, una misteriosa donna anziana rivela ad Harlan l'ubicazione del Mattatoio, il rifugio di Gorka: la biblioteca della città, ove i due si dirigono senza perdere tempo, ingaggiando una sparatoria con la Legione Nera, mentre Radek tortura Tesla col suo lanciafiamme. I due si dividono, e Harlan precipita nella biblioteca segreta del padre, custodita da una suora Non-morta: quel Mattatoio, infatti apparteneva a Draka. Harlan raggiunge Tesla e fronteggia facilmente Radek, prima di essere disarmato dal sopraggiunto Gorka. Per il Dampyr sembra la fine in quello scontro impari, ma Tesla ha ancora le forze per suggerire al suo salvatore di mordere Gorka alla gola, riuscendo in questo modo a eliminare il primo Maestro della Notte.</div>
			<div style="clear: both"></div>

		</div>
		<div class="schedalbo">
			<div class="albosx">
				<div class="titolo"><a name="3"></a>3 - Fantasmi di sabbia</div>
			Testi: Mauro Boselli

			Disegni: Luca Rossi

				<div class="scena">Scena: Merwindale (Cornovaglia)</div>
			Pagella del sito

			Trama: @@@

			Azione: @@@

			Humor: @

			Sentimento: @

			Disegni: @@@@

			Media pesata: 2,8/5


			Frasario


			Albi correlati: 2.</div>
			<div class="albodx">[img]covers/thumbs/1/003.jpg[/img]Sulle tracce di Draka, attraverso una stampa antica recuparata nella biblioteca del padre (n° 2), Harlan incontra Amber Tremayne, Maestra della Notte, in passato alleata di Draka per punire Kostacki, un Vampiro impazzito, facendolo a pezzi e inchiodandolo in fondo al mare.

			Ben presto, Harlan e Amber si alleano per salvare il piccolo Terry, catturato da Kostacki nel &quot;Sandcastle Arcade&quot;, un parco giochi costruito sulla costa.</div>
			<div style="clear: both"></div>
		</div>

		<div id="gaspare">[img]gasparepero.jpg[/img]</div></div>
		</div>
	</div>	
	<div id="footer">Sergio Bonelli Editore</div>

</body>
</html>