testo nel div: IE aggiunge spazio?

[ciammarica]

Ciao a tutti!
Ho quest'altro problema: ho inserito del testo nei div del menu (quelli con scritto Homepage, ecc.), con Firefox si visualizza tutto perfettamente come mostra la figura seguente:



Con IE invece si visualizza in quest'altro modo, come se aggiungesse 4 pixel al di sopra del div con il testo (infatti basta mettere margin-top: -23px; anziche' margin-top: -19px; in ogni label per far allineare tutto correttamente in IE, solo che cosi' si sformatta in Firefox):



Il codice del CSS e' questo:

body {

	margin: 0;
	padding: 0;
	background: #FFFFFF;
	font-family: "Comic Sans MS", Arial, Helvetica, sans-serif;
	color: #8E959B;
}


h1, h2, h3, h4, h5, h6 {

	margin-top: 0px;	
	margin-bottom: 8px;
	
}


#container {

	float: auto;
	width: 800px;
	height: 600px;
	margin: 0 auto;
	padding: 0 0 0 0;
}


#menuleft {

	float:left;
	width: 69px;
	height: 600px;
	margin: 0 auto;
	padding: 0 0 0 0;
	background: url(../images/menu_left.gif) no-repeat;
}


#content {

	width: 731px;
	height: 600px;
	margin: 0 auto;
	margin-left: 69px;
}


#menucontainer {
	
	float: left;
	width: 535px;
	height: 154px;
	margin: 0 auto;
	padding: 0 0 0 0;
}


#menu {

	width: 535px;
	height: 102px;
	
}


#menuimgs {

	position: relative;
	width: 535px;
	height: 83px;
}


#menulabels {
	
	position: relative;
	width: 535px;
	height: 19px;
}


#home {

	position: relative;
	width: 114px;
	height: 83px;
    background: url(../images/home_off.gif) no-repeat;
}



#fumetti {

	position: relative;
	width: 116px;
	height: 83px;
	margin-left: 114px;
    background: url(../images/fumetti_off.gif) no-repeat;
    
}


#illustrazioni {

	position: relative;
	width: 108px;
	height: 83px;
	margin-left: 116px;
    background: url(../images/illustrazioni_off.gif) no-repeat;
}


#vignette {

	position: relative;
	width: 78px;
	height: 83px;
	margin-left: 108px;
    background: url(../images/vignette_off.gif) no-repeat;
}


#argilla {

	position: relative;
	width: 119px;
	height: 83px;
	margin-left: 78px;
    background: url(../images/argilla_off.gif) no-repeat;
}


#home_label {

	position: relative;
	width: 114px;
	height: 19px;
	margin-left: -338px;
	text-align: center;
	text-decoration: none;
    background: url(../images/home_label.gif) no-repeat;
}


#fumetti_label {

	position: relative;
	width: 116px;
	height: 19px;
	margin-left: -224px;
	margin-top: -19px;
	text-align: center;
	text-decoration: none;
    background: url(../images/fumetti_label.gif) no-repeat;
}


#illustrazioni_label {

	position: relative;
	width: 108px;
	height: 19px;
	margin-left: -108px;
	margin-top: -19px;
	text-align: center;
	text-decoration: none;
    background: url(../images/illustrazioni_label.gif) no-repeat;
}


#vignette_label {

	position: relative;
	width: 78px;
	height: 19px;
	margin-top: -19px;
	text-align: center;
	text-decoration: none;
    background: url(../images/vignette_label.gif) no-repeat;
}


#argilla_label {

	position: absolute;
	width: 119px;
	height: 19px;
	margin-left: 78px;
	margin-top: -19px;
	text-align: center;
	text-decoration: none;
    background: url(../images/argilla_label.gif) no-repeat;
}


#menutop {

	position: absolute;
	float: left;
	width: 535px;
	height: 52px;
	margin-left: -230px;
	margin-top: 19px;
    background: url(../images/menu_top.gif) no-repeat;
}


#logo {
	
	position: absolute;
	width: 196px;
	height: 154px;
	margin-left: 305px;
	margin-top: -83px;
	background: url(../images/logo.gif) no-repeat;
}


#leftmenu_news {

	position: absolute;
	margin-left: -535px;
	margin-top: 154px;
	width: 210px;
	height: 446px;
}


#bodycontent {

	position: absolute;
	width: 336px;
	height: 368px;
	margin-left: 210px;
	margin-top: -446px;
	background-color: #e5e5e5;
	font-size: 16px;
	overflow: auto;
}


#rightmenu {
	
	position: absolute;
	width: 185px;
	height: 368px;
	margin-left: 546px;
	margin-top: -446px;
	border: 1px solid #000000;
}


#menu_inner {

	position: absolute;
	width: 210px;
	height: 23px;
	background: url(../images/menu_inner.gif) no-repeat;
}


#menu_content {

	position: absolute;
	width: 140px;
	height: 219px;
	margin-top: 23px;
	background: url(../images/menu_content.gif) no-repeat;
}


#menu_bottom {

	position: absolute;
	width: 140px;
	height: 57px;
	margin-top: 242px;
	background: url(../images/menu_bottom.gif) no-repeat;
}


#news_content {

	position: absolute;
	width: 140px;
	height: 116px;
	margin-top: 57px;
	font-size: 14px;
	background: url(../images/news_content.gif) no-repeat;
	overflow: auto;
}


#news_bottom {

	position: absolute;
	width: 140px;
	height: 31px;
	margin-top: 173px;
	background: url(../images/news_bottom.gif) no-repeat;
}


#menu_news_right {

	position: relative;
	width: 70px;
	height: 423px;
	margin-top: -392px;
	margin-left: 140px;
	background: url(../images/menu_right.gif) no-repeat;
}


#footer {

	position: absolute;
	width: 521px;
	height: 78px;
	margin-left: 210px;
	margin-top: -78px;
	border: 1px solid #e42145;
}


#body_bottom {

	position: relative;
	width: 453px;
	height: 29px;
	margin-top: 0px;
	margin-left: 0px;
	background: url(../images/body_bottom.gif) no-repeat;
}

E il codice HTML e' questo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
	
		<title>Comics</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<link href="css/default.css" rel="stylesheet" type="text/css" />
		
	</head>

	<body>

		<div id="container">
		
			<div id="menuleft"/>
			
			
			<div id="content">
				
				<div id="menucontainer">
		
					<div id="menu">
					
						<div id="menuimgs">
		
							<div id="home"/>
							<div id="fumetti"/>
							<div id="illustrazioni"/>
							<div id="vignette"/>
							<div id="argilla"/>
							
						</div>
						
						<div id="menulabels">	
							
							<div id="home_label">Homepage</div>
							<div id="fumetti_label">Fumetti</div>
							<div id="illustrazioni_label">Illustrazioni</div>
							<div id="vignette_label">Vignette</div>
							<div id="argilla_label">Argilla</div>
						
						</div>
						
					</div>
					
					<div id="menutop"/>
						
				</div>
				
				<div id="logo"/>
				
				<div id="leftmenu_news">
				
					<div id="menu_inner"/>
					
					<div id="menu_content">
						<!--<[foreach]>
							<[menuitem]>
						<[/foreach]>-->
					</div>
					
					<div id="menu_bottom"/>
					
					<div id="news_content">
						<h5>NEWS</h5>
						Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
					</div>
					
					<div id="news_bottom"/>
					<div id="menu_news_right"/>
				
				</div>
				
				<div id="bodycontent">
					Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
				</div>
				
				
				<div id="rightmenu">
				
				
				</div>
				
				
				<div id="footer">
				
					<div id="body_bottom"/>					
				
				</div>
					
			</div>
			
		</div>	
		
	</body>
	
</html>

Grazie!

[panta1978]

Classico bug di IE. Dovresti risolvere con i commenti condizionali, che ti consentono di scrivere fogli di stile add hoc per IE. Fai una ricerca sul forum o con google, troverai materiale in abbondanza.

E ricorda che probabilmente con IE7 si vedrà bene, quindi dovrai usare qualcosa tipo

css standard

[ciammarica]

Grazie mille, provo a documentarmi sui commenti condizionali allora
Ho notato che diminuendo il font del testo diminuisce lo spazio che IE crea sopra al div...
mettendo un font molto piccolo, tipo 3px, si allinea bene anche in IE...

[ciammarica]

ok, ho risolto!
Pero' non ho usato i commenti condizionali, perche' mi seccava avere due CSS, vorrei mantenerne uno valido per tutti.
E' bastato inserire !important nel margin-top per firefox e non inserirlo in quello per IE, in modo da poter mettere due valori diversi a seconda del browser.
Il CSS in pratica, e' diventato cosi':

body {

	margin: 0;
	padding: 0;
	background: #FFFFFF;
	font-family: "Comic Sans MS", Arial, Helvetica, sans-serif;
	color: #8E959B;
}


h1, h2, h3, h4, h5, h6 {

	margin-top: 0px;	
	margin-bottom: 8px;
	
}


#container {

	float: auto;
	width: 800px;
	height: 600px;
	margin: 0 auto;
	padding: 0 0 0 0;
}


#menuleft {

	float:left;
	width: 69px;
	height: 600px;
	margin: 0 auto;
	padding: 0 0 0 0;
	background: url(../images/menu_left.gif) no-repeat;
}


#content {

	width: 731px;
	height: 600px;
	margin: 0 auto;
	margin-left: 69px;
}


#menucontainer {
	
	float: left;
	width: 535px;
	height: 154px;
	margin: 0 auto;
	padding: 0 0 0 0;
}


#menu {

	width: 535px;
	height: 102px;
	
}


#menuimgs {

	position: relative;
	width: 535px;
	height: 83px;
}


#menulabels {
	
	position: relative;
	width: 535px;
	height: 19px;
}


#home {

	position: relative;
	width: 114px;
	height: 83px;
    background: url(../images/home_off.gif) no-repeat;
}



#fumetti {

	position: relative;
	width: 116px;
	height: 83px;
	margin-left: 114px;
    background: url(../images/fumetti_off.gif) no-repeat;
    
}


#illustrazioni {

	position: relative;
	width: 108px;
	height: 83px;
	margin-left: 116px;
    background: url(../images/illustrazioni_off.gif) no-repeat;
}


#vignette {

	position: relative;
	width: 78px;
	height: 83px;
	margin-left: 108px;
    background: url(../images/vignette_off.gif) no-repeat;
}


#argilla {

	position: relative;
	width: 119px;
	height: 83px;
	margin-left: 78px;
    background: url(../images/argilla_off.gif) no-repeat;
}


#home_label {

	position: relative;
	width: 114px;
	height: 19px;
	margin-left: -338px;
	text-align: center;
	text-decoration: none;
    background: url(../images/home_label.gif) no-repeat;
}


#fumetti_label {

	position: relative;
	width: 116px;
	height: 19px;
	margin-left: -224px;
	margin-top: -19px !important;
	margin-top: -23px;
	text-align: center;
	text-decoration: none;
    background: url(../images/fumetti_label.gif) no-repeat;
}


#illustrazioni_label {

	position: relative;
	width: 108px;
	height: 19px;
	margin-left: -108px;
	margin-top: -19px !important;
	margin-top: -23px;
	text-align: center;
	text-decoration: none;
    background: url(../images/illustrazioni_label.gif) no-repeat;
}


#vignette_label {

	position: relative;
	width: 78px;
	height: 19px;
	margin-top: -19px !important;
	margin-top: -23px;
	text-align: center;
	text-decoration: none;
    background: url(../images/vignette_label.gif) no-repeat;
}


#argilla_label {

	position: absolute;
	width: 119px;
	height: 19px;
	margin-left: 78px;
	margin-top: -19px !important;
	margin-top: -23px;
	text-align: center;
	text-decoration: none;
    background: url(../images/argilla_label.gif) no-repeat;
}


#menutop {

	position: absolute;
	float: left;
	width: 535px;
	height: 52px;
	margin-left: -230px;
	margin-top: 19px !important;
	margin-top: -4px;
    background: url(../images/menu_top.gif) no-repeat;
}


#logo {
	
	position: absolute;
	width: 196px;
	height: 154px;
	margin-left: 305px;
	margin-top: -83px !important;
	margin-top: -106px;
	background: url(../images/logo.gif) no-repeat;
}


#leftmenu_news {

	position: absolute;
	margin-left: -535px;
	margin-top: 154px;
	width: 210px;
	height: 446px;
}


#bodycontent {

	position: absolute;
	width: 336px;
	height: 368px;
	margin-left: 210px;
	margin-top: -446px;
	background-color: #e5e5e5;
	font-size: 16px;
	overflow: auto;
}


#rightmenu {
	
	position: absolute;
	width: 185px;
	height: 368px;
	margin-left: 546px;
	margin-top: -446px;
	border: 1px solid #000000;
}


#menu_inner {

	position: absolute;
	width: 210px;
	height: 23px;
	background: url(../images/menu_inner.gif) no-repeat;
}


#menu_content {

	position: absolute;
	width: 140px;
	height: 219px;
	margin-top: 23px;
	background: url(../images/menu_content.gif) no-repeat;
}


#menu_bottom {

	position: absolute;
	width: 140px;
	height: 57px;
	margin-top: 242px;
	background: url(../images/menu_bottom.gif) no-repeat;
}


#news_content {

	position: absolute;
	width: 140px;
	height: 116px;
	margin-top: 57px;
	font-size: 14px;
	background: url(../images/news_content.gif) no-repeat;
	overflow: auto;
}


#news_bottom {

	position: absolute;
	width: 140px;
	height: 31px;
	margin-top: 173px;
	background: url(../images/news_bottom.gif) no-repeat;
}


#menu_news_right {

	position: relative;
	width: 70px;
	height: 423px;
	margin-top: -392px;
	margin-left: 140px;
	background: url(../images/menu_right.gif) no-repeat;
}


#footer {

	position: absolute;
	width: 521px;
	height: 78px;
	margin-left: 210px;
	margin-top: -78px;
	border: 1px solid #e42145;
}


#body_bottom {

	position: relative;
	width: 453px;
	height: 29px;
	margin-top: 0px;
	margin-left: 0px;
	background: url(../images/body_bottom.gif) no-repeat;
}

Questo articolo mi e' stato utile

Ed ora si vede allo stesso modo anche su IE.