Background-color e DIV con tabella

[Leovre]

Premessa: nei giorni scorsi ho capito e risolto (non senza aver patito le pene dell'inferno)
il problema del background-color e i DIV float in FF

ma mi rimane di risolvere il problema dello sfondo del Footer:

Struttura pagina
DIV TITOLO
DIV CONTENITIRE
DIV BARRA NAVIGAZIONE float
DIV CONTENUTO float
DIV CLEARER clear:both
DIV FOOTER

CSS
#Footer {
background-color: red;
margin: 0 auto;
width: 800px;
padding: 0px;
border-top:solid 4px #000066;
}

Nel footer c'è una tabella:
<table border="0" align="right" cellpadding="0" cellspacing="0" >

dopo migliaia di prove sembra che se imposto
align="right" o align="left" lo sfondo del DIV NON viene impostato
se metto
lalign="center" o non scrivo niente lo sfondo del DIV viene impostato

Magari non centra solo l'align.. ma cosa dovrei sapere che non so per impostare correttamente questo benedetto
background color in FF???

PS. Con IE stranamente funziona tutto
PPS. Mi scuso per il titolo del precedente post ma non so come cambiarlo/ toglierlo

Grazie 1.000

[Mich_]

Perche` hai postato nel forum CSS?
Nel codice presentato non c'e` nessun riferimento a formattazione realizzata tramite CSS.

Devi scegliere se:
- continuare con il tipo di sintassi (di vecchio stampo) -> e allora ti spostiamo nel forum HTML
- passare ad una sintassi moderna, con formattazione realizzata tramite CSS. In questo caso devi eliminare tutti gli attributi HTML di formattazione ed usare invece i CSS.

Tieni presente che formattazione HTML e formattazione CSS vanno in conflitto, e browser diversi risolvono i conflitti in modo diverso.

[Leovre]

E' tutto in CSS tranne l'allineamento della tabella, per cui tenetemi qui in CSS
Facendo mille prove ho visto questo strano comportamento, e lavorando in Dreamweaver ho fatto prima a modificare direttamente l'HTML che modificare il CSS

Adesso posso usare solo IE, ma stasera provo a vedere se è un conflitto tra HTML e CSS su FF, anche se mi sembra strano lo sia solo per align left e right e non per center

Se nel frattempo a qualc'uno viene in mente qualcosa...
Grazie

[Mich_]

Align e` uno di quegli attributi obsoleti, che qualche browser moderno non riconosce.
E non mi sorprende che il valore left non dia problemi, mentre altri valori si`, dato che il left e` il valore di default.

Comunque l'unico consiglio che mi sento di darti e` di eliminare tutti gli attributi di formattazione e spostare la formattazione nei CSS.

[simotenax]

il suo codice è tutto organizzato in un css ma ora per comodità ha postato così..

comunque vedi se questo codice può esserti di aiuto :

<div id="titolo">titolo</div>
<div id="contenitore">contenitore</div>
<div id="navbar" style="float:left;width:30%;border:1px solid blue;">navbar</div>
<div id="contenuto" style="float:left;width:69%;border:1px solid red;">contenuto</div>
<div id="clearer">clearer</div>
<div id="footer" style="border:1px solid black;">footer
    <table cellpadding="0" cellspacing="0" style="border:none;background-color:red;text-align:center;width:70%;">
        <tr><td>asd</td><td>asd</td></tr>
        <tr><td>asd</td><td>asd</td></tr>
        <tr><td>asd</td><td>asd</td></tr>
    </table>
</div> 

[Leovre]

Si si, i DIV sopra al footer sono all'incirca come i tuoi con in più il loro contenuto ovviamente
Pratico anche mettere lo Style direttamente dentro ai Tab in HTML, se no per ogni cosa bisogna aprire e modificare il foglio esterno CSS (come stavo facendo io VVoVe: )

Nel Footer però la tabella intera deve essere all'ineata a destra dentro il DIV Footer
Con l'HTML avevo fatto align="right" nel TAB Table
Con i CSS come dovrei fare?

<table cellpadding="0" cellspacing="0" style="border:none;background-color:red;float:left ;width:70%;">

o

<table cellpadding="0" cellspacing="0" style="border:none;background-color:red; position: relative; top: 0;  right: 0;  width:70%;">

o magari

<table cellpadding="0" cellspacing="0" style="border:none;background-color:red; position: relative; top: 0;  left: 30%;  width:70%;">

Poi stasera vedo se va bene a FF
Comunque grazie mille

[simotenax]

ecco qua con la modifica:

<div id="titolo">titolo</div>
<div id="contenitore">contenitore</div>
<div id="navbar" style="float:left;width:30%;border:1px solid blue;">navbar</div>
<div id="contenuto" style="float:left;width:69%;border:1px solid red;">contenuto</div>
<div id="clearer">clearer</div>
<div id="footer" style="border:1px solid black;">footer
    <table cellpadding="0" cellspacing="0" style="float:right;border:none;background-color:red;text-align:center;width:70%;">
        <tr><td>asd</td><td>asd</td></tr>
        <tr><td>asd</td><td>asd</td></tr>
        <tr><td>asd</td><td>asd</td></tr>
    </table>
<div style="clear:right;"></div>
</div> 

funziona benissimo in FF

[Mich_]

Personalmente non apprezzo la mescolanza di contenuto e formattazione.
Per le prove puoi mettere il CSS con il tag <style> nella head: in questo modo resta comunque fuori dal codice, ma sempre nello stesso file.

Comunque cellpadding e cellspacing sono anch'essi attributi deprecati, e possono dare conflitti con i CSS.

Ecco un esempio:

 HTML:
<div id="footer">
  ... altri elementi ...
  <table> ... </table>
</div>

CSS:
#footer {
  width: ...;    /* necessario, altrimenti il float interno ha poco significato */
  border: 1px solid black;
}
#footer table {
  border: none;
  background-color: red;
  float: right;
  width:70%;
}
#footer table tr,
#footer table td {
  padding: 0;
  margin: 0;
  border: 0;
}

I posizionamenti sono da evitare, per lo meno finche` non hai un po' di esperienza: di solito creano sovrapposizioni di blocchi (specie con combinazioni browser/SO/monitor diverse da quelle di test).

[Leovre]

Ok perfetto con la tabella float:left funziona e per ascoltare Mich_ l'ho messo nel foglio di stile esterno come

#Footer table {float:right;}

inoltre ho aggiunto overflow:hidden; nello stile del DIV footer
così non mi da problemi con il float anche senza inserire un elemeto con clear:right

ultima cosa: se la tabella dovesse essere centrata nel DIV footer come dovrei fare?
inserirla in un altro DIV e impostarlo con margin: 0 auto
o c'è un modo più snello?

[Mich_]

Non credo serva un altro div intermedio.

E tieni presente che un oggetto float non si puo` centrare. O e` flottato o e` centrato.

Per centrare in orizzonatale un oggetto di tipo blocco si usa il margin: 0 auto; (con eventuale aggiunta del text-align: center; nel contenitore per centrare anche in IE6).
Pero` il contenitore deve avere la width definita, altrimenti i margini automatici non funzionano.


L'overflow serve per altri motivi, ma non per evitare il clear. Il clear si puo` inserire anche in un oggetto virtuale :after come suggerito in [Pillola] FabClearing, un metodo crossbrowser alternativo per il clearing dei float.