<hr /> e CSS: IE da qualche anomalia...

[goat]

Ciao ciao,
sto cercando di mettere un <hr /> per separare dei pacchetti di testo.
Questo il CSS che ho utilizzato:

hr {
    position:relative;
    width:318px;
    height:10px;
    border:0px;
    background-color:#798f11;
    float:left;
    } 

La cosa funziona bene su tutti i browser tranne (manco a dirlo...) su IE. A parte qualche problema di allineamento che risolverò in seguito, IE mi mostra una sorta di effetto ombra intorno al mio <hr />. Come se gli avessi settato un colore chiaro per i bordi right e bottom, e uno più scuro per quelli left e top.
Ho fatto un po' di ricerche via Nerooogle ma niente di utile.
La cosa è risolvibile? Oppure m'invento qualcos'altro?
Grazie,
goat

[goat]

Rincaro la dose: se tolgo border:0px; tutti browser si comportano nella stessa maniera. Ovvero mi fanno vedere il mio <hr /> come se fosse leggermente incavato. Quando rimetto border:0px; tutti i browser, tranne IE, mi eliminano quell'effetto mostrandomi l' <hr /> completamente privo di bordi.

[goat]

Ho provato con border-style:hidden; che funziona ovunque... tranne che su IE.

[Mich_]

Tanto per provare ...
(1) Prova a definire
height: 30px;
e vedi se poi tutti si comportano allo stesso modo

Tanto per provare ...
(2) Mettici anche un
font-size: 1px;

E` noto che IE (quirks mode) non permette alcun blocco piu` piccolo del font.

[goat]

Fatto, ma niente: IE continua a mostrarmi 'sto maledetto bordino.
Ho letto un po' di articoli dove consigliano, per ovviare al problema, l'utilizzo di un <div> che contiene l' <hr />.

[goat]

Aspè aspè! Ci sono riuscito!
Ho usato questo CSS:

hr {
    position:relative;
    width:318px;
    height:10px;
    border:0px;
    background-color:#798f11;
    color:#798f11;
    float:left;
    } 

In definitiva IE ha bisogno anche di color:#798f11, così da colorarmi il fastidioso bordino di default. Ora tutti i browser visualizzano l'<hr /> nella medesima maniera.

Adesso vedo se risolvo le piccole grane con gli allineamenti che mi si presentano in IE...

[goat]

Allora, adesso il CSS appare così:

hr {
    position:relative;
    width:318px;
    height:1px;
    border:0px;
    margin-top:15px;
    margin-bottom:15px;
    background-color:#798f11;
    color:#798f11;
    float:left;
    } 

L'ultimo cruccio che mi rimane da risolvere è il seguente: testo la pagina su IE, FF, Safari ed Opera. Solo e soltanto su IE è come se l'<hr /> avesse un margin bottom maggiore. Su gli altri browser gli allineamenti sono precisi al pixel.
Qualche consiglio su come risolvere 'sta bega?
E' come se <hr /> su IE avesse un margin-bottom impostato di default.
Vado a pappa e poi torno a fare altre prove.
goat

[Mich_]

Rivedi il consiglio sul font-size: IE (credo solo il 6) non permette blocchi piu` piccoli del font-size.

[goat]

Originariamente inviato da Mich_
Rivedi il consiglio sul font-size: IE (credo solo il 6) non permette blocchi piu` piccoli del font-size.

Provo a mettere font-size all'<hr />, ma non cambia assolutamente nulla, nè dandogli valore 1px nè 20px. IE continua a fare di testa sua.
Ho provato anche con line-height ma nisba.
E' un peccato non trovare 'na soluzione.

[goat]

Ok, ho trovato un bel po' di discussioni via internet: da che ho potuto capire si tratta di un bug di IE, quindi la cosa non ha soluzione (al momento).
Se qualcuno riesce a smentirmi, bene.

Intanto provo, mio malgrado, a sostituire gli <hr /> con una gif.