problemi allineamento tabella con firefox su layout css

razvan

problemi allineamento tabella con firefox su layout css

Ciao a tutti,
scrivo in questa sezione poiché credo (e sottolineo "credo", spero che mi si possano dare lumi in caso contrario) che il mio problema risieda in qualche standard css non supportato da firefox. :bho:

Sto costruendo un sito su layout css a 2 colonne attraverso div che non hanno posizioni assolute.

La struttura è la seguente: un div contenitore totale nel quale sono annidati

div intestazione comprendente il menu' orizzontale superiore

div "strumenti" contenente dei tools, impostato ad una larghezza pari al 22% e flottante sulla destra

div corpo impostato ad una larghezza pari al 78%

div footer contenente il menu' orizzontale inferiore.

All'inizio del div corpo ho inserito il tool per la ricerca di google ads ed un annuncio pubblicitario, per allinearli, non riuscendoci con i div, ho dovuto ricorrere ad una tabella.
Questa tabella, nelle intenzioni, deve fare parte del modello fisso di ogni pagina del sito.

Sotto questa tabella, dopo un "a capo", si sviluppa il contenuto.

Su Nvu e Frontpage l'allineamento del tutto è visualizzato secondo quelle che sono le intenzioni.

Quando provo la pagina su Firefox la tabella con il tool per la ricerca e l'annuncio appare al suo posto rispetto all'altezza ma completamente spostato sulla destra non della struttura del sito ma proprio dello schermo, come se fosse all'interno di un box con posizione assoluta e allineamento a destra.:?

Se apro la stessa pagina con Opera l'allineamento è perfetto.

Ho provato ad inserire la tabella in questione in un div flottante a sinistra col risultato che, quando ho aperto la pagina su Firefox, la tabella era ben allineata ma era il resto del contenuto del div corpo a trovarsi allineato a destra dello schermo stavolta.:x

Se apro la pagina con Firefox appare un avviso di percorso del file sbagliato ma non è così.

Se apro la pagina con Opera no.:(

Sicuramente io non sono molto esperto. Qualcuno può suggerirmi qualche prova o qualche rimedio?

Grazie, scusate se sono stato prolisso ma ho voluto cercare di spiegare la situazione.

Ciao:)

laburno

Ciao Razvan e benvenuto
Postaci sia l'html che il CSS, così vediamo di entrare anche nel pratico

razvan

Ciao, grazie molte.

Dunque, cerco di inserire le cose essenziali per non appesantire troppo il messaggio.

Parto dall'html:

<body>

<div id="contenuto" >
<div id="intestazione">
... logo e menù orizzontale

</div>

<div id="strumenti">
...serie di tool separati da <p>
</div>

<div id="corpo">

<table id="ricercaeannunci">
<tr>
<td>...tool ricerca di google </td>
<td> ...annuncio </td>
</tr>
</table>

...poi un'altra tabella con immagini collegate a pagine interne ed un'altra per strutturare i links ad altri siti chiusa in un div. Un banner e poi
</div> <!--fine div corpo>
... quindi il footer, poi fine tag contenuto, fine tag body e fine tag html.

Ora il css

div#contenuto{width: 760px; font-family: arial,sans-serif;font-size: 76%;color:#838383; text-align: left;
border: 2px solid #898989; padding:3px;} .

..definizione dei link, degli h1 eh2 e poi

/stili generici, su header e footer/
div#intestazione{margin-top:5px; margin-bottom:5px; padding-top:7px; padding-bottom:5px; }
div#piede{ margin-bottom:10px; margin-top:5px; padding-bottom: 7px; text-align:center; padding-top:5px;
}

/stili specifici per il layout/
div#strumenti{float:right; width: 22%; padding-top:26px; text-align:justify;}
div#corpo{ width:78%; padding: 1px; }
div#links { margin-top:5px; padding-top: 10px; }

...la definizione delle classi dei link dei menù e poi, per le tabelle

table{border:0px;}
#ricercaeannunci td{padding:7px;}
#tabellalinks td{padding:7px; decoration:none;}

...la prima è la tabella col tool google e l'annuncio, la seconda quella seguente alla tabella col tool google e l'annuncio.

Spero di non aver occupato troppo spazio e che il post così strutturato possa servire.

Grazie ancora per la disponibilità.

Ciao:):):):)

laburno

Ok adesso ci sono gia di più
Ancora due cose non ho capito: la prima è come vuoi allinearli, la seconda è proprio la tabella, coi div non ci sei riuscito?

Tipo così:
<div></div>
<div></div>

razvan

Ciao:),

la struttura del sito è la seguente:

i n t e s t a z i o n e

c o r p o str
ume
nti

p i e d e

ed il corpo è strutturato così:

tool google annunci

c o n t e n u t o

quindi vorrei allineare il tool ricerca google con l'annuncio, all'interno del div corpo, sulla prima riga, in testa al contenuto.

Adesso ti mostro cosa succede nella visualizzazione su Firefox:

I n t e s t a z i o n e

c o r p o s t r
tool google annuncio
u m e
contenuto n t i

p i e d e

Quando ho provato a chiudere la tabella con tool ed annuncio in un div flottante a sinistra il risultato è stato questo:

I n t e s t a z i o n e

c o r p o s t r
u m e
tool ann.
contenuto
n t i

p i e d e

Ho provato a lungo, prima di provare con le tabelle, a racchiudere semplicemente il tool Google e l'annuncio in due div, ma non si allineavano mai, andavano semplicemente a capo.

Adesso che me lo hai suggerito ci ho riprovato ed il risultato è stato questo:

I n t e s t a z i o n e

c o r p o s t r
tool google
annun. u m e
conten. n t i

p i e d e

Spero che attraverso queste schematizzazioni la situazione possa essere più chiara, mi rendo conto che è difficile inquadrare la situazione quando non la si è pensata di prima persona.

Ho provato a realizzare piccole gif illustrative ma per caricarle nel forum mi viene richiesta una url ed io non ho ancora uno spazio su internet, quindi o ripiegato sulla soluzione che hai visto.

Grazie ancora.

Ciao:)

razvan

Scusa ma mi sono accorto che i miei tentativi di allineamento con il testo, una volta postata la risposta, hanno perso tutta la struttura che gli avevo dato mescolandosi in una gran confusione...

Provo a fare una descrizione a parole:

come avrai visto c'è un corpo principale ed una colonna -"strumenti"- a destra.

Nel corpo principale voglio mettere sulla stessa riga, la prima, il tool google e l'annuncio, al di sotto di questa riga voglio sviluppare il contenuto.

Provando a chiudere il tool google e l'annuncio in div non riuscivo ad allinearli, l'annuncio andava a capo.

Quando visualizzo la pagina così com'è su Firefox la tabella con il tool e l'annuncio si sovrappone alla colonna "strumenti", sulla destra, e la riga continua oltre la struttura del sito, fino alla fine dello schermo.

Se racchiudo la tabella in un div flottante a sinistra aprendo la pagina su Firefox la tabella compare ben allineata ma è il contenuto ad apparire tutto spostato sulla destra, dalla fine della colonna "strumenti" fino alla fine dello schermo.

E' come se all'inizio delle righe ci fosse un rientro.

Riprovando a racchiudere il tool e l'annuncio in due div anziché in una tabella come mi hai suggerito tu, aprendo la pagina con Firefox il tool appare spostato sulla destra come prima e l'annuncio va' a capo sulla sinistra del corpo principale...

Grazie.
Ciao:)

laburno

Ok, cercando di spiegare bene mi ha confuso un po le idee Vediamo di venirne fuori:

Nel corpo principale voglio mettere sulla stessa riga, la prima, il tool google e l'annuncio, al di sotto di questa riga voglio sviluppare il contenuto.Vediamo, potresti provare così:
[html]<div class="box-contenuto">
<div class="tool-google"></div>
<div class="annuncio"></div>
</div>[/html]

E il CSS:

/* Il box-contenuto fa il clear degli elementi fluttuanti al suo interno */
.box-contenuto:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.box-contenuto{display: inline-block;}

/* Dimensiono e fluttuo gli elementi interni */
.tool-google, .annuncio {width: 50%; float: left;}

razvan

Ciao, innanzitutto grazie per avermi segnalato e, di conseguenza, spinto a indagare la proprietà clear e la sottoclasse after che non conoscevo.

L'idea del display inline-block mi gironzolava per la testa ma non ero riuscito a formularla bene, grazie anche per questo.

Ho provato ad usare il tuo suggerimento...preparati...

su Opera il tool e l'annuncio sono allineati sulla stessa riga, come vorrei, e come accade anche con la tabella.

Su Firefox i due blocchi appaiono , si, uno di fianco all'altro...ma sfalsati in altezza, uno su una riga, l'altro sotto...

E oltretutto il contenuto che sta sotto ai due elementi è spostato in basso da un bel po' di spazio bianco x

Quindi stavolta i problemi di disallineamento orizzontale si sono spostati lungo l'asse verticale... x:x

Forse mi converrebbe ricominciare tutto da capo...evidentemente c'è qualcosa che mi sfugge poiché se potevo avere dubbi sul mio utilizzo della tabella il tuo metodo è sicuramente correttissimo.

Mi viene strano però questo fatto della correttezza della struttura quando viene visualizzata con gli editor o con Opera e non con Firefox

Ti ringrazio tanto comunque per la pazienza, la disponibilità e la cortesia.

Ciao

laburno

Prova a cambiare il width dei due sottodiv da 50% a 49%.

temo che il problema stia nel fatto che non hai resettato i CSS che i browser applicano di default.

Fammi sapere

razvan

Ciao,

avevo già provato ad assegnare width diversi per i sottodiv calcolando la percentuale di spazio che avrebbero impiegato oltre che provare anche il 50% e 50% quando mi hai segnalato la soluzione.

Il fatto è che, in fondo, sono tutti metodi corretti di procedere, tanto che la visualizzazione errata avviene solo su Firefox.

Puoi dirmi qualcosa rispetto al reset dei CSS che i browser applicano di default? Non conosco bene questo argomento ed andrò a documentarmi, credo sia molto probabilmente il nodo della questione.

Grazie molte

Ciao;)

laburno

Ciao Razvan,
il reset è un foglio con delle regole che azzerano tutti i possibili valori di default che ogni browser mette a determinati elementi. A volte questi valori non coincidono ma variano da browser a browser e per questo alla fine ci ritroviamo con lo stesso layout che viene visualizzato diversamente per piccole differenze.

La forma più sbrigativa di un reset è questa:

* { margin: 0; padding: 0; }

Per annullare tutti i padding e tutti i margini (che sono le proprietà che causano più problemi.

Eric Meyer ne ha sviluppato uno più completo e adesso è molto utilizzato, che è questo:


html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}
body {
	line-height: 1;
	color: black;
	background: white;
}
ol, ul {
	list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}

Il reset va richiamato prima di ogni altra dichiarazione.

razvan

Grazie;),

purtroppo, però, ho provato ma il risultato è sempre lo stesso.

Adesso che ho capito cosa è il reset, infatti, ricordo che era presente anche nella prima struttura per il css che ho usato, era la struttura per un layout elastico che ho preso da un sito autorevole, ma anche con quella le cose non erano diverse.

Ho visto anche il tuo layout-izzatore visitando il forum e credo che ne prenderò spunto poiché sto ricominciando a strutturare il sito da capo...vediamo cosa ne esce fuori stavolta!

Grazie, ciao