[HR] Eliminare spazio top e bottom

[mosquito70]

Ciao a tutti,
ho del codice html su cui devo fare alcune modifiche, che mi constringono ad eliminare/recuperare dello spazio in eccesso.

Sto cercando in particolare ad agire, senza trasvolgere il codice esistente, su le linee HR impostate in questo modo

MyFile.WriteLine(" hr { ")
MyFile.WriteLine(" border: 0; ")
MyFile.WriteLine(" width: 98%; ")
MyFile.WriteLine(" } ")

....

MyFile.WriteLine(" <tr> ")
MyFile.WriteLine(" <td width=""100%"" colspan=""2""> <hr width=""98%""></td> ")
MyFile.WriteLine(" </tr> ")

Dove "MyFile.WriteLine" indica la scrittura di un file in linguaggio asp.

Il risultato attuale è del tipo, indicato nella figura. Vorrei appunto diminuire, anche se di poco l'interlinea tra il testo presente sopra e sotto l'HR
Ho provato eliminando quello relativo alle due righe di testo, ma non trovo alcun risultato.

[copsteve]

L'asp non lo conosco ma prova ad impostare sul tag <hr>
margin: 0;
padding: 0;


Ciauz

[mosquito70]

Originariamente inviato da copsteve
L'asp non lo conosco ma prova ad impostare sul tag <hr>
margin: 0;
padding: 0;


Ciauz

Grazie, ma non funziona lo stesso. Rimangono gli stessi spazi. Forse dipende dallo spazio interno alla cella?
Come potrei fare per applicare a solo quella cella che ho postato (la <td>...</td> per intenderci) una formattazione adeguata a risolvere il mio problema.

Si può fare una cosa del tipo
<tdhr>....</tdhr>
definendo l'appropriato CSS, senza però dover ridefinire l'attributo <table> e <tr>?

Comunque, la modifica (non funzionante) l'ho scritta così

MyFile.WriteLine(" hr { ")
MyFile.WriteLine(" border: 0; ")
MyFile.WriteLine(" width: 98%; ")
MyFile.WriteLine(" margin: 0; ")
MyFile.WriteLine(" padding: 0; ")

Per quel che riguarda il codice asp, considera che MyFile.WriteLine non fa altro che scrivere un file html, inserendo il testo messo tra parentesi.
Creo semplicemente un file .html con del codice CSS e HTML, tale da visualizzarmi un testo, abbastanza complesso.

[Mich_]

NOTA1: Quando posti in questa sezione, dovresti postare il codice che arriva al brwoser. Il sorgente ASP (o altro linguaggio del server) non serve e genera confusione.

NOTA2: Quando posti del codice, usa i tag appositi per formattarlo ([ code ] oppure [ php ] - senza gli spazi, naturalmente): in tal caso il codice rispetta le indentazioni e gli spazi e risulta molto piu` leggibile.

In IE (quirks mode), per avere un blocco di pochi px in altezza, devi sempre specificare:
font-size: 0; /* oppure 1px */
Infatti tale browser non ammette blocchi piu` bassi del font, anche se non contengono scritte.

[mosquito70]

Grazie della risposta e scusate per non aver utilizzato i tag giusti.

Però non ho capito dove devo inserire il "font-size"

L'ho messo in questa sezione di codice, ma non funziona

hr { 
      border: 0; 
      width: 98%; 
      font-size: 0; 
      margin: 0; 
      padding: 0; 
    }

[Mich_]

Quello va bene.
Devi anche definire il blocco di altezza opportuna. Aggiungi anche:
height: 3px; /* o quanto ritieni giusto */

[robbi_gallo]

prova ad impostare anche il:

line-height: ..px;


hr {

line-height: ..px;


border: 0;
width: 98%;
font-size: 0;
margin: 0;
padding: 0;
}

[mosquito70]

Ci sono quasi

Allora...

Il codice che ho inserito è il seguente

    hr {
        line-height: ..px;
        border: 0;
        width: 98%;
        font-size: 0;
        margin: -5px;
        padding: 0;
        height: 1px;
    }

Questo mi permette di avere il tag "<hr>" più spostato verso l'alto, mentre la distanza con la riga inferiore aumenta, mantenendo quindi lo spazio totale (ovvero riga sopra - hr - riga sotto) invariato.

Come fare per "avvicinare la riga sotto (ovvero quella che presenta la scritta "Gara")?

Il codice che creo per questa parte, nel complesso è il seguente

    <td width="100%" class="txtenteindi" colspan="2"> Corso Roma  - </td>
  </tr>
  <tr>
    <td width="100%" colspan="2"> <hr width="98%"></td>
  </tr>
  <tr>
 <td width="18%"  class="txtlabe">Gara:</td>

dove

.txtlabe
{
    FONT-SIZE: 10px;
    COLOR: #333333;
    LINE-HEIGHT: 11px;
    FONT-STYLE: oblique;
    FONT-FAMILY: Arial, Verdana, Helvetica
}

[mosquito70]

Purtroppo è urgente

Avete qualche suggerimento?

Grazie mille in anticipo

[Mich_]

Se hai necessita` di usare un margine negativo, puo` essere che ci sia un margine nel blocco superiore, o comunque qualcosa che lo fa espandere.

Comunque dal coidce postato si arguisce che stai sbagliando la marcatura (codice HTML): infatti le tabelle vanno usate unicamente per inserire dati tabellari (con relazione di riga E colonna), mentre la tua tabella sembra usata per la formattazione.

Chiaramente usare i tag in modo non-semantico porta difficolta` nella loro formattazione.

Altro problema (che ti da` problemi cross-browser):
usi formattazione realizzata mediante attributi HTML: questo contrasta con la formattazione CSS, e impedisce di funzionare correttamente.

Conclusione:
Ti consiglio di rivedere completamente il layout della pagina: sono convinto che alla fine risparmi un mucchio di tempo. Ci sono raccolte di layout realizzati con solo CSS da cui prendere spunto. Alcune di tali raccolte sono citate tra i "link utili" del forum.