Calcolo dimensione corretta padding

[davidl77]

Ciao a tutti.

Ho un div right:

#right
{
	position: relative;
        width:  230px;
        height: 340px;
	margin: -340px 0px 0px 460px;
	text-align:left;
	padding:0px 0px 0px 0px;
	border:0px dashed #fff;
	background-color:#eee;
	}
#right ul {
		list-style: none;
		margin: 0px 0px 0px 0px;
		padding: 0px 0px 0px 0px;
		border: 0px 0px 0px 0px;
		border: none;
		}		
#right li {
		border-bottom: 1px solid #90bade;
		margin: 0;
		padding:0;
		}
#right li a {
		display: block;
		margin:0;
		padding:  15px 10px 15px 10px;
		border-left: 10px solid #1958b7;
		border-right: 10px solid #508fc4;
		border-top: 0px;
		border-bottom: 0px;
		background-color: #2175bc;
		color: #fff;
		text-decoration: none;
		width: 100%;
		font-size: 10px;
		}
html>body #right li a {
		width: auto;
		margin:0;
		}

Dove inserisco una lista di 8 elementi:

<div id = "right">
  <ul>
	[*]Home
	[*]Curriculum Vitae
	[*]TBD
	[*]TBD
	[*]TBD
	[*]TBD
	[*]TBD
	[*]Contact Me[/list]
</div>

Io vorrei riempire tutto il div di 340 px con la lista.
Però non ci riesco, ovvero non riesco a determinare correttamente il padding del #right li a che ho messo a 15px per evidenziarlo.

Mi aiutate a fare il conto?

Il div è di 340 e lo riempio con:
border-bottom del li = 1px * 8 = 8 px
text = 10px * 8 = 80 px

e padding-bottom+padding-top del li-a = (15px+15px)*8 = 240 px
in totale danno 328 px, però guardando il risultato la lista è fuori div, ovvero ha un altezza maggiorre delle 340px.

Quindi nel mio calcolo mi perdo qualcosa. Sapreste aiutarmi per favore?

Grazie mille,

[davidl77]

Se può aiutare:
hio verificato che l'altezza del div viene esattamente 328+15+8 = 351 px.

Da dove vengono i 15 + 8 secondo voi?

[Mich_]

Come fai a conoscere l'altezza del font?
Non puoi determinarla a priori, dato che i browser la possono sovrascrivere.
Ad esempio io ho impostato un font standard di 14px con un font minimo di 12, altrimenti non riesco a vederli i caratteri (il monitor e` impostato ad alta risoluzione). Quindi per prima cosa verifica come e` impostato il browser.

Altra domanda: come fai a presumere l'altezza del tag <a>, dato che non la hai impostata? E comunque ti conviene impostare le dimensioni del[*], ed impostare invece il tag <a> al 100% sia in altezza che in larghezza, in modo da non avere bordi strani quando passi con il mouse. In quest'ottica anche il padding andrebbe inserito nel[*].