diversa visualizzazione Chrome e Firefox

diversa visualizzazione Chrome e Firefox [Postato il 30/03/2013 15:59:48 nel forum Programmazione]

Salve a tutti
Premetto di aver fatto una ricerca nel forum ma non ho trovato nessuna soluzione al mio problema. Inoltre, ho anche cercato su internet ma tutte le soluzioni che ho trovato non funzionano.
Ho creato da zero la homepage di una land che sto creando. Se la visualizzo con Chrome non ci son problemi, si vede esattamente come deve essere. Se invece la visualizzo con Firefox mi ritrovo l'intero contenuto del body non più centrato al centro della pagina ma tutto spostato in alto, a contatto con il bordo superiore della pagina. Inoltre, le immagini sono tutte tagliate e tutti i tasti (entra, recupero password, etc) sono in posizioni errate. Usando firebug ho notato che tutto il body è ridotto ad un terzo della grandezza della pagina, e non capisco il perché.
Qualcuno può aiutarmi?

Magic: The Gathering Arena
Magic: The Gathering Arena è un autentico gioco di Magic scaricabile gratuitamente e riprodotto in versione digitale per giocatori e fan!

Risposte alla discussione

Pagine: 1

breaker

30/03/2013 17:11:20

Sicuramente non hai sviluppato l'html della home pensando ai diversi browser.
Spesso capita usando valign o altri selettori mal supportati. Ti consiglio di scriverlo tramite div, una struttura semplice e ben formattata in modo che sia compatibile con ogni browser.
Se ci fornisci un link magari possiamo consigliarti su cosa modificare per farlo visualizzare in firefox. A volte basta un ulteriore "istruzione", comunque quello più ostico da rendere compatibile è ie :D

"Release your mind´s eye and we make your dreams come true"

astro991

30/03/2013 17:51:16

Io non ho usato ne valign ne altre cose del genere. Ho strutturato la home dividendola in 3 righe e 3 colonne utilizzando una tabella. Usando i div non so come si faccia. Tempo fa ne feci una sempre con le tabelle e non c'erano problemi ne con Chrome ne con Firefox. Questa volta, usando lo stesso codice, mi fa questo "scherzetto".

p.s. perché, c'è qualcuno che usa ancora IE?

Travian
Travian è il più famoso browsergames al mondo. Come giocatore di Travian, costruirai il tuo impero, recluterai un potente esercito!

breaker

30/03/2013 17:57:49

Statistica dei browser più usati in italia
Chrome 34,46%
IE 33,73%
Firefox 23,8%
Safari 6,46%.

Chiusa questa parentesi la struttura a div è molto semplice

<div> //Inizio tabella
<div> //Riga 1
<div></div> //Cella
<div></div> //Cella
<div></div> //Cella
</div> //Fine riga 1
<div> //Riga 2
<div></div> //Cella
<div></div> //Cella
<div></div> //Cella
</div> //Fine riga 2
<div> //Riga 3
<div></div> //Cella
<div></div> //Cella
<div></div> //Cella
</div> //Fine riga 3
</div> //Fine tabella

Per allineare le celle basta usare il css: position: relative; float:left;

"Release your mind´s eye and we make your dreams come true"

astro991

30/03/2013 18:23:03

Usando il codice che mi hai dato non riesco ad inserire l'immagine di sfondo nelle varie righe..mi serve che nella colonna di sinistra vi sia una determinata immagine di sfondo, in quella centrale un'altra, e in quella di destra un'altra ancora...
ho provato a fare così:

<div>//Riga 2
<div id="nomeid1">scritta scritta scritta</div>//Cella
<div id="nomeid2">prova prova prova</div>//Cella
<div></div>//Cella
</div>//Fine riga 2</div>

e così il css:

#nomeid1{
background: url("indirizzo immagine") no-repeat;
}
#nomeid2{
background: url("indirizzo immagine") no-repeat;
}

Ma non mi compare nulla. Se provo a inserirci del testo, si mi compaiono sia la scritta sia un pezzettino dell'immagine di sfondo, ma l'immagine è sopra la scritta. Inoltre, le celle invece di essere una accanto all'altra sono messe una sotto l'altra, come se fossero righe e non colonne.

Cuisine Royale
Un Battle Royale unico, nato come pesce d'aprile, in cui combattere contro altri 30 giocatori armati di utensili da cucina!

Modificato il 30/03/2013 18:23:29 da astro991

breaker

30/03/2013 19:03:50

Se l'immagine è in verticale allora invece di fare "righe" fai colonne
ovvero lo style="position:relative; float:left;" invece di metterlo nelle celle mettilo nei div delle righe così affiancherà le righe e le celle saranno una sotto l'altra. Specifichi l'immagine di sfondo nel div riga ed avrai il risultato sperato

"Release your mind´s eye and we make your dreams come true"

astro991

30/03/2013 21:24:42

Grazie ad entrambi per aver risposto.
nicodem, nel copia e incolla mi sa che ti sei dimenticato di sostituire qualcosa (ci sono tre "barrasinistra" xD), ma leggendo il codice non è così difficile capire quale codice corrisponde a quale barra.
Funziona tutto come volevo che fosse (per ora xD). Grazie mille.