Bottone ed etichetta

**spillo491** · 31-08-2010, 16:20

Ciao,

sto impazzendo con un bottone (realizzato tramite div + immagini ) e la sua etichetta.

Come è possibile che la prima volta che apro la pagina con il bottone l'etichetta è sfasata e a tutti i successivi caricamenti della pagina stessa il bottone è visualizzato correttamente ?
ANche se cancello cookie e cronologia continuo a vederlo correttamente !

Cambio computer apro la stessa pagina, bottone con etichetta sfasata, f5, bottone va apposto e anche su questo pc non riesco piu a riprodurre il problema !!

Mi sembra una cosa assurda

Qualche idea ?

Il problema cè solo con IE8 !!!

**ResianTaxidrive** · 31-08-2010, 16:39

non si può vedere la pagina?

**spillo491** · 02-09-2010, 09:39

codice:

<html>
	<head>
		<style type='text/css'>
			
			div.divBottone {
				float: left;
				margin: 0;
				margin-right: 10px;
				padding: 0;
				width: auto;
				height: 20px;
				border: none;
				background: transparent;
			}
			
			span.bottone {
				display: block;
				float: left;
				height: 20px;	
				margin: 0;
				padding: 0;
				background-repeat: no-repeat;
				padding-top: 7px;
			}
			
			.bottoneTesto {
				font-size: 11px;
				color: #ffffff;
				font-family: "Trebuchet MS";
				font-weight: bold;
				text-decoration: none;
				position: relative;
				display: inline;
				top: -4px;
				
			}
			
			a.rollover {
				background: transparent;		
				color: #ffffff;
				text-decoration: none;
				margin: 0;
				padding: 0;
			}
			
			a:hover.rollover {
				background: transparent;		
				color: #ffffff;
				text-decoration: none;
				margin: 0;
				color: black;
				padding: 0;
			}
			
			span.bottoneSx {
				width: 6px;				
				background-color: transparent;
				background-position: 0 0;
			}
			
			a.rollover span.bottoneSx {
				background-image: url(../images/btn-left.png);
				margin: 0;
			}
			
			a:hover.rollover span.bottoneSx {
				background-image: url(../images/btn-left-on.png);
				margin: 0;		
			}
			
			/* CENTRO BOTTONE */		
			
			span.bottoneCentro {
				width: auto;				
				background-color: transparent;
				background-repeat: repeat-x;
				background-position: 0 0;
				
			}
			
			a.rollover span.bottoneCentro {	
				background-image: url(../images/btn-center.png);	
				margin: 0;					
			}
			
			a:hover.rollover span.bottoneCentro {
				background-image: url(../images/btn-center-on.png);	
				margin: 0;					
			}
			
			/* FINE BOTTONE */
			
			span.bottoneDx {
				width: 6px;				
				background-color: transparent;			
				background-position: 0 0;
			}
			
			a.rollover span.bottoneDx {
				background-image: url(../images/btn-right.png);	
				margin: 0;
			}
			
			a:hover.rollover span.bottoneDx {
				background-image: url(../images/btn-right-on.png);
				margin: 0;
			}

			td.formInput {
				/*border-right: 5px solid black;*/
				padding-left: 10px;
				padding-bottom: 10px;
				width: 110px;		
				font-size: 11px;
				line-height: 10px		
			}
			
			td.formInputField {
				padding-bottom: 10px;
			}
			
			.campoLeftLeft{
				float:left;
				text-align:left;
			}
			
			.clear{
				clear:both;
				line-height:1px;	
				font-size:1px; /*solo safari*/
			}
			
			div.bottoneBackSx {
				background-image: url(btn-left-on.png);
				margin: 0;
				padding: 0;
				float:left;
				background-repeat: no-repeat;
			}
			
			div.bottoneBack {
				background-image: url(btn-center-on.png);
				margin: 0;
				padding: 0;
				float:left;
				background-repeat: repeat-x;
			}
			
			div.bottoneBackDx {
				background-image: url(btn-right-on.png);
				margin: 0;
				padding: 0;
				float:left;
				background-repeat: no-repeat;
			}
		
		</style>
	</head>
	<body style="background-color: #D3ECF5;">

		<table style="width: 830px;">
			<tbody>
				<tr>
					<th>CODICE FISCALE<span class="mandatory">*</span><span class="obbligatorio"></span></th>
					<td>
						<div class="clear"></div>
						<span class="campoLeftLeft"><input type="text" class="sinistra" onblur="javascript:this.value=this.value.toUpperCase();" value="" tabindex="5" size="19" maxlength="16" name="codFiscaleContribuente"></span>
						<div style="width: 28%;" class="campoLeftLeft">
							<div class="divBottone">
								<a href="javascript:rubrica();" title="" class="rollover">
									<div class="bottoneBackSx">
										<span class="bottone bottoneSx"></span>
									</div>
									<div class="bottoneBack">
										<span class="bottone bottoneCentro">
											<span class="bottoneTesto">
												<span>Rubrica</span>
											</span>
										</span>
									</div>
									<div class="bottoneBackDx">
										<span class="bottone bottoneDx"></span>
									</div>
								</a>
							</div>
						</div>
					</td>
				</tr>
			</tbody>
		</table>

	</body>

</html>

Su certi computer eliminando i file temporanei il bottone si vede male (IE8). Su tutti i computer su cui ho provato io si vede male la prima volta (etichetta sfasata) e poi sempre bene, anche eliminando cookie e file temp !!

Ci possono essere versioni diverse di ie8 ?

**ResianTaxidrive** · 02-09-2010, 11:30

intanto che provo, hai definito un doctype?

**ResianTaxidrive** · 02-09-2010, 11:32

non riesco a riscontrare il problema, vedo sempre le cose nello stesso modo. L'etichetta è sempre lì anche dopo vari aggiornamenti della pagina

**spillo491** · 02-09-2010, 11:33

No, niente doctype

Nemmeno io riesco a riscontrare il problema mentre alcuni clienti si quando puliscono cookie e file temp !

Non ci capisco nulla ....

**ResianTaxidrive** · 02-09-2010, 11:42

beh ma allora cosa aspetti a mettere un doctype??? guarda che non è mica un soprammobile! e' assolutamente necessario.

Giusto perchè Dreamweaver mi ha messo un html transitional, ho provato con quello e non riscontro problemi.

**spillo491** · 02-09-2010, 11:44

Tu hai ragione ma perchè dovrei riscontrare problemi solo con ie8, e solo su alcuni pc ?

**ResianTaxidrive** · 02-09-2010, 12:26

i doctype servono proprio a dare istruzioni ai browser su come devono interpretare l'html e i css. Quindi evidentemente ie8 si comporta a modo suo se non ha istruzioni in merito.

All'inizio mi sermbrava di capire che su tutti i pc riscontravi il problema.

Cmq, cosa intendi per etichetta sfasata? Vedo che ci sono un sacco di stili riguardanti bottoni che io non vedo. poi ci sono anche degli script, potrebbe essere che influiscano?

**spillo491** · 02-09-2010, 12:36

Immagina che il bottone sia un rettangolo colorato (tu non hai le immagini per cui non vedrai il bottone); etichetta sfasata nel senso che la parola "Rubrica" è fuori dalla zona colorata del bottone, precisamente sotto !

Al ricaricare della pagina l'etichetta si sistema e resta sempre corretta, anche cancellando file temp

Gli script non vengono chiamati in fase di caricamento pagina e non creano problemi.

Discussione: Bottone ed etichetta

Strumenti discussione

Ricerca discussione

Visualizza

Bottone ed etichetta

Permessi di invio