Barra orizzontale

[fiber81]

Ciao,
al footer della pagina devo mettere in ordine
barra larga 100% alta 2px colorara
barra larga 100% alta 2px bianca
barra larga 100% alta 20px colorata con scritta

a questo punto io ho fatto così, ho creato due div, il primo per la bandina da 2 px colorata, con le sole proprietà width, heigth e background, e un altro div con sfondo colarato, ma 2 px di margin top.
Questo è il codice:

#footer1
{
	width: 100%;
	height:2px;
	background-color:#83992B;
	
}

#footer2
{
	width: 100%;
	height:22px;
	margin-top: 2px;
	text-align: center;
	background-color:#A1BC2F;
}

e l'html

<div id="footer1"></div>
<div id="footer2">scritta</div>

il FF funziona...mentre in IE la barra colorata, footer1, non è alta 2 px ma di più.
Cosa sbaglio?
Grazie

[salasir]

Metti anche line-height: 2px; a #footer1.
Se non ricordo male, IE prende come altezza minima la dimensione del font impostato.

[fiber81]

Ho provato a mettere line-height ma la barra rimane sempre alta...

[salasir]

Se il div è vuoto come lo hai indicato sopra, è possibile.
Inserisci almeno uno spazio (come entità & n b s p ; senza spazi)

[Mich_]

Originariamente inviato da salasir
Metti anche line-height: 2px; a #footer1.
Se non ricordo male, IE prende come altezza minima la dimensione del font impostato.

Ricordi (quasi) bene, infatti occorre impostare:
font-size
ad una dimensione inferiore all'altezza del blocco.

[salasir]

Originariamente inviato da Mich_
Ricordi (quasi) bene, infatti occorre impostare:
font-size
ad una dimensione inferiore all'altezza del blocco.

[fiber81]

ok, adesso footer1 è alto 2 px ma è aumentato lo spazio tra i due div

[fiber81]

ho provato a mettere font-size:0 e funziona, è corretto far così?
grazie

[fiber81]

scusa Mich_, non ho aggiornato la pagina prima di rispondere
Grazie!