IE6-Sonderbarkeit - erstes Listenelement zu weit eingerückt

Question

CSS ist nicht meine Stärke, und ich bin nicht sicher, was mit meinen Listenelementen im IE6 los ist. Ich möchte, dass sie vertikal ausgerichtet sind, aber das erste Listenelement wird immer um ein oder zwei Pixel nach rechts verschoben, so dass es nicht mehr mit den anderen Mitgliedern der Liste übereinstimmt. Soweit es mich betrifft, sieht diese Liste im IE7/8, FF3 und Chrome 2 (alle unter Windows) gut aus.

So sieht es im IE6 aus... beachten Sie, dass der Eintrag von Vangala nicht richtig eingerückt ist:

Alt-Text http://img254.imageshack.us/img254/8123/ie6liindent.png

Hier ist mein entsprechendes CSS:

.organizer-label {
    float: left;
    width: 145px;
}

.organizer-value {
    margin-left: 150px;
}

.organizer-value ul {
    margin-left: 1em;
    margin-top: 0;
    padding-left: 0;
    padding-top: 0;
    line-height: 1.1em;
}

Hier ist meine entsprechende html:

<div class="organizer-subsection">
  <div class="organizer-label">Committee members:</div>
  <div class="organizer-value">
    <ul>
      <li>Vangala Subrahmanyam, Sai Advantium Pharma Ltd, Pune, India</li>
      <li>Ramaswamy Iyer, Bristol-Myers Squibb, Lawrenceville, USA</li>
      <li>Ragu Ramanathan, Bristol-Myers Squibb</li>
    </ul>
  </div>
</div>

Mache ich etwas Dummes und habe nur Glück, dass es in den meisten Browsern gut aussieht? Was kann ich tun, damit die Liste im IE6 korrekt angezeigt wird?

Answer 1

Sie müssen sich bewerben hasLayout zum div .organizer-value

.organizer-value {
    margin-left: 150px;
    zoom:1;
}

Answer 2

Es ist ein Float-Fehler. Sie können ihn umgehen, indem Sie die ul innerhalb einer Verpackung div etwa so;

<div class="organizer-subsection">
  <div class="organizer-label">Committee members:</div>
  <div class="organizer-value">
    <div>
       <ul>
          <li>Vangala Subrahmanyam, Sai Advantium Pharma Ltd, Pune, India</li>
          <li>Ramaswamy Iyer, Bristol-Myers Squibb, Lawrenceville, USA</li>
          <li>Ragu Ramanathan, Bristol-Myers Squibb</li>
        </ul>
     </div>
   </div>
</div>

und ändern Sie die Definition von .organizer-value wie folgt;

.organizer-value {
    float:left;
}

Floats sind im IE ein Übel (wie alles, was mit CSS auch nur annähernd sinnvoll ist). Das Positive an solchen häufigen Fehlern ist, dass sie ziemlich gut dokumentiert sind. PositionIsEverything ist eine nützliche Website, die bei der Behebung von IE-Anzeigefehlern hilft.

Answer 3

Sieht aus, als wäre in Ihrem CSS etwas faul. Wenn ich das richtig verstanden habe, und ich hoffe, dass ich das habe, möchten Sie die Liste der Ausschussmitglieder direkt rechts neben dem Titel "Ausschussmitglieder" anzeigen lassen

Beim IE6 tendiere ich dazu, die Verwendung von Rändern nach Möglichkeit zu vermeiden, da es dort einige lustige und interessante Fehler für den unachtsamen Entwickler gibt.

Das Folgende kann Ihnen vielleicht helfen, aber ich kann nicht sagen, was es für den Rest Ihrer Seite bedeutet.

.organizer-label {
    float: left;
    width: 145px;
}

.organizer-value {
    padding-left: 5px;
    float: left;
}

.organizer-value ul {
    margin-left: 1em;
    margin-top: 0;
    padding-left: 0;
    padding-top: 0;
    line-height: 1.1em;
} 

Ich hoffe, das hilft

R.

Answer 4

Probieren Sie es aus ".organizer-value { overflow:hidden;float:left;}"

Ich hoffe, das hilft

Answer 5

Desde weitere Frage hier auf SO verweisen die Leute auf die IE7-js-Bibliothek . Es soll dafür sorgen, dass sich der IE6 wie ein standardkonformer Browser verhält, was auch Ihr Problem mit den Abständen beheben könnte