altezza header differente in IE

**nextart** · 10-05-2007, 11:00

Ciao a tutti, come da titolo ho quel tipo di problema.
l'header e' impostato a 220px e le immagini hanno altezza 220px.
Posto le immagini cosi' si capisce meglio.

visualizzato su IE compare il bordo bianco sotto l'immagine.

visualizzato su FF viene visto correttamente.

il CSS in merito e' il seguente:

codice:

body {
	background: #464040;
	color: #222;
	font: 60% Trebuchet MS,arial,sans-serif;
	padding: 2% 0;
}
/* structure */
#wrapper {
	background: #fff;
	margin: 0 auto;
	width: 960px;
}
#container {
	background: #FBF9F4;
       /*colore bordo superiore */
        border-top: 0px solid #fff;
	font-size: 1.3em;
	line-height: 1.3em;
	margin: 0 auto;
	width: 960px;
}

/* header */
.title {
	background: #e3060b;
	border-top: 2px solid #f25a15;
}
.title h1 {	
	font: normal 2.2em "Trebuchet MS",sans-serif;
	padding: 10px 0 10px 18px;
}

.header {
	border-top: 2px solid #f25a15;
	height: 220px ;

}

il codice HMTL

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>

<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
<meta name="description" content=""/>
<meta name="keywords" content=""/> 
<meta name="author" content=""/> 
<link rel="stylesheet" type="text/css" href="style.css" media="screen"/>
<link rel="shortcut icon" href="favicon.ico">
<title>NextFanta 2007-08</title>

<script language="JavaScript" type="text/javascript">
var bookmarkurl="http://www.nextart.it/fanta2007"
var bookmarktitle="Next_Fanta 2007-2008"
function addbookmark(){
if (document.all)
window.external.AddFavorite(bookmarkurl,bookmarktitle)
}
//  End -->
</script>

<script language="javascript1.2">
var foto = new Array(8);
foto[0] = "top0.jpg";
foto[1] = "top1.jpg";
foto[2] = "top2.jpg";
foto[3] = "top3.jpg";
foto[4] = "top4.jpg";
foto[5] = "top5.jpg";
foto[6] = "top6.jpg";
foto[7] = "top7.jpg";

var attuale = 0;

function cambia_img()
{ document.getElementById("immagine").src= foto[(attuale++)%8];
timer();
}
function timer()
{ setTimeout("cambia_img();", 4000);
}
</script>

</head>

  <body onLoad="timer()">
   

<div id="wrapper">
<div id="container">

<div class="title">
	
	<h1>NextFanta 2007-2008 </h1>

</div>

<div class="header">
[img]top0.jpg[/img]			
</div>

....
..
.

come potete vedere utilizzo codice javascript per aggiungere il sito ai preferiti cliccando su un'immagine. Tutto ok con IE, mentre in FF non funziona......

grazie a tutti...
ciao......

**Mich_** · 10-05-2007, 11:10

Il box model di IE (quirks mode) e` diverso dai brwoser standard. Vedi qualsiasi tutorial sui CSS alla voce "box model".

In poche parole:
La larghezza totale di un blocco (browser standard) e` data da:
margin + border + padding + width + padding + border + margin
In IE (quirks mode) invece e` data da:
margin + width + margin (border e padding fanno parte di width)

Per l'altezza il discorso e` analogo.

**nextart** · 10-05-2007, 12:56

ciao grazie della risposta, ho provato a guardare , ma parlano tutti della larghezza e non dell'altezza, poi ho trovato la "mia soluzione"
thread

nel div header essendoci solo un'immagine e non del testo ho impostato:

codice:

.header {
        
	border-top: 2px solid #f25a15;
	background: #DAD7C5;
	height: 220px;
        font-size: 0;
     }

e ora sia IE che FF hanno l'header corretto.....

non so se sia "corretto al 100%" ........

ciao

Discussione: altezza header differente in IE

Strumenti discussione

Ricerca discussione

Visualizza

altezza header differente in IE

Permessi di invio