✔ List-item bug im IE?

Status
Nicht offen für weitere Antworten.
T

T3ch

Erfahrenes Mitglied
Guten Abend.

Ich habe mal wieder ein bisschen mit CSS probiert und heute ist mir folgendes aufgefallen:

Nachdem ich zwei Listentypen (ul, dl) kombiniert hatte und mir dann die Seite im IE angeschaut hatte, fiel mir auf, dass zwischen dem ersten und dem zweiten Listenelement eine Lücke war. Ich habe es schon mit den Eigenschaften margin,padding,white-space,line-height... versucht, jedoch tut sich leider nichts.

Könnt ihr mir bitte weiterhelfen?

Hier der Ansatz:

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
 <head>
  <title>Wilkommen!</title>
  <style type="text/css">
ul{
	list-style-type:none;
	margin:0;
	padding:0;
}
  </style>
 </head>
 <body>
  <div>
   <ul>
    <li>test</li>
    <li>
     <dl>
      <dt>1</dt>
      <dt>2</dt>
     </dl>
    </li>
   </ul>
  </div>
 </body>
</html>

Greetz
 
Hi,

ich glaub die einzige Lösung für den IE wird wohl so aussehen:

PHP: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
 <head>
  <title>Wilkommen!</title>
  <style type="text/css">
 *{ margin:0;
 padding:0;}
 ul{
 list-style-type:none;
 margin:0;
 padding:0;
}
*html dl.dada {
margin:-20px 0 0 0;
}
  </style>
 </head>
 <body>
  <div>
   <ul>
   <li>test</li>
   <li>
   <dl class="dada">
   <dt>1</dt>
   <dt>2</dt>
   </dl>
   </li>
   </ul>
  </div>
 </body>
</html>

mit * html für IE und margin für dl Tag.
 
Danke für deine Antwort.
Wie es aussieht ist es wirklich (mal wieder) ein IE bug.
Naja, damit müssen wir wohl leben ;)

Greetz
 
So funktioniert es auch:
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type"
            content="application/xhtml+xml; charset=UTF-8" />
        <title>Wilkommen!</title>
        <style type="text/css">
            ul{
                list-style-type:none;
                margin:0;
                padding:0;
            }
        </style>
    </head>
    <body>
        <div>
            <ul>
                <li>test
                    <dl>
                        <dt>1</dt>
                        <dt>2</dt>
                    </dl>
                </li>
            </ul>
        </div>
    </body>
</html>
Bleibt nur die Frage nach der semantischen Bedeutung:
Sind die Elemente der dl Unterpunkte von "test", so halte ich diese Variante für semantisch richtig.
Haben die Elemente der dl keinen übergeordneten Punkt, so wäre die Variante aus Deinem ersten Post die richtige.

Gruß hpvw
 
Ich danke auch dir für deinen Vorschlag, jedoch war genau das mein Problem.
Die Definitionslisten sind eben nicht der Unterpunkt von "test".
Das, was ich mal als bug bezeichnet habe, ist ja die Tatsache, dass der IE eine Zeile für ein Listenelement festlegt, das ich für die Definitionsliste benötige.
Da ich diese Zeile leer lasse, bleibt eine leere Zeile.
Außerdem lege ich Wert auf validen Code und deshalb könnte ich nicht einfach den <li> weglassen (das würde dann auch klappen).

Ich hoffe es ist klar geworden, was ich meine ;)

Greetz
 
Hallo,

ich brauche noch einmal eure Hilfe.

Mit der von feh geposteten Lösung ist die Darstellung im IE gut aber Opera stellt es leider auch mit dem ungewünschten Abstand dar.

Gibt es einen CSS-Hack, den man speziell für Opera gebrauchen kann?

Ich habe leider keinen gefunden.
 
Ich habe gerade etwas ähnliches wie feh gemacht und da hat mich doch glatt der CSS-Validator angemeckert. Daraufhin habe ich den hier geposteten Code auch noch mal überprüft. Hier eine valide Möglichkeit, dem IE eigene Styles zu verpassen (geschrieben für das HTML-Markup von feh):
Code: 
  <style type="text/css">
    * {
        margin:0;
        padding:0;
    }
    ul {
        list-style-type:none;
        margin:0;
        padding:0;
    }
    dl.dada {
        /* gemeinsame Angaben und Angaben für IE */
        margin:-20px 0 0 0;
    }
    li > dl.dada {
        /* was eben für den IE gepfuscht wurde, wird
           hier für die anderen Browser korrigiert */
        margin:0;
    }
  </style>
Gruß hpvw

EDIT:
Einen Artikel zu einem Hack für Opera <= 6 und IE Win <= 6 und eine Übersicht zu der Interpretation verschiedener CSS-Konstrukte in einigen Browsern habe ich gefunden.
 
Zuletzt bearbeitet:
@hpvw: der Validator meckert, weil du (wie auch feh in seinem CSS-Modell) kein Leerzeichen zwischen * und html notiert hast ;-]

>>> valides CSS
 
Zuletzt bearbeitet von einem Moderator:
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück