Problema con l'altezza di un Div

[cdaniele]

Salve forum!

ho un problema con il css: mi servirebbe specificare un box con altezza 1 pixel, come nell'esempio:

<div style="height:1px; background-color:#009900;"></div>

su Firefox e Opera è tutto ok, vedo una linea verde alta 1 pixel, ma su explorer (versione 6), la linea è alta 14 pixel (che credo sia una dimensione minima standard)...

C'è un modo per avere un div alto 1 pixel anche in Explorer?

Premetto che, per vari motivi, non voglio usare <hr>, ma un <div>

grazie e a presto,

[Mich_]

L'altezza minima di un blocco in IE e` pari al font-size.

Quindi ti basta aggiungere:
font-size: 0;

[cdaniele]

Originariamente inviato da Mich_
L'altezza minima di un blocco in IE e` pari al font-size.

Quindi ti basta aggiungere:
font-size: 0;

ho provato... ho provato anche a mettere line-height:0 ma mi dà un'altezza di 2 pixel...

[Mich_]

Prova ad aggiungere anche:
border: 0;
padding: 0;
margin: 0;

In alternativa devi farlo trasparente, e specificare solo un bordo (del colore che vuoi), con l'altro bordo a zero.

[cdaniele]

provate già tutte, ma niente...

il problema non è tracciare una linea (il verde di sfondo serve per vedere solo come si comporta il div)... a me serve proprio qualcosa che sia alto 1 pixel e che serva da spazio...

..mi sa che dovrò cercare un'altra soluzione

grazie infinite!

[jollyfish]

<div style="height:1px; background-color:#009900; overflow:hidden;"></div>

overflow:hidden; Significa che anche se il contenuto del DIV è più grande del DIV stesso quest'ultimo non si allarga per mostrarcelo.

[Dirk Pitt]

Originariamente inviato da jollyfish
<div style="height:1px; background-color:#009900; overflow:hidden;"></div>

overflow:hidden; Significa che anche se il contenuto del DIV è più grande del DIV stesso quest'ultimo non si allarga per mostrarcelo.

A me invece servirebbe che il div si allargasse. Come fare?
E come fare per settare un dimensione minima, ma avere allo stesso tmepo una dimensione più grande se il contenuto del div lo richiede?

Io ho provato così:

div.main2 {
					width: 670px;
					height: 100% !important;
					height: 400px;
					...

				}

Ma non funziona per IE 7.

[digitos]

Dunque l'unico modo funzionante su qualsiasi browser per creare un div alto 1px è inserire all'interno del div un'immagine trasparente alta 1pixel e larga quanto vuoi.

A mio modo di vedere è l'unico metodo che viene interpretato in egual modo su qualsiasi browser.

IE supporta come altezza minima di un <div> 2pixel. Sotto non è possibile scendere.
Il trucchetto del font-size:0 o del line-height:0 (in realtà non necessario) è valido per i div alti da 2pixel a 14pixel.
Per quanto riguarda Firefox è possibile impostare anche <div> alti 1pixel o addirittura 0 pixel (non avrebbe molto senso...)

Quindi, ribadisco, l'unico metodo, magari non così corretto dal punto di vista semantico, è l'uso di un'immagine trasparente.

Continuerò ad operarmi in questo senso se non si decide una volta per tutte un hr che funzioni correttamente.

[digitos]

Originariamente inviato da jollyfish
<div style="height:1px; background-color:#009900; overflow:hidden;"></div>

overflow:hidden; Significa che anche se il contenuto del DIV è più grande del DIV stesso quest'ultimo non si allarga per mostrarcelo.

Questa soluzione l'avevo provata anch'io ma abbandonata perchè, è vero che crea un div alto 1pixel ma in realtà su IE 6 (mi sembra) occupa uno spazio maggiore sebbene venga mostrata correttamente una riga.