Problema dd con Firefox - IE

**fabiodm75** · 21-06-2006, 12:11

Ciao a tutti,
purtroppo la mia conoscenza dei css avanza in maniera lenta per cola de 'sti due che interpretano a modo lo le cose!

Ho una lista di definizione ora dopo <dt> inserisco le sottovoci con <dd> poi alla dine prima di mettere un nuovo<dt> inserisco questo (che è barra per dare un pò di spazio tra un <dd> e un nuovo <dt>: <dd class="barra"></dd>

il cui codice css è il seguente:

Codice PHP:


            dd.barra {

                margin: 0px;

                padding: 0px; 

                line-height: 1.3em;

                width:100%;  

                background-image: url(../img/linea.gif); 

                background-repeat: repeat-x;

                display: block;

                border: 0;

            }

ora il problema è che IE lo interpreta com e voglio io (anche se sicuramente in maniera errata a come dovrebbe effettivamente essere....) Firefox invece non mi fa vedere assolutamente nulla! Perchè? :master:

Ciao e grazie
Fabio

**Mich_** · 21-06-2006, 14:52

Non ho capito come e` realizzato il codice HTML del <dl> e dei vari <dt> e <dd>.
Manca anche il CSS del <dl> e del <dt>, e la DTD usata.

**fabiodm75** · 22-06-2006, 12:14

Ciao ecco il codice css completo:

Codice PHP:


/* LISTE DEFINIZIONE: MENU' LATERALE SINISTRO */

dl { width:183px}



    dt{

        font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;

        font-size: 11px;

        color: #fff;

        font-weight: Bold;

        margin: 0px 0 0;

        text-align: left;

        margin-left: 3px;

    }



        dd {

            margin: 0;

            padding-left:14px;

            line-height: 1.4;

            background:url(../img/freccia.gif) no-repeat center left;

            margin-left: 3px;

        }



            dd.barra {

                margin: 0px;

                padding: 0px; 

                line-height: 1.3em;

                width:100%;  

                background-image: url(../img/linea.gif); 

                background-repeat: repeat-x;

                display: block;

                border: 0;

            } 



            dd a { text-decoration: none;color: #69F}

            

            dd a:hover { color: #F60}

il codice html:

Codice PHP:


<dl>                            

<dt>Voce 1</dt>

<dd>[url="#"]Aggiungi [/url]</dd>

<dd>[url="#"]Gestione [/url]</dd>

<dd class="barra"></dd>

<dt>Voce 2</dt>

<dd>[url="#"]Aggiungi[/url]</dd>

<dd>[url="#"]Gestione [/url]</dd>

......

infine il doctype:

Codice PHP:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="it" xml:lang="it">

Fabio :master:

**pierofix** · 22-06-2006, 12:22

Prima di pensare al CSS devi essere sicuro che la struttura di markup sia a posto.

Ti ricordo che i marcatori si usano per aggiungere informazioni alle informazioni, non ai fini presentazionali. Se usi un dd allora è perchè devi marcare qualcosa; non puoi lasciarlo vuoto al fine di generare una spaziatura. Altrimenti ricadiamo nello stesso identico errore delle tabelle-layout.

Che ne dici, piuttosto, di assegnare la classe 'barra' (magari scegliendo un nome più descrittivo

) all'ultimo dd, e sistemarla in tal modo?

**Mich_** · 22-06-2006, 12:29

Non credo che si possano inserire piu` <dd> riferiti allo stesso <dt>
<dt> = definition term
<dd> = definition description

Non potresti modificare in

codice:

<dl>                            
  <dt>Voce 1</dt>
  <dd>Aggiungi  

      Gestione </dd>
  <dt>Voce 2</dt>
  <dd>Aggiungi

      Gestione </dd>

La riga per separare va realizzata mediante un bordo (inferiore se applicato al <dd>, superiore se al <dt>, esempio:

codice:

dt{
   font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
   font-size: 11px;
   color: #fff;
   font-weight: Bold;
   margin: 0 0 0 3px;
   text-align: left;
   border: 2px 0 0 0 solid #f00; /* naturalmente dimensione e colore puoi modificarli */
}

**pierofix** · 22-06-2006, 13:13

Per quanto riguarda la logica del codice XHTML concordo con Mich_: avevo ingenuamente sorvolato quell'aspetto nella mia prima veloce analisi.

Discussione: Problema dd con Firefox - IE

Strumenti discussione

Ricerca discussione

Visualizza

Problema dd con Firefox - IE

Permessi di invio