mio: Darstellungs-Problem (trotz vorkehrung)

Hallo, ich arbeite gerade daran gleichen Inhalt wie früher bei
Standard-konformer Darstellung zu erreichen:

---------------------------------------------------------------
HTML-Seite: http://www.globalpolicy.org/eu/de/test.htm

(externes stylesheet: http://www.globalpolicy.org/eu/gpfstyles.css)

---------------------------------------------------------------
Problem: Tabelle in IE höher als firefox, irgendwas stimmt mit
Abständen oder Box-Model nicht. Dabei habe ich schon Padding
durch innere div-elemente umgesetzt, statt in den Tabellen-tags.

CSS-Anmerkungen:

  • 0 padding,margin,border, border-collapse für alle Tabellenelemente.
  • class="SOFTPAD" erzeugt 2px padding.

HTML-Spezifikation: HTML 4.01 Transitional, PC

---------------------------------------------------------------
CODE:
---------------------------------------------------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">

<html>

<head>
<link href="../gpfstyles.css" rel="stylesheet" type="text/css">
</head>

<body>

<!--Portfolio Section Starts Here-->

<table width="100%" style="table-layout:fixed;background-color:#00FFFF">
<tbody>
<tr>
<td rowspan="6" style="width:2%;text-align:right;background-color:#0077ff">
<div class="softpad">
<img src="../images/home/logos/linevert.gif" alt="|" height="120" width="10"></div>
</td>

<td style="width:48%;background-color:#ff77ff">
<div class="softpad">
<a href="http://www.globalpolicy.org/security/index.htm" class="links_black14bold">Security Council</a>
</div>
</td>

<td rowspan="6" style="width:2%;text-align:right;background-color:#ff00ff">
<div class="softpad">
<img src="../images/home/logos/linevert.gif" alt="|" height="120" width="10">
</div>
</td>

<td style="width:48%;background-color:#ff7700">
<div class="softpad">
<a href="http://www.globalpolicy.org/finance/index.htm" class="links_black14bold">UN Finance</a>
</div>
</td>
</tr>

<tr>
<td style="vertical-align:top">
<div class="softpad">
<a href="http://www.globalpolicy.org/socecon/index.htm" class="links_black14bold">Social &amp; Economic Policy</a>
</div>
</td>

<td>
<div class="softpad">
<a href="http://www.globalpolicy.org/wldcourt/index.htm" class="links_black14bold">International Justice</a>
</div>
</td>
</tr>

<tr>
<td style="vertical-align:top">
<div class="softpad">
<a href="http://www.globalpolicy.org/globaliz/index.htm" class="links_black14bold">Globalization</a>
</div>
</td>

<td class="links_black14bold">
<div class="softpad">
<a href="http://www.globalpolicy.org/security/issues/irqindx.htm" class="links_black14">Iraq</a>
</div>
</td>
</tr>

<tr>
<td style="vertical-align:top">
<div class="softpad">
<a href="http://www.globalpolicy.org/nations/index.htm" class="links_black14bold">Nations &amp; States</a>
</div>
</td>

<td>
<div class="softpad">
<a href="http://www.globalpolicy.org/empire/index.htm" class="links_black14bold">Empire</a>
</div>
</td>
</tr>

<tr>
<td style="vertical-align:top">
<div class="softpad">
<a href="http://www.globalpolicy.org/ngos/index.htm" class="links_black14bold">NGOs</a>
</div>
</td>

<td>
<div class="softpad">
<a href="http://www.globalpolicy.org/reform/index.htm" class="links_black14bold">UN Reform</a>
</div>
</td>

<td>
<div class="softpad">&nbsp; </div>
</td>
</tr>

<tr>
<td style="vertical-align:top">
<div class="softpad">
<a href="http://www.globalpolicy.org/secgen/index.htm" class="links_black14bold">Secretary General</a>
</div>
</td>

<td>
<div class="softpad">
<a href="http://www.globalpolicy.org" class="links_menu_blue16bold">&gt;&gt;&nbsp;GPF HAUPTSEITE</a>
</div>
</td>
</tr>
</tbody>
</table>

<!--Portfolio Section Stops Here-->

</body>
</html>

----------------------------------------------------------------
für Hilfe wär ich sehr dankbar, bitte keine CSS-hacks/browserweichen
wenn es irgend vermeidbar ist.

mio

  1. Hallo,

    jetzt nutzt Du divs und Tabellen.

    Warum?

    Gruß, Ich

    1. Hallo,

      jetzt nutzt Du divs und Tabellen.

      Warum?

      Gruß, Ich

      Vorher wurde nur mit Tabellenpadding gearbeitet, die div tags habe ich eingeführt um Probleme unterschiedlicher Darstellung in verschiedenen Plattformen und Browsern zu minimieren (Stichwort Box-Model-Bug).
      Gegeben ist für mich das Aussehen: Ich würde es auch ohne Tabellen und divs machen, alles eine Frage des Aufwands, Hauptsache die Höhe der Tabelle ist nachher (im IE) exakt so wie jetzt in Firefox.

      Gruß, mio

      1. Hallo,

        Hallo Mio,

        ja, eine Frage des Aufwands ist es vielleicht.

        Aber Du wolltest es ja standardkonform, wobei das für mich heißt, HTML 4.01 Strict und Layout ohne Tabellen.

        Möchtest Du jetzt so "standardkonform" werden oder hat das Wort für Dich eine andere Bedeutung?

        Nich, dass wir hier aneinander vorbei reden :).

        Gruß, Ich

        1. Hallo Mio,

          ja, eine Frage des Aufwands ist es vielleicht.

          Aber Du wolltest es ja standardkonform, wobei das für mich heißt, HTML 4.01 Strict und Layout ohne Tabellen.

          Möchtest Du jetzt so "standardkonform" werden oder hat das Wort für Dich eine andere Bedeutung?

          Nich, dass wir hier aneinander vorbei reden :).

          Gruß, Ich

          Hallo Ich,

          "standardkonform" hieß für mich erst mal 4.01 transitional, allerdings dachte ich dass der Code ebenfalls die Strict-Kriterien erfüllt, habe es bei validator.w3.org überprüft. Ich dachte bisher dass Verzicht auf blinde Tabellen eher eine Frage des Stils ist. Bin aber gerne bereit auf Tabellen zu verzichten wenn nötig, 4.01 strict wäre mir schon lieber. Jetzt reden wir also über die gleiche Bedeutung von "standardkonform".

          Gruß, mio