Un tabulatore, quasi una indentazione

[Rickycast]

Allego l'indirizzo di una pagina che sto preparando:



Come potete vedere ho una lista divisa verticalmente come se utilizzassi un "tabulatore" e mi pare che funzioni abbastanza bene, tranne per il fatto che al passaggio del mouse la seconda parte si sposta verso il basso di 1px.
Non sono riuscito a rimediare a questo piccolo difetto e spero che qualcuno mi possa aiutare ad eliminarlo.
Allego anche i CSS per chi volesse fare dei tests

@charset "utf-8";
/* Navbar - CSS Document */

div.navigation {width: 979px; height: 24px; float:left; display: inline; margin: 0; border-color:#FFFFFF; border-style: solid; border-width: 1px; position: absolute; top: 93px; left: 0px}
div.navigation ul{list-style-type: none; margin: 0; padding: 2px 0 0 7px; border:0; text-align:left}
div.navigation li{margin: 0; padding:0 10px 0 0; display:inline; border:0}
div.navigation a{padding:6px 20px 4px 0px;
	background-color:transparent;
	color:#FFFFFF; /*COLORE DI DEFAULT DELLA LISTA*/
	text-align:left;
	font-weight:bold;
	font-variant: normal;
	font-size:13px;
	line-height: 20px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	text-decoration: none; 
	border: 0; 
	display: inline}
div.navigation a:hover{color:#000000;  margin:0;line-height: 20px; border:0}
div.navigation li.activelink a{color:#000000;  border:0; padding:6px 20px 4px 0px; font-weight:bold}
div.navigation li.activelink a:hover{color:#000000;  border:0; padding:6px 20px 4px 0px; font-weight:bold}

div.navVert {width:350px; background-color:transparent; float:left; display:block; margin: 0; position: absolute; top: 227px; left: 25px}
div.navVert ul{list-style-type: none; margin: 0px !important; margin: 14px 0 0 0; padding: 0; border:0; text-align:left; display:block}
div.navVert li{margin: 0; padding:0; display:block; border:0}
div.navVert a{padding:0 0 1px 2px;
	margin:-1px 0 0 0 !important; margin: -16px 0 0 0;
	background-color:transparent; 
	color: #000000;
	text-align:left;
	font-weight: bold;
	font-variant: normal;
	font-size:13px;
	line-height: 18px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	text-decoration: none;
	border: 0;
	display:block;
	letter-spacing: 0.02em}	
div.navVert a:hover{color:#FFFFFF; font-weight:bold; line-height: 16px; border: solid 1px #333333; background-color:#666666}
div.navVert li.actvlnkV a{color:#FFFFFF; font-weight:bold; line-height: 16px; border: solid 1px #333333; background-color:#666666}
div.navVert li.actvlnkV a:hover{color:#FFFFFF; font-weight:bold; line-height: 16px; border: solid 1px #333333; background-color:#666666}

/*tabulatori*/
.tab{position:absolute; left:50px; line-height: 18px; cursor: pointer; margin: 0 !important; margin: -16px 0 0 0}

e

@charset "utf-8";
/* Main - CSS Document */

html{ background-color:#C7C8CC}
body{ position:relative; top: 0px; padding:0; border:0; margin: 0}


.ie div#container{width: 981px; height:800px; margin: 15px auto 0 auto !important;  margin: 0 auto 0 auto; text-align:center; position:relative; font-style:italic}

div#container{width: 981px; height:800px; margin: 15px auto 0 auto !important;  margin: 0 auto 0 auto; text-align:center; position:relative; font-style:normal}

div#bolle{position: absolute; top: 134px; left: 0px; z-index:-1}

div#logoMax{position: absolute; top: 16px; left: 0px}

div#logoSis{position: absolute; top: 25px; left: 240px}

div#swissmade{position: absolute; right: 17px; top: 45px; z-index: 4}

div#fondoBianco{position: absolute; width: 945px; height: 457px; left: 18px; top: 184px; background-color:#FFFFFF}

div#txtUno{font-family:Verdana, Arial, Helvetica, sans-serif; font-size:14px; font-weight:bold; border-bottom: solid 1px; border-color:#CCCCCC; position:absolute; top: 16px; left: 37px; text-align: left; width: 871px; height: 35px; line-height: 15px}
div#txtDue{font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; position: absolute; top: 52px; left: 37px; text-align: left; width: 871px; line-height: 14px}

div.ImmgHome{position: absolute;top: 90px; height: 340px; width: 190px; background-color:#B8B8B8; border: none}
div.trasp{font-family: Verdana, Arial, Helvetica, sans-serif; font-weight:bold; font-size:11px; position: absolute;top: 408px; height: 17px; width: 190px; background-color:#B8B8B8; padding-top: 5px; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=85)"; filter: alpha(opacity=85); opacity:0.85}

/*Prodotti*/
div#Bnd{width: 931px; height:39px; border-bottom:solid 2px #FFFFFF; background-color:transparent; margin: 0; padding: 0 0 2px 0; text-align: left; position:absolute; left: 25px; top: 155px}
div#TxtBnd{letter-spacing: -0.03em; line-height: 1.6em}
div#ImgBnd{width: 530px; height: 36px; position: absolute; right: 0px; top:2px}
div#SfndGr{width: 530px; height:450px; background-color:#E1E1E1; margin: 0; padding: 0; text-align: left; position:absolute; right: 25px;; top: 201px}
div#TxtSfdGr{width: 470px; height: 120px; position: relative; left: 30px; top:25px; text-align:justify; line-height: 1.3em; letter-spacing: 0.03em; z-index: 10}
div#ImgSfdGr{width: 470px; height: 223px; position: relative; left: 30px; top: 80px}

Aggiungo che ho dovuto differenziare di 2px il valore dell'elemento line-height fra .tab e div.navVert a:hover perchè diversamente crea effetti di spostamento fastidiosi al passaggio del mouse.
So che (forse) semanticamente quello che ho scritto non è il massimo, ma funziona senza utilizzare le tabelle.
Se però qualcuno ha soluzioni egualmente performanti senza le tabelle e senza il difetto del mio lavoro, sarò molto contento di utilizzarle.
Grazie

[webdemo]

io sinceramente non ho notato spostamenti...

sposto invece il 3d in CSS

[ac_socmel]

The page cannot be found

[Rickycast]

Chiedo scusa, ho fatto qualche integrazione.
Ora è disponibile.

[Rickycast]

Non credo di essere solo io a vedere questo difetto. Qualcuno ha qualche idea?
Riposto l'indirizzo del Sito:

www.maxolen.it/Prodotti/Lucidanti/Lucidanti.htm

Grazie

[webdemo]

io non vedo spostamenti,
o spieghi meglio dove noti questo difetto...

[Rickycast]

Allego una immagine; spero sia abbastanza definita da poter vedere lo spostamento, che a me pare di 1 pixel.

[Mich_]

La mia impressione e` che sia un effetto ottico dovuto al (quasi) scambio di colori tra background e foreground.

Mi spiego meglio:
Al momento io vedo la combinazione grigio_chiaro-nero per lo stato a riposo, e grigio_scuro-bianco per lo stato hover.
Prova ad usare grigio_un_po'_piu`_chiaro-nero per lo stato hover.
Se non vedi piu` l'effetto, e` il segno che era dato da effetto ottico; se lo vedi ancora e` un problema diverso.

Se ho ragione, il forum di riferimento e` quello di grafica: loro potrebbero darti qualche consiglio utile. Se ti interessa percorrere questa strada, ti consiglio di preparare una pagina di prova con l'effetto e fargliela vedere (come hai fatto qui).

[Rickycast]

Grazie Mich.

Preparerò una pagina di prova come suggerisci, ma comunque ti anticipo che ho già fatto un test con gli stessi elementi ma con "background: transparent" e sull'immagine di fondo si vedeva chiaramente lo spostamento.
La pagina che farò sarà con Font molto più grandi e con riferimenti chiari sullo sfondo, così da vedere veramente cosa accade.
A fra poco.

[Rickycast]

Ecco il codice di una pagina di Test nella quale si vede bene l'effetto di cui parlo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="it" xml:lang="it">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Test</title>

<meta name="description" content=""/>

<meta name="keywords" content=""/>

<style type="text/css">

div.navVert {width:500px; background-color:transparent; float:left; display:block; margin: 0; position: absolute; top: 10px; left: 40px}
div.navVert ul{list-style-type: none; margin: 0px; margin: 0; padding: 0; border:0; text-align:left; display:block}
div.navVert li{margin: 0; padding:0; border: 0; display:block}
div.navVert a{padding:0 0 1px 0;
	margin:-1px 0 0 0;
	background-color:transparent; 
	color: #000000;
	text-align:left;
	font-weight: normal;
	font-variant: normal;
	font-size:16px;
	line-height: 20px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	text-decoration: none;
	border: 0;
	display:block}	
div.navVert a:hover{color:#000000; font-weight:normal; line-height: 18px; border: solid 1px #333333; background-color:#transparent; position: relative; left: -1px; width: 500px}

.tab{position:absolute; left:50px; line-height: 18px; cursor: pointer; margin: 0}

.ripeti{position: relative; height: 19px; background-color:#FFFFFF; border-bottom: 1px solid #000000}

</style>

</head>
   
<body style=" background-color:#FFFFFF position: absolute; top: 0; width: 100%">
	<div class="ripeti"></div>
	<div class="ripeti"></div>
    <div class="ripeti"></div>
    <div class="ripeti"></div>
    <div class="ripeti"></div>

	<div class="navVert">
		<ul>
			[*]<span>10</span><span class="tab">Riga che si abbassa al passaggio del mouse</span>
			[*]<span>20</span><span class="tab">Riga che si abbassa al passaggio del mouse</span>[*]<span>30</span><span class="tab">Riga che si abbassa al passaggio del mouse</span>
			[*]<span>100</span><span class="tab">Riga che si abbassa al passaggio del mouse</span>
			[*]<span>200</span><span class="tab">Riga che si abbassa al passaggio del mouse</span>
		[/list]
	</div>
    
</div>

</body>
</html>

Spero che adesso sia evidente quello che intendo.

Aspetto commenti e suggerimenti.