Alexander22: <div> nimmt nicht den ganzen <td>-platz ein

Hallo zusammen!

Sitze seit einigen Stunden an einem CSS/HTML-Problem und komme überhaupt nicht weiter. Das Problem ist, das im folgenden Code das <div> nicht den gesamten Platz des <td>s einimmt, obwohl das, meiner Meinung nach, so sein sollte.

Ich habe schon dem <div> ein margin:0 und dem <td> ein padding:0 gegeben , aber es bringt nichts.

Das einzige was wirkt, aber meiner Meinung nach unlogisch ist, ist dem <p> ein "margin-top:0;" zu geben. Dann schiebt es sich auch das <div> mit nach oben. Eigentlich sollte es ja auch nur bis zum <div> hochgehen,  also zum Elternelement.

Hat jemand eine Idee woran das liegt? Irgendwie sieht das nach einem Bug aus.

Grüße

Alexander

Der Code:

<?XML VERSION="1.0" ENCODING="iso-8859-1" ?>
<!doctype HTML public "-//w3c//dtd xhtml 1.0 tRANSITIONAL//en"
"HTTP://WWW.W3.ORG/tr/XHTML1/dtd/XHTML1-TRANSITIONAL.DTD">
<HTML XMLNS="HTTP://WWW.W3.ORG/1999/XHTML">
<HEAD>
</HEAD>
<BODY>

<TABLE CELLSPACING="0" CELLPADDING="0" STYLE="">
        <TR>
                <TD STYLE="BACKGROUND-COLOR:BLACK;PADDING:0;">
                        <DIV STYLE="BACKGROUND-COLOR:RED;MARGIN:0;">
                                <p style="margin-top:0;">gganz viel text ganz viel text ganz viel text gganz viel text anz viel text ggggggggggggggggganz viel text anz viel text anz viel text anz viel text anz viel text anz viel text anz viel text anz viel text anz viel text anz viel text anz viel text anz viel text anz viel text anz viel text anz viel text anz viel text anz viel text anz viel text .i
                                </p>
                        </div>
                </td>
        </tr>
</table>

</body>
</HTML>

  1. Moin!

    Sitze seit einigen Stunden an einem CSS/HTML-Problem und komme überhaupt nicht weiter. Das Problem ist, das im folgenden Code das <div> nicht den gesamten Platz des <td>s einimmt, obwohl das, meiner Meinung nach, so sein sollte.

    Warum überhaupt ein DIV?

    - Sven Rautenberg

    --
    My sssignature, my preciousssss!
  2. Hallo Alexander22,

    <!doctype HTML public "-//w3c//dtd xhtml 1.0 tRANSITIONAL//en"

    Bei Deinen Doctype ist die Gross und Kleinschreibung durcheinander geraten, der Validator weiss mehr hierzu. Du kannst auch deine Tags/Attribute nicht gross schreiben.

    Die Frage, die sich mir aufdraengt, ist, wozu brauchst du eine Tabelle und wenn du tatsaechlich eine brauchst, warum ein div und ein p in den Zelle. Das, was du offensichtlich willst, den Inhalt eines Kaestchens nett formatieren, bekommst du mit zwei Zeilen CSS hin. Wenn Du jedoch auf deine Verschachtelung bestehst, muss auch das p ohne margin sein.

    Gruß,

    Dieter

  3. Hi,

    Ich habe schon dem <div> ein margin:0 und dem <td> ein padding:0 gegeben , aber es bringt nichts.
    Das einzige was wirkt, aber meiner Meinung nach unlogisch ist, ist dem <p> ein "margin-top:0;" zu geben. Dann schiebt es sich auch das <div> mit nach oben. Eigentlich sollte es ja auch nur bis zum <div> hochgehen,  also zum Elternelement.
    Hat jemand eine Idee woran das liegt? Irgendwie sieht das nach einem Bug aus.

    Nein, das ist kein Bug, das ist genau so definiert - Stichwort: Collapsing margins.

    <?XML VERSION="1.0" ENCODING="iso-8859-1" ?>

    Was soll das sein? Eine XML-Deklaration kann es nicht sein, da stimmt die Großschreibung nicht.

    <!doctype HTML public "-//w3c//dtd xhtml 1.0 tRANSITIONAL//en"
    "HTTP://WWW.W3.ORG/tr/XHTML1/dtd/XHTML1-TRANSITIONAL.DTD">

    Das kann auch kein Doctype sein (Großschreibung ...)

    <HTML XMLNS="HTTP://WWW.W3.ORG/1999/XHTML">

    Du solltest Dich dringendst mit den Regeln zur Groß- und Kleinschreibung in XHTML beschäftigen.

    <HEAD>
    </HEAD>
    <BODY>

    <TABLE CELLSPACING="0" CELLPADDING="0" STYLE="">

    Eine Tabelle mit einer einzigen Zelle? Was soll denn der Schmarrn?

    <TR>
                    <TD STYLE="BACKGROUND-COLOR:BLACK;PADDING:0;">
                            <DIV STYLE="BACKGROUND-COLOR:RED;MARGIN:0;">

    Wozu das div?

    <p style="margin-top:0;">gganz viel text ganz viel text ganz viel text gganz viel text anz viel text ggggggggggggggggganz viel text anz viel text anz viel text anz viel text anz viel text anz viel text anz viel text anz viel text anz viel text anz viel text anz viel text anz viel text anz viel text anz viel text anz viel text anz viel text anz viel text anz viel text .i
                                    </p>

    Bisher das einzige notwendige Element im body ...

    cu,
    Andreas

    --
    Warum nennt sich Andreas hier MudGuard?
    Schreinerei Waechter
    O o ostern ...
    Fachfragen unaufgefordert per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
  4. Gut, ich hätte es dazuschreiben können:

    -Da ist nicht das tatsächliche Layout sondern ein auf das Problem reduzierte. Das realle ist weitaus komplexer und Tabellen müßen sein. CSS machts nicht. Ich habe den Code soweit vereinfacht, dass er sich auf das Problem beschränkt, um euch nicht Seiten von HTML zumuten zu müßen.

    -Das mit der Großschreibung ist im realen Code auch anders. Hab mit PUTTY und vim gearbeitet und der hat mir, keine Ahnung wieso, den gesamten Code in Großbuchstaben umgewandelt. Muß da wohl was ausgelöst haben, selbst ein "rückgängig" hat es nicht wieder rückgängig machen können. Da ich dann dringend weg mußte, hatte ich keine Zeit alles wieder von Hand in Kleinbuchstaben umzuwandeln. Ist ja bei dem beschriebenen Problem auch Nebensache. Der Fehler kommt auch bei Kleinbuchstaben.

    1. Hi,

      Der Fehler kommt auch bei Kleinbuchstaben.

      Liest Du gar nicht, was man Dir schreibt?
      Es ist KEIN Fehler.

      cu,
      Andreas

      --
      Warum nennt sich Andreas hier MudGuard?
      Schreinerei Waechter
      O o ostern ...
      Fachfragen unaufgefordert per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
      1. Doch doch :). Hab einfach das falsche Wort benutzt, das ist alles. Bei mir im Kopf ist es halt noch als Fehler gespeichert. Hab gestern Abend einen Artikel über "collapsing margins" gefunden aber keine Zeit gehabt den komplett zu verstehen. Werde das jetzt nachholen.

        Danke erstmal.

        1. Soweit ich das jetzt verstanden habe ist "collapsing margins" dafür verantwortlich, dass ich mit margin-top:0 vom <p>, den gesamten <div>-block hochziehen kann. Aber das ist ja nicht das eigentliche Problem, sondern, dass das <div> das <td> nicht ausfüllt. Oder habe ich das immer noch nicht komplett verstanden und "collapsing margins" erklärt auch dieses Problem?

          Grüße

          Alexander22

          1. Weiß niemand eine Lösung?