problemi Padding in IE, rendering diverso con FF

**Teskio** · 22-05-2008, 17:36

Sto cercando di creare una versione HTML+CSS di un sito che ho fatto in Flash ma ho problemi di rendering su IE7 in particolare per quanto riguarda il padding. La cosa strana è tuttavia che il problema non è sistematico, cioè non si applica a tutti i padding ma solo ad alcuni...

Allego a fondo pagina le schermate dellla versione Flash, il rendering in FF e in IE7 della pagina in questione... il problema riguarda il div "box", che è il box con bordo bianco, il quale ha un padding-top di 14px che FF legge in un modo e IE7 in un altro. L'altro riguarda gli span che contengono i bottoni in basso che hanno tutti un padding-left e un letter-spacing in modo da ricreare la disposizione spaziale dei bottoni in Flash. Il padding-left non è letto allo stesso modo di FF per nessuno degli span da IE7, cosa che si nota in particolare per l'ultimo, "home_bt", che risulta completamente deposizionato. Il problema sembra essere l'unità di misura che non corrisponde nei due browser, ho pensato potesse essere dovuto al letter-spacing che in qualche modo "scalava" i px ma nel div="box" non c'è nessun letter-spacing. Inoltre il div subito sopra "box", quello che contiente la scritta "NEWS" ha un padding-top e un padding-left per posizionare la scritta che viene letto in modo uguale dai due browser (come tutti gli altri padding della pagina)
Ho provato a sostituire nel secondo caso il padding con un margin, ma è uguale.

Aiuto...

Questi i pezzi di css relativi:

#box {
border: 1px solid white;
width: 429px;
height: 357px;
margin-left: 53px;
padding-top: 14px;
}

#home_bt{
font-size:17px;
padding-left: 98px;
letter-spacing: 6px;
}

Queste le pagine

VERSIONE ORIGINALE IN FLASH

HTML+CSS CON FIREFOX

HTML+CSS CON IE7

**gengix** · 22-05-2008, 17:42

Hai azzerato i margini e i padding nell'elemento body?

codice:

body {
margin:0;
padding:0;
}

oppure

codice:

html, body {
margin:0;
padding:0;
}

ultima soluzione più drastica

codice:

* {
margin:0;
padding:0;
}

**Teskio** · 22-05-2008, 18:02

Si sono azzerati

body {
...
margin: 0px;
padding: 0px;
...
}

**gengix** · 22-05-2008, 20:00

Prova la terza soluzione che ti ho elencato.
Diversamente posta più codice o un link. Così diventa difficoltoso, si può solo ipotizzare.

**Teskio** · 22-05-2008, 20:08

Provato anche con questa soluzione e nisba...

ecco il codice:

file HTML:

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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<title>News</title>
<link rel="stylesheet" title="main" href="news.css" type="text/css" />
</head>

<body>
<div id="top"></div>
<div id="container">
	<div id="pager"> news </div>
	<div id="box">
		<div class="new">
			<span class="date">01/05/2008 -</span>
			<span class="title">Primo disco</span>
			<div class="content">
			...
			</div>
		</div>
	</div>
	<div id="footer">
		<span id="music_bt">musica</span>
		<span id="news_bt">news</span>
		<span id="band_bt">band</span>
		<span id="foto_bt">foto</span>
		<span id="myspace_bt">myspace</span>
		<span id="contatti_bt">contatti</span>
		<span id="home_bt">home</span>
	</div>
</div>
<div id="bottom"></div>










</body>
</html>

CSS specifico del file:

codice:

@import url(main.css);

/*label della pagina (news)*/
#pager {
	padding-top: 59px;
	padding-left: 224px;
	font-size: 24px;
	text-align: left;
	letter-spacing: 7px;
}
/*box delle news*/
#box {
	border: 1px solid white;
	width: 429px;
	height: 357px;
	margin-left: 53px;
	padding-top: 14px;
}

.new{
text-align: left;
margin: 19px 9px 0px 9px;

}

.date{
letter-spacing: 1px;
}

.title{
letter-spacing: 1px;
}

.content{
padding-top: 19px;
letter-spacing: 0.5px;
line-height: 18px;

}

CSS comune a tutti i file:

codice:

/* LAYOUT COMUNE */
body {
	font-family: Serif, Times, Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	margin: 0px;
	padding: 0px;
	text-align: left;
	color: #CCCCCC;
	background-color: black;
}
/*linea superiore del contenitore*/
#top {
	background-image: url(top.gif);
	width: 850px;
	height: 12px;
	margin: 0px auto;
	margin-top: 15px; 
}
/*linea inferiore del contenitore*/
#bottom{
	background-image: url(down.gif);
	width: 850px;
	height: 12px;
	margin: 0px auto;
}
/*contenitore*/
#container {
	background-image: url(background.gif);
	background-repeat: repeat-y;
	width: 850px;
	height: 514px;
	margin: 0px auto;
}
/*menù di navigazione inferiore:*/
#footer {
	background-image: url(footer.gif);
	background-repeat: no-repeat;
	width: 810px;
	height: 36px;
	margin: 21px auto;
	padding-top: 15px;
	text-align: left;
	font-size: 16px;
}
/*effetti speciali sui link per il menù inferiore*/
a.btn:link {
	color: #CCCCCC;
	text-decoration: none;
}
a.btn:hover {
	color: #990000;
	text-decoration: none;
	background-color: #FFFFFF;
}
a.btn:visited {
	color: #CCCCCC;
	text-decoration: none;
}
a.btn2:link {
	color: #000000;
	text-decoration: none;
}
a.btn2:hover {
	color: #000000;
	text-decoration: none;
}
a.btn2:visited {
	color: #000000;
	text-decoration: none;
}
/*posizione e spaziature bottoni*/
#music_bt{
	padding-left: 20px;
	letter-spacing: 7px;
}
#news_bt{
	padding-left: 15.3px;
	letter-spacing: 13px;
}
#band_bt{
	padding-left: 15px;
	letter-spacing: 14px;
}
#foto_bt{
	padding-left: 15px;
	letter-spacing: 15px;
}
#myspace_bt{
	padding-left: 16px;
	letter-spacing: 4px;
}
#contatti_bt{
	padding-left: 17px;
	letter-spacing: 5px;
}
#home_bt{
	font-size: 17px;
	padding-left: 98px;
	letter-spacing: 6px;
}

**gengix** · 22-05-2008, 20:48

Domani ci guardo bene

**Teskio** · 22-05-2008, 21:12

Grazie mille gengix
rapido e disponibile, ce ne fossero come te...

**gengix** · 23-05-2008, 09:03

Nel tuo caso il div#box ha un paddding-top di 14px, mentre il figlio .new ha un margine superiore di 19px. Quest'ultimo dovrebbe distanziarsi dal bordo superiore di #box di 33px. Firefox in questo caso interpreta bene questa distanza, IE no.

Attenzione perchè nel tuo caso dando un padding-top di 14px la tua altezza già dichiarata a 357px aumenta del valore del padding (questo succede nei browser che interpretano correttamente il box model).

Cmq a mio parere puoi risolvere eliminando il padding al div#box e sommando il valore del padding al margine superiore del div.new. Per sicurezza azzera anche i margini e i padding con il selettore universale all'inizio del foglio di stile.

es:

codice:

* {
    margin:0;
    padding:0;
}
...
....
#box {
    border: 1px solid white;
    width: 429px;
    height: 357px;
    margin-left: 53px;
}
.new {
    text-align: left;
    margin:33px 9px 0 9px;
}
...

Un altro consiglio è sulla semantica del codice. Il tuo titolo (.title) sarebbe più corretto che fosse un elemento h invece che uno span e il contenuto successivo in caso di blocco di testo lo racchiuderei dentro un paragrafo, evitando di creare un altro div ("content").
Cmq è una mia opinione =).
Fammi sapere

**Teskio** · 23-05-2008, 09:49

Mmmmm, avevo pensato anch'io a sommare il padding del "box" al margin del "new" ma in questo modo, poichè il "new" è un div che si ripete (colpa mia, nel codice ne ho messo solo uno per non inondare il post di righe di codice... lo vedi però nelle schermate) ci sarebbe una spaziatura tra due consecutivi "new" di 33px mentre deve essere di 19px. Potrei risolvere creando un "new_top" con margine di 33px e dei successivi "new" con margine di 19px. Finchè inserisco le new manualmente non è un grosso problema, in realtà la pagina diventerà un XHTML con prelevamento tramite un ciclo delle news da un XML, utilizzare un unico div="new" semplificava tutto, ma certo con un po' di lavoro si può sempre adattare a questa nuova soluzione.
Strano però che si debba trovare un workaround, pensavo che con l'ultima versione dei browser i CSS fossero universalmente letti.

Riguardo al motivo di questo contenzioso tra i due browser però non credo di aver compreso in pieno. L'altezza del div="box" è la stessa nei due browser, ossia 357px oppure 357+14px se aggiungono il padding interpretando correttamente il box model. Visto che abbiamo appurato che IE7 non valuta il padding questo vuol dire che per lui il "box" è di 357 e quindi tale sarà anche per FF... Però, al di là dell'altezza del "box" cos'è che non fa leggere il padding a IE? Soprattutto non capisco perchè nel div immediatamente prima, "pager", valuta bene il padding e posiziona la scritta "NEWS" come lo fa FF...

Cmq questo problema può essere risolto con un po' di ingegno, ma quello che mi preoccupa di più è quello degli span per il menù in basso. Che devo fare? Levare gli span e usare div con float?

Grazie per il consiglio sulla semantica, è il primo lavoro in cui uso i CSS e mi manca di flessibilità dettata dall'esperienza... e grazie soprattutto per aver perso un po' di tempo a controllare il mio codice

**gengix** · 23-05-2008, 10:31

IE7 lo interpreta correttamente il box model, in questo caso deve esserci qualcosa a monte, purtroppo ultimamente non ho tanto tempo per guardarci. In questo non è un problema del box model, ti ho fatto quell'appunto semplicemente per metterti in guardia, perchè il box avrebbe aumentato le dimensioni.

In questo caso firefox il margin-top lo fa partire dopo i 14px di padding, mentre IE prende correttamente il padding (se togli i margini te ne accorgi) ma fa partire il margin-top dall'inizio del bordo di #box, di conseguenza distanzia di soli 5px .new dalla posizione in cui si trova con il padding (19px - 14px).

Prova guardare in giro se trovi qualcosa in merito a questo comportamento.

Discussione: problemi Padding in IE, rendering diverso con FF

Strumenti discussione

Ricerca discussione

Visualizza

problemi Padding in IE, rendering diverso con FF

Permessi di invio