[CSS] Anomalie con FF

Sera,
ho dei problemi di visualizzazione con Mozilla Firefox (ma chi l'ha inventato!!! da solo problemi ).
A questo link si possono notare le differenti visualizzazioni tra IE E FF.

Elenco tutto ciò che è anomalo in FF.

La posizione, data con il css tramite il tag "absolute" (top:0px; left:0px;), del banner e della cornice, è (in FF) si distanzia dal bordo superiore della colonna della tabella.. in IE tutto apposto [e 1]

Lo sfondo arancio del corpo centrale della pagina dovrebbe, come in IE, occupare tutta l'area in verticale (non so se mi spiego bene). Ma in FF il colore di sfondo termina dove termina la fine del "div" centrale. in IE tutto apposto [e 2]

Nel menù di navigazione, a sinistra, sono presenti dei link a cui ho dato un certo sfondo trasperente ed una certa larghezza (100%, ma anche in px l'effetto con FF è lo stesso). In IE lo sfondo dei link va oltre la lunghezza del testo ma, in FF, qualunque larghezza imposti, lo sfondo si ferma sempre all'ultima lettera [e 3]

grazie è, delle risposte o anche della sola lettura del topic!

[funcool]

La posizione, data con il css tramite il tag "absolute" (top:0px; left:0px;), del banner e della cornice, è (in FF) si distanzia dal bordo superiore della colonna della tabella.. in IE tutto apposto [e 1]

Prova ad azzerare i margini e il padding.

Lo sfondo arancio del corpo centrale della pagina dovrebbe, come in IE, occupare tutta l'area in verticale (non so se mi spiego bene). Ma in FF il colore di sfondo termina dove termina la fine del "div" centrale. in IE tutto apposto [e 2]

Penso che dovresti dare un'altezza minima a quel div perché non dovrebbe tener conto del menù laterale se è stato posizionato tramite float o affini.

Nel menù di navigazione, a sinistra, sono presenti dei link a cui ho dato un certo sfondo trasperente ed una certa larghezza (100%, ma anche in px l'effetto con FF è lo stesso). In IE lo sfondo dei link va oltre la lunghezza del testo ma, in FF, qualunque larghezza imposti, lo sfondo si ferma sempre all'ultima lettera [e 3]

Né con Firefox 2.0.0.11, né con Internet Explorer 7 vedo lo sfondo dei link del menù a sinistra.

Come altezza minima intendi un qualsiasi valore in pixel, oppure con un tag che dice quale deve essere l'altezza minima? comunque lo scheletro del layout è questo

<div align="center">
  <div id="corpo"> <!-- larghezza in px e sfondo arancio -->
    <div id="navigazione"></div> <!-- float left -->
    <div id="extra"></div> <!-- float right -->
    <div id="centro"></div>
    <div id="footer"></div>
  </div>
</div>

Con il terzo problema, hai cliccato sulle imamgini "+" a sinistra di ogni voce? Si aprono dei sotto menù
-----
Ho azzerato margine e padding di ogni "div", ma con FF c'è sempre lo stesso problema. Il posizionamento assoluto non viene fatto rispetto ai bordi della pagina, ma rispetto ad un div contenitore settato con absolute

[funcool]

Come altezza minima intendi un qualsiasi valore in pixel, oppure con un tag che dice quale deve essere l'altezza minima?

Intendo min-height del CSS e i vari work around per farlo funzionare con le versione di Internet Explorer precedenti alla 7.

Con il terzo problema, hai cliccato sulle imamgini "+" a sinistra di ogni voce? Si aprono dei sotto menù

Prova a dare alla classe mensub una larghezza di 100%.

Ho azzerato margine e padding di ogni "div", ma con FF c'è sempre lo stesso problema. Il posizionamento assoluto non viene fatto rispetto ai bordi della pagina, ma rispetto ad un div contenitore settato con absolute

E' logico che sia così. Se vuoi fare il posizionamento assoluto rispetto alla pagina, lo devi mettere all'esterno di qualsiasi altro elemento.

E' logico che sia così. Se vuoi fare il posizionamento assoluto rispetto alla pagina, lo devi mettere all'esterno di qualsiasi altro elemento.

Ho fatto il posizionamento assoluto all'interno di un div contenitore. Comunque ho risolto questo problema, perché io avevo una cosa del genere

ecc<td>
<div style="position: absolute;">
<p style="position: absolute; top: 0px; left: 0px;"></p>
</div>
</td>ecc

e mi sono accorto che mettendo al posto di "p" il "div", questo si attaccava ai bordi del div in FF come in IE.

Prova a dare alla classe mensub una larghezza di 100%.

già fatto..

a.mensub:link{
  text-decoration:none;
  font-size: 13px;
  font-family: "Highligh LET",constantia;
  width: 100%;
  padding-left: 3px;
  background-color: #ff6600;
  color: #663300;
}
a.mensub:visited{
  text-decoration:none;
  font-size: 13px;
  font-family: "Highligh LET",constantia;
  width: 100%;
  padding-left: 3px;
  background-color: #ff6600;
  color: #663300;
}
a.mensub:hover{
  text-decoration: none;
  font-size: 13px;
  font-family: "Highligh LET",constantia;
  width: 100%;
  padding-left: 5px;
  background-color: #cc6633;
  color: #ffffff;
}

forse ho sbagliato a scrivere qualcosa e fa conflitto? tipo font-family: "Highligh LET",constantia;

Intendo min-height del CSS e i vari work around per farlo funzionare con le versione di Internet Explorer precedenti alla 7.

Io so che min-height funziona solo con FF...

Edit: ho provato con min-height ed height.. ma non ho l'effetto voluto. praticamente il div che contiene il div di navigazione, del centro e dell'extra dovrebbe allungarsi all'allungarsi di uno di questi, ma non succede. o meglio, succede solo con IE, mentre in FF no

[gnammo]

Sera,
ho dei problemi di visualizzazione con Mozilla Firefox (ma chi l'ha inventato!!! da solo problemi ).

Forse è il contario, visto che IE fa tutto di testa sua fregandosene degli standard web :)

Non ho capito perchè hai utilizzato un position absolute quando per impaginare hai utilizzato le tabelle :)
Io ti consiglio di rivedere un po' il codice e creare un layout utilizzando i tag div invece di una tabella, riuscirai a risolvere gran parte dei problemi, ma soprattutto c'è una migliore leggibilità nel codice stesso.

il layout è fatto in table less. per impaginare meglio altri minicontenuti, come i "+" vicino ai menù o la testata divisa in logo e banner, ho usato le tabelle.

Comunque sono riuscito a risolvere tutti i problemi, tranne lo sfondo dei link ke in IE vanno bene, mentre in FF lo sfondo si ferma all'ultima parola. Almeno così era prima, ora ho provato con gli Ul e li, e lo sfondo si ferma all'ultima lettera della parola più lungua.

PS Le modifiche al sito le devo ancora caricare..

edit: il posizionamento assoluto l'ho fatto solo per poter sovrapporre sul banner la cornice. Il posizionamento non viene fatto rispetto ai bordi della pagina, ma rispetto ad un div contenuto in una tabella. infatti ho messo left: 0px e top: 0px.. se non fosse stato rispetto a quel div si sarebbe posizionato nell'angolo superiore sinistro della pagina