problema di posizionamento immagini

**zilion** · 19-04-2005, 12:38

Salve a tutti io ho questo problema:
posiziono all'interno di un "div" un'immagine con l'apposito tag ma questa ha comportamenti diversi con i vari browser.
mi spiego meglio:
nel mio sito creo un "div#contorno" che crea un bordo tutto intorno all'area dei contenuti del mio sito.
all'interno del "div#contorno" ho inserito altri 2 "div":
"div_logo" e "div#menu".
imposto una classe dove specifico larghezza margini bordini del "div#logo" che dovra' contenere l'immagine in questione e definisco con identiche caratteristiche il "div#menu" che conterra' appunto il menu di navigazione orizzontale, in modo tale da disegnare 2 aree di uguale larghezza e con identico bordo.

Codice:

codice:

<html>
<head>
<style type="text/css">
html body{
	margin: 0px;
	padding: 0px;
	text-align: center;
}

#contorno{
	width: 760px;
	text-align: left;
	border: 1px solid silver;
}
/*classi*/
.menu{
	width: 754px;
	margin: 2px;
	border: 1px solid silver;
}
.logo{
	width: 754px;
	margin: 2px;
	border: 1px solid silver;
}
</style>
</head>
<body>
<div id="contorno">
<div class="logo">
[img]images/logo01.png[/img]
</div>
<div class="menu">a</div>
</div>

</body>
</html>

ora se testo la pagina con IE si l'immagine diventa piu grande dell'area definita dallo stile e mi sballa l'allienamento, se invece visualizzo la pagina con firefox tutte le proporzioni sono rispettate.

Sapete come posso risolvere questo problema?
grazie per l'attenzione

**kose** · 19-04-2005, 15:38

ti sei appena scontrato con un curioso bug di internet explorer....

ecco la soluzione:

aggiungi la proprietà font-size:0; nel div "logo" e il problema sarà magicamente risolto

Es.

.logo{
width: 754px;
margin: 2px;
border: 1px solid silver;
padding:0;
font-size:0;
}

Ciao

**zilion** · 19-04-2005, 15:49

grazie mille per l'aiuto, funziona perfettamente ed è la soluzione che adottero.

se a qualcuno interessa ho trovato anche un altro modo per risolvere il problema.
togliendo l'immagine dal codice html e facendola caricare dal css il problema si risolve.

codice:

<html>
<head>
<style type="text/css">
html body{
	margin: 0px;
	padding: 0px;
	text-align: center;
}

#contorno{
	width: 760px;
	text-align: left;
	border: 1px solid silver;
}
/*classi*/
.menu{
	width: 754px;
	margin: 2px;
	border: 1px solid silver;
}
.logo{
	width: 754px;
	margin: 2px;
	border: 1px solid silver;
        background-image: url(images/logo01.png);
}
</style>
</head>
<body>
<div id="contorno">
<div class="logo"></div>
<div class="menu">a</div>
</div>

</body>
</html>

Discussione: problema di posizionamento immagini

Strumenti discussione

Ricerca discussione

Visualizza

problema di posizionamento immagini

Permessi di invio