[CSS] IE messes up <ul>-semantiek

[moozzuzz]

Hoi,

Ik ben bezig om enkele oude pagina's aan te passen van basic-CSS-gebruik naar iets geavanceerder en vooral semantisch juistere pagina's.

oud --> nieuw

Ik wil een discografie opbouwen aan de hand van lijsten en heb hiervoor deze structuur voor opgebouwd:

HTML:

<ul class="discography">
<li class="release" id="B1215">
    <ul class="release">
    <li class="release_title">&nbsp; (12&quot;, B1215, aug 1991)</li>
    <li class="release_pseudonyme">by Musicology</li>
    <li class="release_tracklist">
        <ol class="release_tracklist">
        <li class="release_tracklist_track">tracktitle</li>
        <li class="release_tracklist_track">tracktitle</li>
        <li class="release_tracklist_track">tracktitle</li>
        <li class="release_tracklist_track">tracktitle</li>
        </ol>
    </li>
    <li class="notes">Notes:
        <ul class="notes">
        <li class="note">All black vinyl</li>
        <li class="note">...</li>
        <li class="note">...</li>
        <li class="note">Copyright &copy;1991 Third Eye Music</li>
        </ul>
    </li>
    </ul>
</li>
</ul>

JavaScript:

/* stripped to basic */
ul, ol, li {padding: 0; margin: 0; }
ul.discography {list-style-type: none; }
...

IE6 heeft nu de vervelende eigenschap om nog steeds een topmarge / regel (ik kan em selecteren + afhankelijk van font-size) voor de <ul> te plaatsen indien het eerste <li> element opnieuw een lijst is (zonder dat er andere html tussen kwam.

Dus in geval van <ul class="release"> en <ol class="release_tracklist"> maar niet bij <ul class="notes">.

Is dit een bug en hoe krijg ik dit opgelost? Met font-size: 0pt zou het in principe zo goed als onzichtbaar zijn, doch dat vind ik wel een zeer lelijke oplossing...

\\edit
Als ik de ol.release_tracklist een height: 100% meegeef, vult IE de volledige <li> op waarin de ol.release_tracklist inzit. Echter nu gaat FF vervelend doen (maakt er een blok van 100% screenheight van... )

[ Voor 40% gewijzigd door moozzuzz op 21-07-2006 23:58 ]

[crisp]

whitespace vermijden?

[moozzuzz]

Had ik ook al geprobeerd, maar zonder succes.

[moozzuzz]

Heb het IE-probleem opgelost met een display: inline; toe te voegen aan de ul.release en ol.release_tracklist. Hierdoor plakt IE de lijst wel zoals het hoort in het schema, MAAR nu is het aan FF om het gedeelte dat tot nu toe bij beide browsers perfect ging in de war te gooien:

HTML:

...
    </li>
    <li class="notes">Notes:
        <ul class="notes">
        <li class="note">All black vinyl</li>
        <li class="note">...</li>
        <li class="note">...</li>
        <li class="note">Copyright &copy;1991 Third Eye Music</li>
        </ul>
    </li>
    </ul>
...

Er komt nu een padding boven het gedeelte Notes:, dat voordien er niet was. Door ook ul.notes inline te maken verspringen de markers...

In IE heeft de eerste lijn van tracklisting ook een spatie(?) teveel, ook niet weg te krijgen door alle whitespace weg te halen. (hoe meer ik verander hoe slechter héhé )

[moozzuzz]

Na vele uren frustratie: een <br> doet de truck in IE!

HTML:

<div class="discography_container">
<ul class="release">
<li class="release_title">&nbsp; (12&quot;, B1201, aug 1991)</li>
<li class="release_pseudonyme">by Musicology</li>
<li class="release_tracklist_container"><br> <!-- notice break-element! -->
    <ol class="release_tracklist_list">
        <li class="release_tracklist_track">A1. metropolis</li>
        <li class="release_tracklist_track">A2. obsessed</li>
        <li class="release_tracklist_track">B1. fear of expression</li>
        <li class="release_tracklist_track">B2. telefone 529</li>
    </ol>
</li>
<li class="release_notes_container">Notes:
    <ul class="notes_list">
    <li class="notes_item">650 black vinyl &amp; 300 clear vinyl</li>
    <li class="notes_item">other notes....</li>
    </ul>
</li>
</ul>

JavaScript:

ul, ol, li {font-size: small; padding: 0px; margin: 0px; border: 0px;}

.release                  {list-style-position: outside; margin-bottom: 20px;}

.release_title            {list-style-type: none; }
.release_pseudonyme       {list-style-type: none; }

.release_tracklist_container {font-size: 0px; padding-bottom: 2px; list-style-type: none; list-style-position: outside; }
.release_tracklist_list      {margin-top: 3px;}
.release_tracklist_track     {margin-top: 2px; margin-bottom: 3px; list-style-type: none; }

.release_notes_container  {list-style-type: none; }
.notes_list               {list-style-type: square; padding-left: 1.5em;}
.notes_item               {}

.discography_container    {z-index: 1010; }

Als dus iemand een probleem heeft met teveel padding of margin binnen en vooral boven zijn/haar nested lijst elementen in IE, dan hoeft men maar in de got te gaan zoeken (ziezo alle keywords in één zin ;^)

[funkwurm]

Het probleem is dan opgelost, ik wil je toch graag iets aanraden. Je werkt nu met class-namen die steeds langer worden naarmate de elementen verder genest zijn. In CSS kun je dit juist mooi doen zonder lange class-namen.

Hier staat hetzelfde als jou voorgaande code:

Cascading Stylesheet:

ul, ol, li {
  font-size: small;
  padding: 0px;
  margin: 0px;
  border: 0px;
}

.release {
  list-style-position: outside;
  margin-bottom: 20px;
}

.release .title {
  list-style-type: none;
}
.release .pseudonyme {
  list-style-type: none;
}

.release .tracklist {
  font-size: 0px;
  padding-bottom: 2px;
  list-style-type: none;
  list-style-position: outside;
}
.release .tracklist .list {
  margin-top: 3px;
}
.release .tracklist .list li {
  margin-top: 2px;
  margin-bottom: 3px;
  list-style-type: none;
}

.release .notes {
  list-style-type: none;
}
.release .notes .list {
  list-style-type: square;
  padding-left: 1.5em;
}
.release .notes li {
}

.discography_container {
  z-index: 1010;
}

HTML:

<div class="discography_container">
  <ul class="release">
    <li class="title">&nbsp; (12&quot;, B1201, aug 1991)</li>
    <li class="pseudonyme">by Musicology</li>
    <li class="tracklist"><br> <!-- notice break-element! -->
      <ol class="list">
        <li>A1. metropolis</li>
        <li>A2. obsessed</li>
        <li>B1. fear of expression</li>
        <li>B2. telefone 529</li>
      </ol>
    </li>
    <li class="notes">Notes:
      <ul class="list">
        <li>650 black vinyl &amp; 300 clear vinyl</li>
        <li>other notes....</li>
      </ul>
    </li>
  </ul>
</div>

[moozzuzz]

beetje laat van mij, maar toch bedankt, ik heb het nu zoals jij suggureerde!