Problema allineamento su IE

**TechBek** · 05-04-2011, 15:54

Buongiorno a tutti

Sono nuovo del forum e anche dei CSS!! In questi giorni mi sto leggendo tutte le guide sul sito e sto cercando di imparare qualcosa facendo degli esperimenti...ma c'è qualcosa che non mi quadra

Ho creato una pagina html così

codice:

<html>
<head>
<title>Test 2</title>
<link rel="stylesheet" type="text/css" href="stile.css">
</head>

<body>

<div id="container">

<div id="header"></div>

<div id="col-sx"></div>

<div id="center"></div>

<div id="footer"></div>

</div>

</body>
</html>

E associato il seguente CSS

codice:

body {
	background-color: white; 
	background-image: url(image.jpg);
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: 50% 50%;
	
}

#container {
	margin: 30px auto auto auto;
	position: relative;
	width: 960px;
	text-align: center;
}

#header {
	position: absolute;
	height: 150px;
	width: 960px;
	background-color: black;
	opacity: .7;
	filter: alpha(opacity=70);
	text-align: left;
	color: white;
}

#footer {
	position: absolute;
	top: 770px;
	height: 150px;
	width: 960px;
	background-color: black;
	opacity: .7;
	filter: alpha(opacity=70);
	text-align: center;
}

#col-sx {
	position: absolute;
	top: 160px;
	background-color: black;
	height: 600px;
	width: 200px;
	opacity: .7;
	filter: alpha(opacity=70);
}

#center {
	position: relative;
	top: 160px;
	left: 210px;
	background-color: black;
	height: 600px;
	width: 750px;
	opacity: .7;
	filter: alpha(opacity=70);
}

Teoricamente gli elementi header, col-sx, center e footer sono all'interno di container e quindi dovrebbero essere tutti centrati....ma guardate cosa succede tra chrome e IE

Sono 2 ore che ci sbatto la testa e non riesco a capire dove stia il problema!!

**Prill** · 05-04-2011, 16:55

Ciao TechBek, benvenuto.
Prova così:

codice:

<style type="text/css">
body {
	background-color: white; 
	background-image: url(image.jpg);
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: 50% 50%;
	
}

#container {
	margin: 30px auto;
	position: relative;
	width: 960px;
	text-align: center;
}

#header {
	position: absolute;
	width: 960px;
	height: 150px;
	top:0;
	left:0;
	background-color: black;
	opacity: .7;
	text-align: left;
	color: white;
}

#footer {
	position: absolute;
	top: 770px;
	left:0;
	width: 960px;
	height: 150px;
	background-color: black;
	opacity: .7;
	text-align: center;
}

#col-sx {
	position: absolute;
	top: 160px;
        left:0;
	background-color: black;
	height: 600px;
	width: 200px;
	opacity: .7;

}

#center {
	position: absolute;
	top: 160px;
	left: 210px;
	background-color: black;
	height: 600px;
	width: 750px;
	opacity: .7;

}
</style> 
<!--[if lte IE 8]>
<style type="text/css">
#header, #col-sx, #center, #footer {
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
	filter: alpha(opacity=70);
}
</style>
<![endif]-->

ho dato un posizionamento assoluto anche al div center e aggiunto qualche left.
Le istruzioni per Explorer possono stare in un css a parte che sarà letto solo da lui.
Se l'opacity deve essere su tutti i div, perché non impostarla una sola volta sul container?

**TechBek** · 05-04-2011, 17:09

Ciao,

effettivamente conviene raggrupparlo, comunque poi toglierò tutte le trasparenze, per ora mi servono per capire come si muovono i blocchi e dove sono

ho provato a fare le mofiche che mi hai suggerito, i blocchi restano allineati tra di loro in IE, ma però tutto il complesso non è più centrato nella pagina ma allineato a sinistra

**Prill** · 05-04-2011, 17:18

Immagino che tu non faccia uso di un Doctype che è invece da inserire, aggiungi ad esempio

codice:

<!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">

prima del tag head
(sui vari tipi di doctype puoi poi fare una ricerca per saperne di più)

**TechBek** · 05-04-2011, 17:27

effettivamente mancava, però la situazione rimane uguale.

tutto ok su chrome, su IE tutto allineato a sinistra

**Prill** · 05-04-2011, 17:27

in assenza del doctype infatti il browser si comporta come nelle più vecchie versioni non riconoscendo il margin:auto (non usato da explorer 5.5 in giù, quando per centrare era necessario un text-align:center su body che puoi anche aggiungere)

**Prill** · 05-04-2011, 17:29

però la situazione rimane uguale

hai fatto un aggiorna?

**TechBek** · 05-04-2011, 17:30

Come non detto, avevo fatto una cappellatta assurda inserendo le ultime righe che mi avevi postato

ora sembra funzionare tutto bene

grazie mille!

**TechBek** · 05-04-2011, 18:06

Sto provando proprio ora a visualizzare la stessa pagina dal mio telefono (windows phone 7) e indovina che succede? stessa cosa che succedeva prima su IE sul desktop

può sempre dipendere dal tipo di documento?

**Prill** · 05-04-2011, 18:18

Il doctype va inserito per far funzionare il browser in accordo con gli standard, tutti i browser e non solo explorer, si può poi usare un tipo di documento più rigido che è lo strict o uno più permissivo che è il transitional, questo dipende dalle proprie esigenze.
Non so dirti riguardo al problema che riscontri sul telefono, non so se non sia gradito il doctype (puoi sempre inserire una dtd strict) o i posizionamenti assoluti che in generale sarebbe meglio evitare preferendo elementi flottanti

ma, aggiungo, se la pagina è visualizzata correttamente da Explorer su pc dovrebbe esserlo anche lì.
Conviene aspettare altre risposte

Discussione: Problema allineamento su IE

Strumenti discussione

Ricerca discussione

Visualizza

Problema allineamento su IE

Permessi di invio