falsche Abstände durch margin-Fehlinterpretation in IE

[keine-ahnung-haber]

Hey
ich habe folgendes HTML:

<div id="top">Titel</div>
<div id="content">
<table>
<tr>
<td>
TEST
</td>
</tr>
</table>

und dazu folgende CSS-Styles definiert:

    div#top {
        width:600px;
        margin:0 auto;
        background:red;
    }
    div#content {
        width:600px;
        margin:0 auto;
        background:red;
    } 
    #content table {
        width:100px;
        height:100px;
        margin:40px 5px;
        background:blue;
    }

Im Firefox sieht das dann so aus:

im IE (und Chrome) so:


Warum interpretiert der IE die Abstände so, als wären sie für div#content und nicht für #content table definiert?
Ich habe rausgefunden, dass ers richtig (wie FF) interpretiert, wenn ich ein <br>-Tag vor das <table> setze.

lg

 

[two-bee]

Schmeiss zuerst die Tabelle aus deinem Code , die ist absolut überflüssig. Tabellen nutzt man nur um
tabellarischen Inhalt darzustellen. Die br tags brauchst du auch nicht. Html und CSS sollten so angewandt werden dass Struktur (HTML) und Präsentation (CSS) voneinander getrennt werden. Willst du dabei bleiben und eine Tabelle zum Layouten einsetzen (Was technisch falsch ist) musst du auch mit

<table cellspacing="0" cellpadding="0">

Die Abstände innerhalb der Tabelle entfernen.
Dann musst du wissen dass der Browser eigene Abstände für margin und padding vorgibt.
Abhilfe schafft ein :

/* loescht die Werte fuer padding und margin */
* {
padding: 0;
margin: 0;
}

Dann google mal: IE BOX Problem . Der IE berechnet die Boxgrößen anders als der Firefox worin da genau der Unterschied besteht ist wichtig zu wissen!!!
Ebenfalls hilfreich: http://de.selfhtml.org wenn du deine HTML / CSS Kenntnisse noch verbessern möchtest.

gruß

 

[vitus37]

Versuche es mal anstatt eines margin in der Tabelle mit einem entsprechenden padding im Content-DIV.

P.S. Das DIV "top" mit Inhalt "Titel" interpretiere ich als Überschrift, deshalb solltest du es auch als eine Auszeichnen. ->h[1-6]-Tag

Gruß

 

[keine-ahnung-haber]

@two-bee: Erstmal Danke für deine Antwort. Im Orginal besitzt die Tabelle mehrere Zeilen und Spalten, die ich nur der Einfachheit halber rausgenommen habe. Danke für den Tipp mit cellspacing & -padding. Allerdings bringt mich dies bei meiner Frage nicht weiter. Woher kommt die unterschiedliche Interpretation bzw. warum interpretiert der IE die Abstände so (falsch)?

@vitus37: Auch an dioch ein herzlichen Dankeschön. Padding statt Margin zu benutzen löst zwar mein Problem, beantwortet aber meine Frage nicht. Ich würde es gerne verstehen=)

 

[two-bee]

hey,

wie gesagt, google....

SELFHTML: Stylesheets / CSS-Formate definieren / Das CSS Box-Modell da wirds beschrieben.

 

[vitus37]

margin erzeugt einen Aussen-, padding einen Innenabstand.

Bei margin wird der Abstand zwischen dem Rand eines Elements zum nächsten Element definiert.
Bei padding wird der Abstand zwischen Rand und dem eigenen Inhalt definiert. Dabei vergrößert sich das Element im Prinzip, somit wird auch die Fläche des Hintergrunds größer.(und füllt in deinem Fall den Bereich zwischen deinem DIV "top" und "content" aus)

Hoffe das hilft dir.

 

[keine-ahnung-haber]

@two-bee: Was du gefunden hast hilft mir leider nicht weiter, da es ein anderes Problem beschreibt.

@vitus37: Ich habe margin ja für das Table-Element IM div definiert. Müsste margin nicht also eigendlich den Abstand zwischen dem Rand des Tables und dem nächsten Element, nämlich dem umschließenden div (#content) darstellen (wie im Firefox) und nicht zwischen dem div#content und div#top (wie IE)?

 

[vitus37]

@vitus37: Ich habe margin ja für das Table-Element IM div definiert. Müsste margin nicht also eigendlich den Abstand zwischen dem Rand des Tables und dem nächsten Element, nämlich dem umschließenden div (#content) darstellen (wie im Firefox) und nicht zwischen dem div#content und div#top (wie IE)?

Das stimmt. IE scheint da einen Fehler zu haben.