Header che non si vede su IE

[sauron_x]

Ciao a tutti! Stavo cercando di fare un sito ma ho un problema.

Nel senso su Firefox tutto ok, è su IE che non va.

In pratica, su IE non si vede nulla, e il risultato dovrebbe essere che si dovrebbe vedere l'header centrato. Ho messo un'immagine per prova ma su IE pagina bianca.

Non posso mostrarvi la pagina perchè ci sto lavorando in locale al momento, cmq vi posto la sintassi. Penso che dipenda dal tag img url che non viene correttamente letto da IE.

Prima che me lo chiediate ho già pulito la cache del browser ma nada

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" xml:lang="en" lang="en">

<head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
	<meta name="author" content="FreeUser" />
    <link href="style.css" rel="stylesheet" type="text/css" />

	<title>Rainbow</title>
</head>

<body>

    <div id="container">
    <div id="header"></div>
    <div id="menu"></div>
    <div id="col1"></div>
    <div id="corpo"></div>
    <div id="footer"></div>
    </div>

</body>
</html>

CSS

body {
    
    
    
}


#container {
    
    background: white;
    width: 900px;
    margin: 0 auto;
    
}

#header {
    
    height: 150px;
    background-image: url('img/header.jpg');
    
}

Qualche idea?

Grazie a tutti

[ESSE-EFFE]

Originariamente inviato da sauron_x

Penso che dipenda dal tag img url che non viene correttamente letto da IE.

Dovresti dire come è strutturata la directory su cui stai lavorando perchè probabilmente IE non trova il file.

[sauron_x]

Originariamente inviato da ESSE-EFFE

Dovresti dire come è strutturata la directory su cui stai lavorando perchè probabilmente IE non trova il file.

Dunque, io ho una cartella, dove dentro ci sono i due file .htm e .css; Sempre dentro c'è anche una cartella img con dentro l'immagine del header

[ESSE-EFFE]

Originariamente inviato da sauron_x

Dunque, io ho una cartella, dove dentro ci sono i due file .htm e .css; Sempre dentro c'è anche una cartella img con dentro l'immagine del header

Strano allora perchè a me così funziona, nel senso che l'immagine compare. Che versione di IE ti dà problemi? Potrebbe essere un'immagine particolare? Puoi postarla?

[sauron_x]

Originariamente inviato da ESSE-EFFE

Strano allora perchè a me così funziona, nel senso che l'immagine compare. Che versione di IE ti dà problemi? Potrebbe essere un'immagine particolare? Puoi postarla?

Allora, ho IE 8. Con FF funziona, vedo l'immagine, con IE 8 no. Con altri browser non ho provato.

L'immagine è questa:



Uploaded with ImageShack.us

imageshack mi ha convertito l'immagine in png anche se l'originale sarebbe in jpg.

Potrebbe essere questo il problema? Strano però che su FF va.

Cmq provo, onestamente non ci ho pensato che potrebbe essere l'immagine a non essere correttamente interpretata.

[ESSE-EFFE]

Originariamente inviato da sauron_x

non ci ho pensato che potrebbe essere l'immagine a non essere correttamente interpretata.

Direi anch'io che è un'ipotesi remota. Al momento non riesco a provare con IE8. Con IE9 non ci sono problemi. Hai provato ad inserire un po' di testo in quel div header? Si vede correttamente? Fai qualche prova del genere per capire di che problema si tratta.

[Kralizek]

prova a mettere del contenuto in quel div.

[sauron_x]

Il contenuto scritto si vede, è l'immagine che non si vede.

Cmq mettendo un'altra immagine jpg si vede.

Grazie mille per l'aiuto

[sauron_x]

Ciao, avrei un altro problemino.

Precisamente con il menu, non riesco in nessun modo a dare nessun tipo di padding sul lato destro. (O meglio più di così non riesco)

Se notate nell'immagine a destra del menu c'è un rientro che non riesco a togliere.



Uploaded with ImageShack.us

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" xml:lang="en" lang="en">

<head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
	<meta name="author" content="FreeUser" />
    <link href="style.css" rel="stylesheet" type="text/css" />

	<title>Rainbow</title>
</head>

<body>

    <div id="container">
    <div id="header"></div>
    <div id="menu">
    <ul>
    <li><a href="http://">Home</a></li>
    <li><a href="http://">News</a></li>
    <li><a href="http://">Forum</a></li>
    <li><a href="http://">Chat</a></li>
    <li><a href="http://">Download</a></li>
    <li><a href="http://">Area Riservata</a></li>
    </ul>
    </div>
    <div id="col1"></div>
    <div id="corpo"></div>
    <div id="footer"></div>
    </div>

</body>
</html>

CSS

* {
    
    margin: 0;
    padding: 0;
    
}



body {
    
    
    
}


#container {
    
    background: white;
    width: 900px;
    margin: 0 auto;
    
}

#header {
    
    height: 190px;
    background-image: url('img/header.jpg');
    
}

#menu {
    
    height: 50px;
    list-style: none;
    background-color: #3E3E3E;
    
    
}

#menu ul li{
    
    list-style: none;
    display: inline;
    
    
}

#menu a {
    
    font-size: 27px;
    text-decoration: none;
    padding-left: 35px;
    padding-right: 18px;
    padding-bottom: 7px;
    color: black;
    font-weight: bold;
    line-height: 1.5em;
    border: 1px solid gray;
    float: left;
    text-align: center;    
}

#menu a:hover {
    
    background-color: red;
    color: white;
    border: 1px solid maroon;
}

Inoltre come faccio a centrare meglio le scritte?

Se metto o anche se tolgo il text align non noto cambiamenti, il testo è sempre allineato allo stesso modo