HTML Darstellung - Firefox vs IE 8

[Iron Crusher]

Guten Tag liebe Community,

ich hänge nun schon länger an einem Formatierungsproblem bei einer tabellarischen Darstellung auf einer Internetseite, die ich erstellt habe.

Leider wird der HTML Code von Firefox und Internet Explorer 8 unterschiedlich interpretiert, das Resultat sieht so aus:

Firefox (Optimal):

Internet Explorer 8:

Ich denke man sieht, wo das Problem ist ...

Eine Möglichkeit wäre, die Prozentangaben bei den height Definitionen durch feste px-Werte zu ersetzen, jedoch kann ich das nicht machen, da der Kommentar (bzw. Beschreibung) Bereich über unterschiedlich viele Zeilen verfügen kann, sodass sich der gesamte Kasten vergrößert. Wenn dies geschieht, dann würde das so aussehen:

Man sieht also, feste px-Werte sind hier nicht die Lösung.
Kann mir bitte irgendwer erklären, wie ich dafür sorgen kann, dass der Internet Explorer meine Prozentangaben frisst? Oder mir eine andere Möglichkeit vorschlagen, wie ich die gewünschte Darstellung mit anderen HTML Objekten/anderer Formatierung hinkriege?

Das wäre wirklich sehr nett.
Vielen Dank im Voraus.

Gruß, Andreas

[Gunnar Bittersmann]

@@Iron Crusher:

nuqneH

Ich denke man sieht, wo das Problem ist ...

Falsch gedacht.

Qapla'

[Iron Crusher]

@@Iron Crusher:

nuqneH

Ich denke man sieht, wo das Problem ist ...

Falsch gedacht.

Qapla'

Nun gut, ich ging davon aus, dass wenn man die beiden screenshots vergleicht, man auch sieht, was mich an der Darstellung möglicherweise stört. Aber ich erkläre es gerne in meinen Worten:

Der "ID"-Bereich unter dem Namen ("Wheat Production") soll, so wie im Firefox, unten ausgerichtet werden. An der unteren Kante des gesamten Kastens halt.
Beim Internet Explorer ist dies aber nicht der Fall, dort wird der ID-bereich gleich unter den Namen gesetzt. Grund dafür ist, dass die Größe (height: 100%) scheinbar nicht erkannt wird. Lösungen mit margin oder padding wären hier nur angebracht, wenn die Größe des gesamten Kastens statisch und nicht veränderbar wäre, was aber leider nicht zutrifft.

[Gunnar Bittersmann]

@@Iron Crusher:

nuqneH

Ich denke man sieht, wo das Problem ist ...

Falsch gedacht.

Nun gut, ich ging davon aus, dass wenn man die beiden screenshots vergleicht, man auch sieht, was mich an der Darstellung möglicherweise stört.

Ja und? Anhand der Darstellung sieht man kaum die Urache des Problems.

Qapla'

[Iron Crusher]

@@Iron Crusher:

nuqneH

Ich denke man sieht, wo das Problem ist ...

Falsch gedacht.

Nun gut, ich ging davon aus, dass wenn man die beiden screenshots vergleicht, man auch sieht, was mich an der Darstellung möglicherweise stört.

Ja und? Anhand der Darstellung sieht man kaum die Urache des Problems.

Qapla'

Nun gut, dann lassen Sie es mich anders ausdrücken:
"Ich denke man sieht, WAS das Problem ist ..."

Um die Frage auf das "Wo" zu klären, müsste man sich den Quellcode angucken, den ich in einer weiteren Antwort gepostet habe.

[Gunnar Bittersmann]

@@Iron Crusher:

nuqneH

Um die Frage auf das "Wo" zu klären, müsste man sich den Quellcode angucken, den ich in einer weiteren Antwort gepostet habe.

Ja, müsste man. Es liegt an dir, dies zu ändern.

Qapla'

[Iron Crusher]

Ich vergaß den Quellcode:

device.htm  
  
__@__HEADER__@__  
<div class='datatable' id="MeasPoint" style="height: 100%">  
  <table class="MeasuringPoint" height="100%" width="100%">  
    <tr>  
      <td width="20%" style="border-bottom-style: hidden; height: 100%">  
      <table height="100%" width="100%">  
        <tr>  
          <td>  
            <table width="100%" style="border-bottom-style: hidden; height: 100%">  
              <tr>  
                <td colspan="2" id="DeviceName" height="100%">  
                  <b>__@__DEVICENAME__@__ </b>  
                </td>  
              </tr>  
              <tr style="border-bottom-style: hidden; border-top: solid 1px #CCCCCC">  
                <td class="Margin" height="30px"> <b>ID</b> </td>  
                <td class="Margin" height="30px"> __@__ID__@__ </td>  
              </tr>  
            </table>  
          </td>  
        </tr>  
      </table>  
      </td>  
      <td width="65%">  
      <table class="CommentTable" height="43px">  
        <tr>  
          <td id="TextAlignLeft">  
          <div class="Margin">__@__COMMENT__@__</div>  
          </td>  
        </tr>  
      </table>  
      <table width="100%" height="29px">  
        <tr>  
          <td width="37%" height="100%" id="NoBorder" class="nowrap"><b>  
          Calibration Package </b></td>  
          <td id="NoBottomBorder">  
          <table class="MeasPointTableNameAndGroup" width="100%">  
            <tr>  
              <td><b>Name</b></td>  
              <td><b>from Group</b></td>  
            </tr>  
            <tr>  
              __@__CALIBRATION_DATA__@__  
            </tr>  
          </table>  
          </td>  
        </tr>  
        <tr>  
          <td class="MeasPointLowerTable">  
            <center class="Margin"><b>Customer Name</b></center>  
          </td>  
          <td class="MeasPointLowerTable">  
            <center class="Margin">__@__CUSTOMER_NAME__@__</center>  
          </td>  
        </tr>  
        <tr>  
          <td class="MeasPointLowerTable" style="border-bottom-style: none">  
          <center class="Margin"><b>Measuring Point Type</b></center>  
          </td>  
          <td class="MeasPointLowerTable" style="border-bottom-style: none">  
          <center class="Margin">__@__MPT_NAME__@__</center>  
          </td>  
        </tr>  
      </table>  
      <td height="100%" width="15%">  
      <center>  
      <table id="NoBorder" height="100%" width="20%">  
        <tr>  
          <td valign="bottom">__@__EDITDEVICE__@__</td>  
          <td valign="bottom">__@__DATAPACK__@__</td>  
          <td valign="bottom">__@__HISTORY__@__</td>  
        </tr>  
        <tr height="20px">  
        </tr>  
        <tr>  
          <td valign="top">__@__COMMAND__@__</td>  
          <td valign="top">__@__STATUS__@__</td>  
          <td valign="top">__@__DELETEDEVICE__@__</td>  
        </tr>  
      </table>  
      </center>  
      </td>  
    </tr>  
  </table>  
</div>

dazugehörige .css:

  
.datatable table {  
  border-collapse: collapse;  
  background-color: #ffffff;  
}  
  
/******** Verwendet in Device.htm *********/  
.MeasuringPoint {  
  width: 100%;  
  padding: 0px;  
  border: 1px solid #CCCCCC;  
  border-right-style: none;  
  border-left-style: none;  
}  
  
.MeasuringPoint .MeasPointLowerTable {  
  padding: 3px 2px;  
}  
  
.MeasuringPoint td {  
  padding: 0px;  
  text-align: center;  
}  
  
.MeasPointTableNameAndGroup{  
  margin-bottom: -1px;  
}  
  
.MeasPointTableNameAndGroup td{  
  padding: 3px 2px  
}  
  
.MeasPointLowerTable {  
  border: 1px solid #CCCCCC;  
  border-bottom-style: none;  
  border-right-style: none;  
  border-left-style: none;  
  padding: 3px 2px;  
}  
  
#MeasPoint {  
  border: 1px solid #cccccc;  
  border-bottom-style: none;  
}

__@__HEADER__@__ wird dann in php ersetzt mit

<div class="TableHeader"> </div>

in der .css:

.TableHeader {  
  background-image: url(Images/listheader_aqua.gif);  
  width: 100%;  
  height: 16px;  
}

[Gunnar Bittersmann]

@@Iron Crusher:

nuqneH

Ich vergaß den Quellcode:

Eher den Link zu deiner problematischen Seite; es hat wohl niemand Lust, dein Problem erst nachbauen zu müssen.

Qapla'

[Iron Crusher]

@@Iron Crusher:

nuqneH

Ich vergaß den Quellcode:

Eher den Link zu deiner problematischen Seite; es hat wohl niemand Lust, dein Problem erst nachbauen zu müssen.

Qapla'

http://devtest.sensologic.de/site/Administrator/Administrator.php?cmd=Overview

Bitteschön (:

[Gunnar Bittersmann]

@@Iron Crusher:

nuqneH

http://devtest.sensologic.de/site/Administrator/Administrator.php?cmd=Overview
Bitteschön (:

Sagte ich „URI“ oder sagte ich „Link“? Ich sagte „Link“. Also bitteschön:

http://devtest.sensologic.de/site/Administrator/Administrator.php?cmd=Overview

“Login please.” ROTFL.

Qapla'

[Iron Crusher]

@@Iron Crusher:

nuqneH

http://devtest.sensologic.de/site/Administrator/Administrator.php?cmd=Overview
Bitteschön (:

Sagte ich „URI“ oder sagte ich „Link“? Ich sagte „Link“. Also bitteschön:

http://devtest.sensologic.de/site/Administrator/Administrator.php?cmd=Overview

“Login please.” ROTFL.

Qapla'

Ahya, da war was :p
http://devtest.sensologic.de/site/Administrator/Administrator.php?cmd=ManageMeasuringPoints&customerId=7
Username: Admin
Passwort: 0000

[Gunnar Bittersmann]

@@Iron Crusher:

nuqneH

“Login please.” ROTFL.

Qapla'

Ahya, da war was :p
http://devtest.sensologic.de/site/Administrator/Administrator.php?cmd=ManageMeasuringPoints&customerId=7
Username: Admin
Passwort: 0000

“No new events yet” ROTFL.

Wenn du nicht langsam mal irgendwas Brauchbares lieferst, verliere ich meine Lust, in diesen Thread reinzuschauen.

Qapla'

[Iron Crusher]

@@Iron Crusher:

nuqneH

“Login please.” ROTFL.

Qapla'

Ahya, da war was :p
http://devtest.sensologic.de/site/Administrator/Administrator.php?cmd=ManageMeasuringPoints&customerId=7
Username: Admin
Passwort: 0000

“No new events yet” ROTFL.

Wenn du nicht langsam mal irgendwas Brauchbares lieferst, verliere ich meine Lust, in diesen Thread reinzuschauen.

Qapla'

Nachdem du dich eingeloggt hast, solltest du den Link erneut aufrufen.
ADort befindet sich nämlich das, wovon ich im 1. Post Screenshots gemacht habe.
http://devtest.sensologic.de/site/Administrator/Administrator.php?cmd=ManageMeasuringPoints&customerId=7

[EKKi]

Mahlzeit Iron Crusher,

<div class='datatable' id="MeasPoint" style="height: 100%">
  <table class="MeasuringPoint" height="100%" width="100%">
    <tr>
      <td width="20%" style="border-bottom-style: hidden; height: 100%">
      <table height="100%" width="100%">
        <tr>
          <td>
            <table width="100%" style="border-bottom-style: hidden; height: 100%">
              <tr>
                <td colspan="2" id="DeviceName" height="100%">
                  <b>__@__DEVICENAME__@__ </b>

Etwas, das in der ersten Datenzelle der ersten Zeile einer Tabelle, die sich wiederum in der ersten Datenzelle der ersten Zeile einer Tabelle, die in der ersten Datenzelle der ersten Zeile einer Tabelle, die durch etwas gruppiert ist, existiert, befindet, liegt.

Aha.

• Zitat 121

• Zitat 576

• Zitat 1068

• Zitat 1129

• Zitat 1240

• Zitat 1636

• Zitat 1743

MfG,
EKKi

[Iron Crusher]

Mahlzeit Iron Crusher,

<div class='datatable' id="MeasPoint" style="height: 100%">
  <table class="MeasuringPoint" height="100%" width="100%">
    <tr>
      <td width="20%" style="border-bottom-style: hidden; height: 100%">
      <table height="100%" width="100%">
        <tr>
          <td>
            <table width="100%" style="border-bottom-style: hidden; height: 100%">
              <tr>
                <td colspan="2" id="DeviceName" height="100%">
                  <b>__@__DEVICENAME__@__ </b>

Etwas, das in der ersten Datenzelle der ersten Zeile einer Tabelle, die sich wiederum in der ersten Datenzelle der ersten Zeile einer Tabelle, die in der ersten Datenzelle der ersten Zeile einer Tabelle, die durch etwas gruppiert ist, existiert, befindet, liegt.

Aha.

• Zitat 121

• Zitat 576

• Zitat 1068

• Zitat 1129

• Zitat 1240

• Zitat 1636

• Zitat 1743

MfG,
EKKi

Zu schade, ich kann deine Verlinkungen leider nicht ansehen.

Ich bin ein relativer Neuling, was HTML anbelangt. Was soll ich dazu sagen?
Ich weiß es nun mal nicht besser. Ich habe nicht lange gefackelt und habe meine erst beste Idee zur Darstellung dessen, was man auf den Screenshots sieht, umgesetzt. Mit Tabellen. Tabellen in Tabellen in Tabellen.

Ich wäre für konstruktive Kritik, statt solcher sinnloser Spam-Posts, dankbar.
Wie könnte ich die gewünschte Darstellung (siehe Screenshots) denn am besten darstellen, deiner Meinung nach?

Eine Möglichkeit wären divs ... da frage ich mich aber, wie ich vertikale Zentrierung hinkriegen kann, da es dafür keine Eigenschaft gibt. Mit margin-top: kann ich auch nicht arbeiten, da ich feste px werte benötige, um eine 100%ige vertikale Zentrierung zu erreichen. Die Rechnung erfolgt so: margin-top: Wert, wobei Wert = (HöheGesamt/2) - (Höhe des Elementes, das zentriert werden soll / 2). Mit margin-top: 50% funktioniert das dann natürlich auch nicht ...
Und feste px Werte kann ich hier nunmal nicht benutzen, da die Größe des gesamtem Kasten variabel ist, weil die Zeilenanzahl des Kommentar- bzw. Beschreibungsfeldes ebenfalls variabel ist.

Es kann doch nicht sein, dass das ganze so kompliziert ist =/

[Gunnar Bittersmann]

@@Iron Crusher:

nuqneH

Zu schade, ich kann deine Verlinkungen leider nicht ansehen.

Registrieren. Oder "my/" aus den URIs rausnehmen:

• Zitat 121

• Zitat 576

• Zitat 1068

• Zitat 1129

• Zitat 1240

• Zitat 1636

• Zitat 1743

Qapla'

[EKKi]

Mahlzeit Iron Crusher,

Zu schade, ich kann deine Verlinkungen leider nicht ansehen.

Tut mir leid, ich habe leider vergessen, das "/my" aus den Links zu entfernen - und die Forumssoftware tut das bei Links in die Community (in der sich auch die Zitatsammlung befindet) leider nicht automagisch (im Gegensatz zu Forums-internen Links).

Ich bin ein relativer Neuling, was HTML anbelangt. Was soll ich dazu sagen?

Was Gunnar vorschlug.

Ich weiß es nun mal nicht besser.

Das macht es nicht besser. Bevor ich ein Auto baue, eigne ich mir auch Grundkenntnisse über die Funktionsweise von Verbrennungsmotoren, die richtige Montage von Bremsen und vielleicht ein bisschen Design an.

Ich habe nicht lange gefackelt und habe meine erst beste Idee zur Darstellung dessen, was man auf den Screenshots sieht, umgesetzt. Mit Tabellen. Tabellen in Tabellen in Tabellen.

Und dieser Aufbau ist Mist. Ganz extremer Mist sogar. Deswegen verlinkte ich Dir entsprechende Zitate.

Ich verlinke Dir auch gerne die "Einführung in CSS-basierte Layouts".

Wie könnte ich die gewünschte Darstellung (siehe Screenshots) denn am besten darstellen, deiner Meinung nach?

Durch validen, semantisch sinnvollen HTML-Code und entsprechende CSS-Anweisungen.

Eine Möglichkeit wären divs ...

Was hat bloß alle Welt immer mit <div>s? Nur weil man ein <div> (oder mehrere) benutzt, heißt das noch lange nicht, dass der HTML-Code dann besser ist als Tabellenlayout - er kann dann sogar noch schlimmer aussehen.

da frage ich mich aber, wie ich vertikale Zentrierung hinkriegen kann, da es dafür keine Eigenschaft gibt.

Das ist gelogen: in einem Element enthaltenen Text kann man wunderbar http://de.selfhtml.org/css/eigenschaften/ausrichtung.htm#text_align@title=zentrieren. Ein Element selbst kann man durch entsprechend gewählte http://de.selfhtml.org/css/eigenschaften/randabstand.htm#margin@title=Außenabstände wie gewünscht positionieren.

Mit margin-top: kann ich auch nicht arbeiten, da ich feste px werte benötige, um eine 100%ige vertikale Zentrierung zu erreichen.

Wenn Du Dich da mal nicht irrst ... und wenn Deine Besucher ihr Browser-Fenster verkleinern? Dann stimmen Deine schön gewählten absoluten Abstände auf einmal gar nicht mehr. Dein Konzept scheint grundfalsch zu sein.

MfG,
EKKi

[Gunnar Bittersmann]

@@EKKi:

nuqneH

Ich verlinke Dir auch gerne die "Einführung in CSS-basierte Layouts".

404. Die Gänsefüßchen waren berechtigt. ;-)

Du meinst die Einführung in CSS-basierte Layouts.

Ein anderer Lesetip ist Michael Jendryschiks Einführung in XHTML, CSS und Webdesign.

Qapla'

[EKKi]

Mahlzeit Gunnar Bittersmann,

Du meinst die Einführung in CSS-basierte Layouts.

Natürlich meinte ich die ... Argl! Irgendwann schreibe ich mir noch mal was, damit die Links immer stimmen ...

MfG,
EKKi

[Iron Crusher]

Ich weiß es nun mal nicht besser.

Das macht es nicht besser. Bevor ich ein Auto baue, eigne ich mir auch Grundkenntnisse über die Funktionsweise von Verbrennungsmotoren, die richtige Montage von Bremsen und vielleicht ein bisschen Design an.

"Grundkenntnis" .. Definitionssache, wenn du mich fragst. Meinen Wissensstand würde ich schon als "Grundkenntnis" bezeichnen.
Wie gesagt, es mangelt mir an Erfahrung, daher kann ich nicht wirklich nachvollziehen, warum tabellen-layouts so schlimm sind. Es konnte mir bisher keiner wirklich sinnvolle und überzeugende Argumente liefern.
Ich benutze sie immer dann gerne, wenn ich bestimmte Elemente vertikal zentrieren möchte, da es, soweit ich weiß, ohne weiteres (insbesondere bei variablen Größen) mit anderen HTML Elementen nicht möglich ist.

Wie könnte ich die gewünschte Darstellung (siehe Screenshots) denn am besten darstellen, deiner Meinung nach?

Durch validen, semantisch sinnvollen HTML-Code und entsprechende CSS-Anweisungen.

Konkretes Beispiel? Empfehlung bezüglich bestimmten HTML Elementen, die ich in diesem Fall anwenden sollte?

da frage ich mich aber, wie ich vertikale Zentrierung hinkriegen kann, da es dafür keine Eigenschaft gibt.

Das ist gelogen: in einem Element enthaltenen Text kann man wunderbar http://de.selfhtml.org/css/eigenschaften/ausrichtung.htm#text_align@title=zentrieren. Ein Element selbst kann man durch entsprechend gewählte http://de.selfhtml.org/css/eigenschaften/randabstand.htm#margin@title=Außenabstände wie gewünscht positionieren.

Du scheinst mich nicht richtig verstanden zu haben. Ich rede von vertikaler Ausrichtung. Was du mir verlinkt hast bezieht sich auf horizontale Ausrichtung. Zudem ist die vertikale Zentrierung eines Elementes nur dann möglich, wenn das Mutterelement feste Größen hat. Sind die Größen variabel, müssen %-Werte daher. Und bei Prozentwerten kriegt man, je nach Auflösung und Größe des Browser-Fensters, nie exakte Zentrierungen hin.

[EKKi]

Mahlzeit Iron Crusher,

"Grundkenntnis" .. Definitionssache, wenn du mich fragst. Meinen Wissensstand würde ich schon als "Grundkenntnis" bezeichnen.

<http://de.selfhtml.org/css/layouts/einfuehrung.htm@title=Dann erweitere Deine Kenntnisse.> Insbesondere, wenn sie - ausgehend von Deinem Tabellenlayout - sich auf dem Stand des letzten Jahrtausends befinden.

"Wer aufhört, besser werden zu wollen, hört auf, gut zu sein."

Wie gesagt, es mangelt mir an Erfahrung, daher kann ich nicht wirklich nachvollziehen, warum tabellen-layouts so schlimm sind. Es konnte mir bisher keiner wirklich sinnvolle und überzeugende Argumente liefern.

Suche in der Forumssuche nach "Tabellenlayout". Suche in der Zitatsammlung nach "Tabellenlayout". Du wirst viele gute Argumente dagegen und einen Haufen Links, die sich damit beschäftigen, finden.

Das Hauptargument ist IMHO aber: Tabellen für das Layout zu missbrauchen, ist allein aus dem Grund falsch, weil sie nicht dafür gedacht sind. Tabellen sind dazu da, um tabellarische Daten darzustellen. Ganz einfach.

Ich benutze sie immer dann gerne, wenn ich bestimmte Elemente vertikal zentrieren möchte, da es, soweit ich weiß, ohne weiteres (insbesondere bei variablen Größen) mit anderen HTML Elementen nicht möglich ist.

Wo möchtest Du welche Element vertikal zentrieren? Was spricht gegen http://de.selfhtml.org/css/eigenschaften/ausrichtung.htm#vertical_align@title=vertical-align? Ansonsten: zeige bitte entweder eine aussagekräftige Zeichnung oder konkreten HTML-Code mit Elementen, die Du auf eine bestimmte Weise positionieren willst.

Wie könnte ich die gewünschte Darstellung (siehe Screenshots) denn am besten darstellen, deiner Meinung nach?

Durch validen, semantisch sinnvollen HTML-Code und entsprechende CSS-Anweisungen.

Konkretes Beispiel?

Ich kann/darf mich von hier aus (Firmennetz) nicht bei irgendwelchen dubiosen anderen Firmennetzwerken anmelden/einloggen usw. Wenn sich Dein Problem bis heute abend nicht in Wohlgefallen aufgelöst hat, kann ich aber mal schauen, was ich von zuhause erreichen kann.

Empfehlung bezüglich bestimmten HTML Elementen, die ich in diesem Fall anwenden sollte?

Nimm die Elemente, die jeweils für bestimmte Dinge gedacht sind:

<h1> - <h6> für Überschriften,

<p> für Absätze,

<table> (samt Inhalt) für tabellarische Daten,

<ul> für ungeordnete Listen,

<ol> für geordnete Listen,

<a> für Links (und nur für Links!),

<button> für Knöpfe,

<div> um bestimmte andere Elemente zusammenzufassen bzw. zu gruppieren - und nur dann, wenn sich kein anderes, semantisch sinnvolleres Element findet!

... usw.

Was ist daran so schwer?

Du scheinst mich nicht richtig verstanden zu haben. Ich rede von vertikaler Ausrichtung.

Stimmt, das hatte ich falsch verstanden. Den richtigen Link zu "vertical-align" findest Du weiter oben.

Was du mir verlinkt hast bezieht sich auf horizontale Ausrichtung. Zudem ist die vertikale Zentrierung eines Elementes nur dann möglich, wenn das Mutterelement feste Größen hat.

Wie kommst Du darauf?

Sind die Größen variabel, müssen %-Werte daher. Und bei Prozentwerten kriegt man, je nach Auflösung und Größe des Browser-Fensters, nie exakte Zentrierungen hin.

Wie kommst Du darauf?

MfG,
EKKi

[Iron Crusher]

Mahlzeit Iron Crusher,

"Grundkenntnis" .. Definitionssache, wenn du mich fragst. Meinen Wissensstand würde ich schon als "Grundkenntnis" bezeichnen.

<http://de.selfhtml.org/css/layouts/einfuehrung.htm@title=Dann erweitere Deine Kenntnisse.> Insbesondere, wenn sie - ausgehend von Deinem Tabellenlayout - sich auf dem Stand des letzten Jahrtausends befinden.

"Wer aufhört, besser werden zu wollen, hört auf, gut zu sein."

Aus diesem Grunde bin ich doch erst hier. Aus Referenzen, Einführungen, Guides, Tutorials oder sonstwas werde ich bei einigen Fragen nicht schlauer, da sie dort nicht beantwortet werden. Um dies zu ändern, muss ich mich an andere Menschen wenden, die Ahnung davon haben.

Ich benutze sie immer dann gerne, wenn ich bestimmte Elemente vertikal zentrieren möchte, da es, soweit ich weiß, ohne weiteres (insbesondere bei variablen Größen) mit anderen HTML Elementen nicht möglich ist.

Wo möchtest Du welche Element vertikal zentrieren? Was spricht gegen http://de.selfhtml.org/css/eigenschaften/ausrichtung.htm#vertical_align@title=vertical-align? Ansonsten: zeige bitte entweder eine aussagekräftige Zeichnung oder konkreten HTML-Code mit Elementen, die Du auf eine bestimmte Weise positionieren willst.

vertical-align habe ich schon vor einiger Zeit probiert, ich weiß nicht mehr genau zu welchem Schluss ich damals gekommen bin, jedenfalls hat das nicht so funktioniert wie ich erhofft hatte. Möglich, dass andere Browser diese Eigenschaft nicht kannten etc.
Zur Zeichnung:

Hier möchte ich gerne den Text "Wheat Production" vertikal in der Zelle (momentan ist es jedenfalls noch eine Tabellenzellen, vermutlich ändere ich den Aufbau eh demnächst) ausrichten. Momentan wird das automatisch gemacht, da ich, wie gesagt, eine Tabelle dafür benutze.
Beim IE habe ich jedoch das Problem, dass diese Zelle bei der angabe height:100% kein bisschen größer wird. Und das obwohl alle Mutterelemente Größen definiert haben, die größer sind als diese Zelle.

Empfehlung bezüglich bestimmten HTML Elementen, die ich in diesem Fall anwenden sollte?

Nimm die Elemente, die jeweils für bestimmte Dinge gedacht sind:

<h1> - <h6> für Überschriften,

<p> für Absätze,

<table> (samt Inhalt) für tabellarische Daten,

<ul> für ungeordnete Listen,

<ol> für geordnete Listen,

<a> für Links (und nur für Links!),

<button> für Knöpfe,

<div> um bestimmte andere Elemente zusammenzufassen bzw. zu gruppieren - und nur dann, wenn sich kein anderes, semantisch sinnvolleres Element findet!

... usw.

Was ist daran so schwer?

Das hilft mir leider nicht weiter. Ich weiß immer noch nicht, wie ich die Darstellung, die man auf dem Screenshot sehen kann, am sinnvollsten und logischsten umsetze.
Wenn ich das Template jetzt neu bauen würde, würde ich wahrscheinlich einen div-container nehmen als Grund-Mutterelement. Dort hinein kommen dann lauter andere div-container, die die Informationen enthalten, die ich gerne anzeigen würde (Gruppenname, ID, Name, etc). Hierbei würde ein div-container genau eine Information enthalten, d. h. die Grundidee eines divs etwas zu gruppieren würde missachtet werden.

Was du mir verlinkt hast bezieht sich auf horizontale Ausrichtung. Zudem ist die vertikale Zentrierung eines Elementes nur dann möglich, wenn das Mutterelement feste Größen hat.

Wie kommst Du darauf?

Hat das Mutterelement keine feste Größe, sondern eine, die expandierbar ist, so würde mir ein Angabe wie z. B. margin-top: 20px nichts bringen. Grund dafür ist, dass der Abstand von 20px zwischen Rand und des eigentlichen Elements fix ist, unabhängig von der Größe des gesamten Mutterelements.

Beispiel:
Ich habe ein Quadrat (div) als Mutterelement, wo width undefiniert ist, d. h. gesamte Breite des Browserfensters.
Dort drinne verschachtelt befindet sich zwei weitere Quadrate (ein div, ein img). Das div hat die Werte width: 50% und float:left (damit das nächste Element rechts neben diesem eingefügt wird statt dadrunter). In diesem container befindet sich ein Text, der über unterschiedlich viele Zeilen geht. Sagen wir als Beispiel, dass dieser Text gerade so viele Zeilen hat, dass die Höhe dieses div-containers und die des Mutterelementes genau 100px betragen (Höhe des Mutterelementes hängt bei undefinierter height-Angabe von den verschachtelten Elementen ab).
Jetzt füge in den Muttercontainer ein Bild ein (<img>). Das Bild ist 50px groß und 40 px breit. Zudem verfügt es über margin-left: 50% (um nicht überlappend mit dem ersten div zu sein (wobei ich mir nicht sicher bin, ob das bei img auch erforderlich ist. Texte werden jedenfalls automatisch eingerückt))
Wenn ich nun mit festen px-Werten arbeiten würde, um eine vertikale Zentrierung zu erreichen, würde ich diesem img-Element margin-top: 25px zuweisen.Was aber, wenn der Text, der sich in dem anderen div-container befindet, über mehr Zeilen verfügt? Dann ist der gesamte Kasten höher als 100px und meine margin-top: 25px bringt mir dann auch nichts mehr.

Ich habe dieses Beispiel nicht getestet und gebe keine Garantie auf die Richtigkeit des "Quellcodes" bzw. die Logik. Ich hoffe aber es ist verständlich was ich in meinem Beispiel versuche zu bewerkstelligen und was dort die Schwierigkeit ist.

Kurzgefasst kann man auch sagen:
Feste px-Werte bei Eigenschaften wie margin-top, die einem verschachtelten Element zugewiesen werden, sind dann unnütz, wenn der Abstand zwischen Ober- und Unerkante des Mutterelementes variabel ist.

[EKKi]

Mahlzeit Iron Crusher,

Aus diesem Grunde bin ich doch erst hier. Aus Referenzen, Einführungen, Guides, Tutorials oder sonstwas werde ich bei einigen Fragen nicht schlauer, da sie dort nicht beantwortet werden. Um dies zu ändern, muss ich mich an andere Menschen wenden, die Ahnung davon haben.

Das ist richtig. Diese anderen Menschen wissen aber nur, welche konkreten Probleme Du hast, wenn du diese so genau wie möglich benennst - und dazu Deine bisherigen Lösungsversuche detailliert aufzeigst und Deine Gedanken umfangreich ausformulierst. Funktionierende Glaskugeln und Brain-Web-Interfaces wirst Du hier im Forum leider nicht finden. :-)

vertical-align habe ich schon vor einiger Zeit probiert, ich weiß nicht mehr genau zu welchem Schluss ich damals gekommen bin, jedenfalls hat das nicht so funktioniert wie ich erhofft hatte. Möglich, dass andere Browser diese Eigenschaft nicht kannten etc.

Definiere "andere Browser". Versuche, das damalige Problem nachzustellen. Vielleicht kann Dir auch dabei hier geholfen werden. Ein einfaches "geht aber nicht" hilft nur keinem potentiellen Helfer weiter ...

Das hilft mir leider nicht weiter. Ich weiß immer noch nicht, wie ich die Darstellung, die man auf dem Screenshot sehen kann, am sinnvollsten und logischsten umsetze.

Das kann ich mir - wie gesagt - erst heute abend anschauen.

Wenn ich das Template jetzt neu bauen würde, würde ich wahrscheinlich einen div-container nehmen als Grund-Mutterelement.

Warum? Es gibt <body>.

Dort hinein kommen dann lauter andere div-container,

Warum? Willst Du so viel gruppieren?

die die Informationen enthalten, die ich gerne anzeigen würde (Gruppenname, ID, Name, etc). Hierbei würde ein div-container genau eine Information enthalten, d. h. die Grundidee eines divs etwas zu gruppieren würde missachtet werden.

Richtig. Frage Dich: Was wird auf der Seite dargestellt? Genau eine Gruppe? Ist dann nicht der Gruppenname logisch bzw. semantisch so etwas wie die Überschrift der Seite? Also <h1> drumherum ... usw.

Sind es mehrere Gruppen? Also eine Auflistung? Alles andere außer <ul> oder <ol> wäre in dem Fall falsch.

Oder ist es eine tabellarische Übersicht von Gruppen bzw. deren Eigenschaften (wie ID, Name, ...)? Dann wäre alles andere außer *EINER*(!!!) Tabelle falsch.

Hat das Mutterelement keine feste Größe, sondern eine, die expandierbar ist, so würde mir ein Angabe wie z. B. margin-top: 20px nichts bringen. Grund dafür ist, dass der Abstand von 20px zwischen Rand und des eigentlichen Elements fix ist, unabhängig von der Größe des gesamten Mutterelements.

Ja und? Du willst ein flexibles Layout, das sich der Größe des Anzeigebereichs bzw. der Schriftgröße oder dem Zoom-Faktor des Benutzers anpasst? Dann nutze <http://de.selfhtml.org/css/formate/wertzuweisung.htm#numerische@title=eine passende Maßeinheit>.

Jetzt füge in den Muttercontainer ein Bild ein (<img>). Das Bild ist 50px groß und 40 px breit. Zudem verfügt es über margin-left: 50% (um nicht überlappend mit dem ersten div zu sein (wobei ich mir nicht sicher bin, ob das bei img auch erforderlich ist. Texte werden jedenfalls automatisch eingerückt))
Wenn ich nun mit festen px-Werten arbeiten würde, um eine vertikale Zentrierung zu erreichen, würde ich diesem img-Element margin-top: 25px zuweisen.Was aber, wenn der Text, der sich in dem anderen div-container befindet, über mehr Zeilen verfügt? Dann ist der gesamte Kasten höher als 100px und meine margin-top: 25px bringt mir dann auch nichts mehr.

Versuch doch mal Folgendes:

img {  
  position:   relative;  
  top:        -25px;  
  margin-top: 50%;  
}

Das sollte das Bild in seinem umgebenden Element ausgehend von einer vertikalen Zentrierung 25px (die halbe Bildhöhe) nach oben verschoben darstellen. Wenn's so direkt nicht klappt, probiere entsprechend ein wenig herum.

Feste px-Werte bei Eigenschaften wie margin-top, die einem verschachtelten Element zugewiesen werden, sind dann unnütz, wenn der Abstand zwischen Ober- und Unerkante des Mutterelementes variabel ist.

Jein. Es kommt darauf an, um welche Kindelemente es sich handelt, was sie beinhalten und wie sie dargestellt werden.

MfG,
EKKi

[Gunnar Bittersmann]

@@EKKi:

nuqneH

Wenn ich das Template jetzt neu bauen würde, würde ich wahrscheinlich einen div-container nehmen als Grund-Mutterelement.

Warum? Es gibt <body>.

Und es gibt 'html'. Und es gibt dieses Zitat #1287 von at.

Qapla'

[Iron Crusher]

@@EKKi:

nuqneH

Wenn ich das Template jetzt neu bauen würde, würde ich wahrscheinlich einen div-container nehmen als Grund-Mutterelement.

Warum? Es gibt <body>.

Und es gibt 'html'. Und es gibt dieses Zitat #1287 von at.

Qapla'

Leider besteht meine Seite nicht nur aus dem, was auf den Screenshots zu sehen ist.
Ich habe eine Navigation, einen Header und einen Content Bereich. Mittels <body> erreiche ich da also nicht viel.

[EKKi]

Mahlzeit Iron Crusher,

Leider besteht meine Seite nicht nur aus dem, was auf den Screenshots zu sehen ist.

Das ist schon klar.

Ich habe eine Navigation, einen Header und einen Content Bereich. Mittels <body> erreiche ich da also nicht viel.

Das hat ja auch nie jemand behauptet. Es ist nur meistens nicht besonders hilfreich, wenn man in einem akuten Anfall von Divitis seine gesamte(n) Seite(n) mit Tausenden ineinander verschachtelten nichtssagenden Elementen vollstopft - um dann kurz darauf die Orientierung zu verlieren und gar nicht mehr zu wissen, welches konkrete Element nun eigentlich was bewirkt.

Ein syntaktisch und semantisch korrekter Aufbau mittels der Elemente, die für bestimmte Dinge gedacht sind, ist die Grundlage von allem. Dazu gehört z.B. auch, dass man die Elemente <html> und <body> durchaus "umstylen" kann.

MfG,
EKKi

[IronCrusher]

Mahlzeit Iron Crusher,

Leider besteht meine Seite nicht nur aus dem, was auf den Screenshots zu sehen ist.

Das ist schon klar.

Ich habe eine Navigation, einen Header und einen Content Bereich. Mittels <body> erreiche ich da also nicht viel.

Das hat ja auch nie jemand behauptet. Es ist nur meistens nicht besonders hilfreich, wenn man in einem akuten Anfall von Divitis seine gesamte(n) Seite(n) mit Tausenden ineinander verschachtelten nichtssagenden Elementen vollstopft - um dann kurz darauf die Orientierung zu verlieren und gar nicht mehr zu wissen, welches konkrete Element nun eigentlich was bewirkt.

Ein syntaktisch und semantisch korrekter Aufbau mittels der Elemente, die für bestimmte Dinge gedacht sind, ist die Grundlage von allem. Dazu gehört z.B. auch, dass man die Elemente <html> und <body> durchaus "umstylen" kann.

MfG,
EKKi

Wohl wahr (:
Allgemein ist mir durch dieses und ein anderes Projekt aufgefallen, was man machen sollte und was nicht. Was sinnvoll ist, und wovon man eher abraten kann.
In meinem Beispiel habe ich zwar Daten, die ich gut tabellarisch darstellen könnte, jedoch habe ich mich dazu entschlossen diese "Tabelle" ein wenig "moderner", also fernab des typischen Tabellenmodels, zu gestalten.

Mein Problem konnte ich dank der Ansätze hier lösen.
Letzlich ist der Code immer noch hässlich und er gefällt mir gar nicht, allerdings habe ich auch keine Zeit für große Änderungen.
Was ich getan habe: Struktur, Position und Aufbau der verwendeten Tabellen geändert. Hier und dort colspan und rowspan.
Da es soweit ich weiß leider keine Möglichkeit gibt Zellen zu spalten, sodass man innerhalb einer Tabellenzelle tatsächlich über mehrere verfügt, habe ich auch weiterhin verschachtelte Tabellen.

Danke für die Hilfe (:

[EKKi]

Mahlzeit Iron Crusher,

vertical-align habe ich schon vor einiger Zeit probiert, ich weiß nicht mehr genau zu welchem Schluss ich damals gekommen bin, jedenfalls hat das nicht so funktioniert wie ich erhofft hatte. Möglich, dass andere Browser diese Eigenschaft nicht kannten etc.

Hast Du da mittlerweile genauere Informationen für uns? Was genau hast Du wie probiert?

Zur Zeichnung:

Hier möchte ich gerne den Text "Wheat Production" vertikal in der Zelle (momentan ist es jedenfalls noch eine Tabellenzellen, vermutlich ändere ich den Aufbau eh demnächst) ausrichten.

Das sollte mittels "vertical-align" in jedem halbwegs aktuellen Browser problemlos funktionieren.

Beim IE habe ich jedoch das Problem, dass diese Zelle bei der angabe height:100% kein bisschen größer wird.

"height: 100%" bei welchem Element? Der Zelle selbst? Und wieso "größer wird"?

Eine andere Frage wäre, ob die beiden darunter vorkommenden Zellen mit "ID" bzw. "18" als Inhalt nicht auch schlicht und ergreifend eine Zeile mit den "Measuring Point Type"-Informationen eingehen können?

Vereinfacht:

<table>  
  <tr>  
    <th colspan="2" rowspan="4">Wheat production</th>  
    <td>Wheat production at senso 1</td>  
    <td rowspan="5">[Grafiken]</td>  
  </tr>  
  <tr>  
    <th rowspan="2">Calibration package</th>  
    <th>Name</th>  
    <th>from Group</th>  
  </tr>  
  <tr>  
    <td>N/A</td>  
    <td>N/A</td>  
  </tr>  
  <tr>  
    <th>Customer Name</th>  
    <td colspan="2">Senso 1</td>  
  </tr>  
  <tr>  
     <th>ID</th>  
     <td>18</td>  
     <th>Measuring Point Type</th>  
     <td colspan="2">N/A</td>  
  </tr>  
</table>

Probier mal ein bisschen herum ...

MfG,
EKKi