Problema posizione immagine su Opera e IE8

**ANTAGONIA** · 07-03-2011, 13:14

Buon giorno a tutti, ho il problema nel posizionare regolarmente un'immagine che mi fa da background per un menu.
Nell'immagine postata potete notare le varie differenze.
In FF e Safari è tutto ok.
Invece in Opera e IE8 la barretta fa un po' come vuole.
Di seguito l'html relativo:

codice:

//html
<div id="barramenu">
				<span class="home">HOME</span><span class="divisorio"></span>
					<span class="chi_siamo">CHI SIAMO</span><span class="divisorio"></span>
					<span class="dove_siamo">DOVE SIAMO</span><span class="divisorio"></span>
					<span class="storia">STORIA</span><span class="divisorio"></span>
			</div>

Di seguito il css relativo:

codice:

#barramenu{
	width:940px;
	height:28px;
	background:#0d4b92;
	background:url('../images/barramenu/barramenusmallOpaca.png') no-repeat;
	position:absolute;
	top:195px;
	text-align:left;
	line-height:25px;
	font-size:105%;
}

#barramenu a{
	font-weight:bold;
	color:#FFF;	
}
#barramenu a:hover{
	font-weight:bold;
	color:#84b3e8;	
}
#barramenu .divisorio{
	float:left;
	display:block;
	background:url('../images/barramenu/divisorioOpaco.png') no-repeat;
	width:2px;
	height:23px;
	margin-top: 3px;
}

#barramenu .home, .chi_siamo, .dove_siamo, .storia,{
	float:left;	
	display:block;
	margin:0 0 15px 15px;
	text-align:center;
width:130px;
}

Se fate caso alle freccette arancioni descrivono da sole il tipo di problema che ho.
FF è la posizione giusta, gli altri hanno quella sbagliata.
Quindi domanda:
c'è un modo standard per avere un posizionamento perfetto per tutti i browser senza dover adottare i commenti condizionali per IE?
grazie mille...

**ANTAGONIA** · 07-03-2011, 13:20

Non ho risolto nulla anche inserendo margin:0; e display:block;

codice:

#barramenu{
        display:block;
	width:940px;
	height:28px;
	background:#0d4b92 url('../images/barramenu/barramenusmallOpaca.png') no-repeat;
	position:absolute;
	top:195px;
	text-align:left;
	line-height:25px;
	font-size:105%;
	margin:auto;/*quando si deve posizionare un qualsiasi elemento */
}

**ANTAGONIA** · 08-03-2011, 11:17

ancora qualche problema che non riesco a capire...aiutatemi per favore.
Ho preso questo esempio su un sito...ora, non capisco come mai si dice che, per cnetrare elementi in IE si debba utilizzare il text-align:center.
facendo come di seguito:

codice:

<style>
	*{
		margin:0;
		padding: 0;
	}
	body {
	
	text-align: justify;
	font-family:  Tahoma, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #FFF;
	text-align:center;
}
</style>

//Html
<body>
	<div style="width:300px; height: 100px; border: 1px solid yellow;"></div>
	<div style="width:300px; height: 300px; border: 1px solid black;position:relative;">
		<div style="width:200px; height: 200px; border: 1px solid red; position: absolute; top: 186px; left: 10px;"></div>
	</div>
</body>

Ho due diverse interpretazioni con FF e IE, e a questo punto non so quali delle due sia quella esatta..
Nelle immagini potete osservare come si comportano i 3 div.
In FF allineamento a sinistra con IE centrale.
Quindi domanda:
c'è una linea standard da seguire per posizionare questi elementi anche per IE, senza dover usare i commenti condizionali?
Grazie

Discussione: Problema posizione immagine su Opera e IE8

Strumenti discussione

Ricerca discussione

Visualizza

Problema posizione immagine su Opera e IE8

Permessi di invio