[dl-tag] Verschillende weergave IE en FF

[samo]

Ik ben al een tijdje aan het kloten met een lijstje voor mijn c.v. page. Het is een simpele definiton list:

HTML:

    <dl>
      <dt>consectetuer adipiscing elit</dt>
       <dd>Suspendisse convallis imperdiet neque. </dd>
    </dl>

Cascading Stylesheet:

      dl {
        list-style          : none inside none;
        margin              : 0;
        padding             : 0;
      }
      dl dt {
        width               : 200px;
        float               : left;
        clear               : both;
        border: 1px solid green;
      }
      dl dd {
        width               : 500px;
        clear               : right;
        border: 1px solid red;
      }

zoals iets uitgebreider kan worden gezien op deze link.
Maar als ik deze pagina open krijg ik verschillende dingen te zien in IE en FF, en wat ik ook probeer, ik krijg het niet gelijk.

In IE (6) zie ik:

en in FF zie ik:


Maar als ik dan

Cascading Stylesheet:

  dd {
    float: right;
  }

toepas ziet het er in ie weer niet uit!


Ik snap er echt niks meer van! ik wil dat het wordt weergegeven zoals ie het in den beginne doet: netjes naast elkaar. Breedte van container heb ik, dus float zou best een oplossing zijn...

[ Voor 3% gewijzigd door samo op 16-10-2005 20:37 ]

[Verwijderd]

ff een float: left bij die dd (en eventueel margin: 0)

[samo]

Dat werkt ook niet zoals ik wil.... zie bijvoorbeeld dit linkje. Dus aan de hand daarvan met clear: gespeeld...
In FF werkend maar in IE een ramp:
dit linkje

[Verwijderd]

andere opzet?

code:

dl dd {
width               : 500px;
padding-left: 200px;
margin              : 0;
border: 1px solid red;
}

[/]

[samo]

wederom FF ja, IE zet ze dan (ondanks het verwijderen van clear:) onderelkaar
linkje

[Verwijderd]

/me graaft (heb het toch ooit gedaan)

code:

dl.run-in {
    margin-top: 1em;
}
dl.run-in dt {
    float: left;
    margin: 0;
}
dl.run-in dd {
    margin: 0;
    margin-left: 60px;
    _height: 1%;
}

zoe voor voorbeeld http://www.elfijarz.nl/agenda.htm
die _height was ongetwijfeld om 1 of andere IE bug te omzeilen

(die class kan jij weglaten natuurlijk)

[ Voor 21% gewijzigd door Verwijderd op 16-10-2005 21:28 ]

[samo]

wetend dat het moet kunnen dus mn css maar herschreven naar

Cascading Stylesheet:

      dl {
        margin              : 0;
        padding             : 0;
      }
      dl dt {
        width               : 200px;
        float               : left;
        border              : 1px solid green;
        clear               : both;
      }

      dl dd {
        width                       : 500px;
        float               : left;
        display             : block;
        margin              : 0;
        padding             : 0;
        border              : 1px solid red;
      }

en dan werkt het wel! ik snap niet waarom het nu wel werkt en eerst niet, maar het lijkt te werken. Ik vind het wel gek dat html er zelf standaard 2 block elementen over elkaar heen gooit.
Voor de geinteresseerden: een linkje. En voor de mensen met tijd over: als je mij meer helderheid kan brengen over de oplossing, het zou handig zijn!

[Verwijderd]

samo-arne schreef op maandag 17 oktober 2005 @ 01:21:

en dan werkt het wel!

bij een breder scherm gaat het nog niet helemaal goed

Cascading Stylesheet:

 dl dd {
        border: 1px solid #FF0000;
        float: left;
        clear: right;
        width: 500px;
        margin: 0;
        padding: 0;     
    }
    
    dl {
        margin: 0;
        padding: 0;
        width: 704px;
    }
    
    dl dt {
        border: 1px solid #008000;
        float: left;
        width: 200px;
        margin: 0;
        padding: 0;
    }

Dan wel

[ Voor 7% gewijzigd door Verwijderd op 17-10-2005 08:53 ]