Wie kann ich richtig ausrichten, um in einem div in einer Tabellenzelle für IE 7 zu arbeiten?

Float:right angegeben für eine div innerhalb einer Tabelle Zelle scheint keine Auswirkungen in IE. Ich habe auch versucht, text-align rechts, unter anderem die Schicht Inhalt nach rechts auszurichten, aber ohne Erfolg in IE 7.Wie kann ich richtig ausrichten, um in einem div in einer Tabellenzelle für IE 7 zu arbeiten?

CSS-Schnipsel:

.workloadcell { 
    background-color: #E6D7E9; 
    padding: 0px; 
    width: 14px; 
    height: 16px; 
    text-align: right; 
} 

div.workload { 
    background-color: #E6D7E9; 
    text-align: right; 
    width: 14px; 
    float: right; 
}

HTML-Schnipsel:

<td class="workloadcell"> 
    <div class="workload"> 
     1 
    </div> 
</td>

Sowohl die HTML und die CSS-Validierung, und in Firefox richtet sich der Text richtig aus, wie es sollte. Wenn Sie den vollständigen Code durch Kopieren/Einfügen es testen wollen, dann ist es hier:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1"> 
     <title>Table Test</title> 
     <style type="text/css"> 
td { 
    border: 1px solid black; 
} 


.workloadcell { 
    background-color: #E6D7E9; 
    padding: 0px; 
    width: 14px; 
    height: 16px; 
    text-align: right; 
} 



div.workload { 
    background-color: #E6D7E9; 
    text-align: right; 
    width: 14px; 
    float: right; 
} 
</style> 
    </head> 



<body> 
     <table> 
      <tr> 
       <td> 
        &nbsp; 
       </td> 
       <td colspan="4"> 
        <div> 
         2008 
        </div> 
       </td> 
      </tr> 
      <tr> 
       <td> 
        &nbsp; 
       </td> 
       <td> 
        <div> 
         Q1 
        </div> 
       </td> 
       <td> 
        <div> 
         Q2 
        </div> 
       </td> 
       <td> 
        <div> 
         Q3 
        </div> 
       </td> 
       <td> 
        <div> 
         Q4 
        </div> 
       </td> 
      </tr> 
      <tr> 
       <td> 
        workload forecast 
       </td> 
       <td class="workloadcell"> 
        <div class="workload"> 
         1 
        </div> 
       </td> 
       <td class="workloadcell"> 
        <div class="workload"> 
         2 
        </div> 
       </td> 
       <td class="workloadcell"> 
        <div class="workload"> 
         2 
        </div> 
       </td> 
       <td class="workloadcell"> 
        <div class="workload"> 
         2 
        </div> 
       </td> 
      </tr> 
      <tr> 
       <td> 
        actual workload 
       </td> 
       <td class="workloadcell"> 
        <div class="workload"> 
         3 
        </div> 
       </td> 
       <td class="workloadcell"> 
        <div class="workload"> 
         3 
        </div> 
       </td> 
       <td class="workloadcell"> 
        <div class="workload"> 
         2 
        </div> 
       </td> 
       <td class="workloadcell"> 
        <div class="workload"> 
         3 
        </div> 
       </td> 
         </tr> 
     </table> 
    </body> 
</html>

(Ich weiß, dass die CSS sind in dem Sinne nicht optimal ist, dass die Klassendeklarationen für mehrere Elemente wiederholt werden, aber bitte don Wenn das Problem nicht relevant ist, kommentieren Sie dies.

Quelle

2009-03-23 simon

Es sollte die Art und Weise Sie arbeiten müssen es (oder die Art und Weise alexmeia schon sagt).

Aber (dies ist IE), die Header Q1, Q2, etc. schieben die Tabelle Spalten breiter als die 14 px, die Sie angefordert haben.

Die Spalten sind innerhalb der von Ihnen definierten 14px richtig ausgerichtet, aber die divs bewegen sich im IE nicht nach rechts. (Das div weilt im 14px dafür definiert, obwohl die Spalte tatsächlich breiter als 14px)

Um dies zu veranschaulichen, können Sie entweder machen die Breite sagen 28px oder ändern die Farbe einer der Hintergründe die Differenz zwischen dem TD und dem div innerhalb in.

.workloadcell { 
    background-color: #E6D7E9; 
    padding: 0px; 
    width: 14px; 
    height: 16px; 
    text-align: right; 
} 

div.workload { 
    background-color: #E6EEE9; 
    text-align: right; 
    width: 14px; 
    float: right; 
}

die Lösung für IE nachzuweisen ist, entweder nicht oder mit einer Breite definiert es breit genug, um den Header zu empfangen.

Quelle

2009-03-23 16:33:35 Traingamer

Vielen Dank dafür. Hat mir geholfen, einen Fehler aufzuspüren, während ich heute einen Termin hatte. –

Sie müssen keine Regeln für div.workload deklarieren. verwenden diese Regeln und alles gut funktioniert:

td { 
    border: 1px solid black; 
    } 

.workloadcell { 
    background-color: #E6D7E9; 
    padding: 0px; 
    width: 20px; 
    height: 16px; 
    text-align: right; 
    }

Quelle

2009-03-23 16:05:23 alexmeia

Danke, es funktioniert. Es scheint jedoch zu funktionieren, da die Breite von 14px auf 20px erhöht wird. Ich habe das Padding bereits als 0px für die Tabellenzelle angegeben, daher könnte man meinen, dass auch bei 14px Wide Cell genug Platz für Rechtsausrichtung sein sollte. Gibt es dafür eine Erklärung? – simon

Es ist erwähnenswert, dass IE, vor allem v6 auf SP1 vor XP, und ältere Windows schwerwiegende Rendering-Probleme hat, wenn Sie Tabellen innerhalb divs und divs innerhalb dieser Tabellen mischen. Sobald Sie eine bestimmte Komplexität & Nesting überschreiten, können Sie eine leere/weiße Seite erhalten.

Wenn Sie den Textinhalt in bestimmten Zellen richtig ausrichten müssen, würde ich vorschlagen, eine zusätzliche Klassendeklaration zum td-Tag hinzuzufügen, nicht ein div zu verschachteln. Ich würde auch vorschlagen, IE8 zu versuchen und zu sehen, ob das Problem weiter besteht. Sie haben nicht erwähnt, welche Versionen Sie unterstützen müssen.

Quelle

2009-03-23 17:00:17 Tracker1

Wie kann ich richtig ausrichten, um in einem div in einer Tabellenzelle für IE 7 zu arbeiten?

Antwort

Verwandte Themen