Firefox vs explorer: background-position

**Rainhart** · 15-11-2006, 01:47

Salve, ho un problemino di compatibilità tra i 2 browser di cui sopra.
Immagine di sfondo da centrare con CSS e ho fatto come segue:

body{
background-color:#ffffff;
font-family: Arial,sans-serif;
color: #ffffff;
line-height: 1.166;
margin: 0px;
padding: 0px;
background:url(images/prova.jpg);
background-repeat: no-repeat;
background-position:center;
}

Con Explorer tutto perfetto, ma Firefox mi centra si l'immagine, ma solo metà, come se la parte superiore dell'immagine stessa uscisse dalla parte superiore della schermata... strano ma vero, qualcuno sa darmi una delucidazione pls??
Grazie 1000

**Mich_** · 15-11-2006, 09:50

A me risulta che non esiste il valore center per il background-position.

Vedi ad esempio qui la lista dei valori possibili.

**ricman** · 15-11-2006, 10:27

Originariamente inviato da Mich_
A me risulta che non esiste il valore center per il background-position.

Non esiste da solo... giusto? ...Ma center center esiste... come esiste 50% 50% che è la stessa cosa.

**Rainhart** · 15-11-2006, 10:35

Il valore center è ammesso anche perchè utilizzanto un editor (esempio Dreamweaver), questo valore è presentato come possibile abbinamento del background-position. Tant'è vero che in Explorer funziona tutto perfettamente, è in Firefox che ho trovato problemi perchè, come descritto all'inizio "mangia" la metà alta dell'immagine usata come sfondo.

Fare center center nn fa alcuna differenza.

Help!!!!!!

**Mich_** · 15-11-2006, 10:50

Il valore center è ammesso anche perchè utilizzanto un editor (esempio Dreamweaver)

Classico errore che viene fatto dagli editor. Come questo ne vengono introdotti molti.
E` bene non fidarsi del codice generato automaticamente.
E il fatto che funzioni in IE non e` certo una garanzia ... ce ne sono cose sbagliate che in IE funzionano.

Comunque i validatori validatore HTML e validatore CSS ci sono apposta per trovare gli errori di sintassi.

Ma center center esiste... come esiste 50% 50% che è la stessa cosa

Esatto, con la differenza che nel center center il primo e` il verticale e il secondo l'orizzontale, mentre nel 50% 50% il primo e` orizzontale e il secondo verticale ... (misteri degli standard)

**Rainhart** · 15-11-2006, 10:54

Nella mia ignoranza non conoscevo i validatori

e ti ringrazio, ma non mi sai per caso dire come fare a centrare correttamente l'immagine di sfondo visto che nemmeno con il center center, che dovrebbe a questo punto essere corretto, funziona?

tks di nuovo

**Mich_** · 15-11-2006, 11:08

Non saprei dirti.
Prova con il 50% 50%; magari il center center non viene interpretato da FF.

Pero` non l'avevo ancora sentito, per cui mi puzza di un errore da qualche altra parte (magari un conflitto con formattazione HTML, o un ; mancante in qualche punto, o altre "stupidate" del genere).

**Rainhart** · 15-11-2006, 11:23

Sono ancora all'inizio del sito e visto che lo sfondo nn va a posto, mi sono fermato.
Il codice è ancora all'inizio, se gli dai un'occhiata veloce mi faresti un regalo.
Tra l'altro il colore nero di sfondo non riempie tutto lo schermo come dovrebbe fare normalmente...( l'immagine è + piccola)...boh

-------------HTML-------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Titolo sito</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="is_style.css" type="text/css" />
</head>

<body>

<div id="title">

titolo sito</p>
</div>

<div id="navBar">

menu</p>
</div>

<div id="contenuti">

contenuti e storie</p>
</div>

</body>

</html>

------------------------ CSS---------------------

body{

background-color: #000000;
font-family: Arial,sans-serif;
color: #ffffff;
line-height: 1.166;
margin: 0px;
padding: 0px;
background: url(images/prova.jpg);
background-repeat: no-repeat;
background-position: center;
}

/***************************/
/* Layout principale del sito */
/***************************/

#title{
padding: 10px 0px 10px 10px;
border-bottom: 1px solid #cccccc;
width: 70%;
margin-top:50px;
margin-left:150px;
}

#navBar{
float: left;
width: 180px;
margin-left: 50px;
padding: 0px;
background-color:#99CC00;
border-right: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
}

#contenuti{
float:left;
width: 50%;
margin-left: 20px;
border-left: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
padding-right: 10px;
}

**Mich_** · 15-11-2006, 11:56

Anzitutto ricorda, quando inserisci del codice, di usarte i tag appositi (il bottone # oppure PHP sopra il form di inserimento), altrimenti diventa difficile capire.

Per il colore di sfondo, prova ad inserire, nel CSS:

codice:

html, body {
width: 100%;
}

Poi noto un grave errore semantico: fai un titolo con i tag <div> e

, e non usi il <h1>: questo vuol dire che chi non ha un browser grafico, non capisce il titolo.

Inoltre mi pare che stringere tutto il contenuto nel 50% dello spazio e` molto limitante, specie per chi naviga in una finestra del monitor, o chi ha uno schermo con bassa risoluzione (ad esempio 800x600).

Riguardo al background-position, ne abbiamo gia` discusso, e non commento il codice postato.

**Rainhart** · 15-11-2006, 12:15

Non ho capito cosa intendi con: "<div> e

, e non usi il <h1>:"... sry
Mentre

codice:

html, body {
width: 100%;
}

non mi permette comunque di riempire tutto lo schermo con un colore di sfondo.

Ho utilizzato i validatori ed è tutto ok sial x html che x css.

A questo punto ringrazio e nn insisto oltre, torno sui libri e vedo di capire per quale cavolo di motivo persistono questi 2 errori

e, a meno che qualcuno di voi abbia un colpo di genio, ci risentiamo alla prossima occasione.

Sempre un ottimo forum questo!!!
ciao

Discussione: Firefox vs explorer: background-position

Strumenti discussione

Ricerca discussione

Visualizza

Firefox vs explorer

Permessi di invio