[IE6] Problem bei Abstände zw. Überschrift und Text

Status
Nicht offen für weitere Antworten.

mR.fLopPy

Erfahrenes Mitglied
Hallo Leute!

Ich habe folgendes Problem. Die Abstände zwischen meinen Überschriften u. dem Text werden im Internet Explorer 6 anders dargestellt, als im Firefox. Die erwünschte Darstellung ist natürlich die wie sie im FF angezeigt wird.

Hier ist ein Bild mit beiden Browsern im Vergleich:
http://img136.imageshack.us/my.php?image=problemmv9.gif

(Bitte die Einrückungsunterschiede bei den <ul>/<li>-Tags nicht mehr beachten - die habe ich bereits mit einer älteren Hilfestellung behoben *freu*)

So sieht der Inhalt in der HTML Datei aus:
HTML:
<div class="divMain">
      <div id="Box">
        <table>
          <tr>
            <td>
              <div id="Box">
                <div class="Pfeil"></div>
                <div class="Header">
                  <h3>Home</h3>
                </div>
                <div class="Text">
                <ul><li><a href="index2.htm">News</a></li></ul>
                </div>
              </div>
              <div id="Box">
                <div class="Pfeil"></div>
                <div class="Header">
                  <h3>Termine</h3>
                </div>
                <div class="Text"><ul><li><a href="termine.htm">Schulungstermine</a></li></ul></div>
              </div>
              <div id="Box">
                <div class="Pfeil"></div>
                <div class="Header">
                  <h3>PC-Software</h3>
                </div>
                <div class="Text">
                  <ul>
                    <li><a href="software.html">&Uuml;berblick</a></li>
                    <li><a href="showcreator.html">ShowCreator 3.0</a></li>
                    <li><a href="steppersoft.html">Stepper 3.0</a></li>
                    <li><a href="autoshow.html">AutoShow 1.0</a></li>
                    <li><a href="easymaster.html">EasyMaster 1.0</a></li>
                  </ul>
                </div>
              </div>
              <div id="Box">
                <div class="Pfeil"></div>
                <div class="Header">
                  <h3>Kontakt</h3>
                </div>
                <div class="Text">
                  <ul>
                    <li><a href="kontakt.html">&Uuml;berblick</a></li>
                    <li><a href="impressum.html">Impressum</a></li>
                    <li><a href="infomaterial.html">Info Material</a></li>
                    <li><a href="http://www.explo.at/login.php">Updates</a></li>
                  </ul>
                </div>
              </div>
            </td>
            <td>
              <div id="Box">
                <div class="Pfeil"></div>
                <div class="Header">
                  <h3>Zündanlagen</h3>
                </div>
                <div class="Text">
                  <ul>
                    <li><a href="zuend.html">Überblick</a></li>
                    <li>Sender</li>
                      <ul>
                        <li><a href="tx5k.html">TX-5K</a></li>
                        <li><a href="tx10k.html">TX-10K</a></li>
                        <li><a href="tx70k.html">TX-70K</a></li>
                        <li><a href="tx70m.html">TX-70M</a></li>
                        <li><a href="tx1400k.html">TX-1400K</a></li>
                      </ul>
                    <li>Empfänger</li>
                      <ul>
                        <li><a href="rx1k.html">RX-1K</a></li>
                        <li><a href="rx5k.html">RX-5K</a></li>
                        <li><a href="rx20k.html">RX-20K</a></li>
                        <li><a href="rx70k.html">RX-70K</a></li>
                        <li><a href="rxdmx.html">RX-DMX</a></li>
                      </ul>
                    <li>Module</li>
                      <ul>
                        <li><a href="mx20s.html">MX-20S</a></li>
                        <li><a href="mx1khv.html">MX-1K HV</a></li>
                        <li><a href="splitbox_20k.html">Splitbox 20K</a></li>
                        <li><a href="steppmodul_6k.html">Steppmodul-6K</a></li>
                        <li><a href="rx_mp3.html">MP3-Empf&auml;nger</a></li>
                        <li><a href="gasprojektor.html">Gasprojektor</a></li>
                      </ul>
                    <li>Komplettsysteme</li>
                      <ul>
                        <li><a href="k_outdoor.html">Outdoor</a></li>
                        <li><a href="k_indoor.html">Indoor</a></li>
                      </ul>
                    <li>Winkelschussanlagen</li>
                      <ul>
                        <li><a href="ws20.html">WS20</a></li>
                        <li><a href="ws15.html">WS15</a></li>
                      </ul>
                    <li>Zubehör</li>
                      <ul>
                        <li><a href="z_modem.html">FSK-Modem</a></li>
                        <li><a href="z_ladegeraete.html">Ladeger&auml;te</a></li>
                        <li><a href="z_koffer.html">Koffer</a></li>
                        <li><a href="z_sonstiges.html">Sonstiges</a></li>
                      </ul>
                  </ul>
                </div>
              </div>
            </td>
          </tr>
        </table>
      </div>
    </div>

Das ist der CSS der in diesem Part zum Einsatz kommt.
Code:
#Box { display: block; margin: 10px; margin-top: 15px; }
#ListBox { display: block; margin-bottom: 10px; margin-top: 15px; }

.Pfeil { float: left; background: url(../images/arrow.gif) repeat-x; width: 11px; height: 8px; margin-top: 5px; }
.Header { float: left; margin-left: 5px; margin-bottom: 3px; height: 20px; }
.Download { float: right; height: 20px; }
.Text { clear: both; margin-left: 16px; }
.Text .TextLeft { float: left; line-height: 20px; }
.Text .ImgLeft { float: left; }

EDIT: Merkwürdig - dadurch dass ich die Abstandspolster auf null gesetzt habe u. dann den linken Abstand einen Wert zugewiesen habe, ist meine Infobox wieder rauf gerutscht (vermutlich weil die Einrückung den Rahmen gesprengt hat) also müsst ihr dies auch nicht mehr beachten.

Hier die aktuelle IE6 Ansicht: http://img136.imageshack.us/my.php?image=problem2if1.gif

Dann plagt mich noch ein floatingProblem aber dazu komme ich später. Ich bin mit meinem Latein am Ende. :(

beste Grüße
floppy
 
Zuletzt bearbeitet:
Hi,
Ich habe folgendes Problem. Die Abstände zwischen meinen Überschriften u. dem Text werden im Internet Explorer 6 anders dargestellt, als im Firefox. Die erwünschte Darstellung ist natürlich die wie sie im FF angezeigt wird.
bist du dir sicher, dass die nachfolgend illustrierte Darstellung im Firefox korrekt, und so erwünscht ist, oder hast du hier einen Teil des Stylesheets unterschlagen?

quervergleich.jpg

Eine verschachtelte Liste wird nach diesem Schema ausgezeichnet:

Code:
<ul>
    <li>Hauptpunkt
         <ul>
             <li>Unterpunkt</li>
         </ul>
    </li><!-- Ende Hauptpunkt -->
</ul>
Dass der Abstand in den Browsern unterschiedlich hoch ist, liegt daran, dass u.a das h3-Element in ihnen "vom Werk aus" unterschiedliche Initialwerte für die äußere Polsterungseigenschaft besitzt.

Übrigens darf eine ID im HTML-Dokumentbaum nur einmal vergeben werden.

mfg Maik
 
Okay, ich poste nochmal den kompletten CSS Code. Ich dachte nur dass das Problem eventuell bei meiner Box liegt und wollte nicht deswegen diesen Haufen posten.

Hier nochmal der ganze Code:

Code:
@charset "utf-8";
/* CSS Document */

html, body { margin-top: 0px; margin-bottom: 0px; height: 100%; background-color: #cccccc; }

table { width: 100%; }


/*-- Text style -----------------*/

a { }

 a:link { font-weight: bold; color: #333333; }
 a:active { font-weight: bold; color: #333333; }
 a:hover { font-weight: bold; color: #333333; }
 a:visited { font-weight: bold; color: #333333; }

h1 { margin: 0px; font-size: 11px;}

h2 {}

h3 { margin: 0px; font-size: 12px; color: #719DDE; text-decoration: underline; font-weight: normal; }

h4 { margin: 0px; font-size: 14px; color: #666666; }

img { border: 0px; }

body { font-family: Tahoma; font-size: 11px; line-height: 15px; }

input, textarea { border: 1px #CCCCCC solid; font-size: 11px; color: #666666; font-family: Arial, Helvetica, sans-serif; background-color: #F9F9F9; }

ul { padding-left: 15px; margin: 0px; margin-left: 10px; padding: 0px; }
li { }

ul.Produkte { margin: 0px; padding: 0px; }
li.Produkte { list-style-type: none;}

td { vertical-align: top; }
td.Right { text-align: right; }


/*--Span Definitionen-----------------*/
	
#wrapper {position: relative; margin: 0px auto; margin-bottom: 0px; width: 750px; min-height: 100%; height: auto !important ; height: 100%; background-color: #FFFFFF; background: url(../images/BoxBackgr3.gif); border-left: 1px solid #000000; border-right: 1px solid #000000; }

#header { height: 190px; background-color:#999999; }

#navigation { height: 49px; background: url(../images/NaviBackgr.gif); } /* Eventuell auf 50px Höhe erhöhen*/
#navigation .Spacer { float: left; width: 17px; }
#navigation .Home { float: left;}
#navigation .Produkte { float: left;}
#navigation .Termine { float: left;}
#navigation .PcSoftware { float: left;}
#navigation .Kontakt { float: left;}
/* Da das Flashintro beschnitten wurde, muss ein Teil vom Arm nachgeladen werden */
#navigation .PieceOfIntro { float: left; width: 288px; height: 10px; background: url(../bilder/HeaderPiece.jpg) repeat-x; }

#content, #infobox { padding-bottom: 45px; }

#content { float: left; display: block; width: 435px; height: auto; background-color: #FFFFFF; }
#content .divFade { height: 5px; background: url(../images/ContentTopFade.gif) repeat-x; }
#content .divSpacer { height: 29px; }
#content .divMain { margin-left: 10px; margin-right: 10px; display: block; }

.divSpacerText { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; font-weight: bold; color: #666666; padding-left: 10px; padding-top: 8px; }

#infobox { float: right; width: 315px; height: auto; }

#infobox .divTop { position: relative; height: 35px; background: url(../images/InfoboxHeaderBg.gif); font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; text-decoration: underline; }
#infobox .divTop a:link { font-weight: normal; color: #666666; }
#infobox .divTop a:visited { font-weight: normal; color: #666666; }
#infobox .divTop .NewsImg { position: absolute; width: 54px; height: 16px; left: 8px; top: 11px; background: url(../images/InfoboxHeaderNews.gif) repeat-x; }
#infobox .divTop .Anmelden { position: absolute; left: 81px; top: 13px; font-weight: bold; color: #333333; }
#infobox .divTop .Anmelden a:link { font-weight: bold; }
#infobox .divTop .Anmelden a:visited { font-weight: bold; }
#infobox .divTop .Sitemap { position: absolute; left: 160px; top: 13px; }
#infobox .divTop .InfoMaterial { position: absolute; left: 222px; top: 13px; }


#infobox .divInfo { height: auto; }

/*-------------------------------*/

#Box { display: block; margin: 10px; margin-top: 15px; }
#ListBox { display: block; margin-bottom: 10px; margin-top: 15px; }

.Pfeil { float: left; background: url(../images/arrow.gif) repeat-x; width: 11px; height: 8px; margin-top: 5px; }
.Header { float: left; margin-left: 5px; margin-bottom: 3px; height: 20px; }
.Download { float: right; height: 20px; }
.Text { clear: both; margin-left: 16px; }
.Text .TextLeft { float: left; line-height: 20px; }
.Text .ImgLeft { float: left; }

.ImgTermin { margin-left: auto; margin-right: auto; width: 182px; background-color:#999999; }
.ImgSoftware { margin-left: auto; margin-right: auto; width: 188px; text-align: center; }

.TextProdukt { height: 100%; width: 100%; margin-top: 0px; }

/*-------------------------------*/

#footer { clear: both; position: absolute; left: 0px; bottom: 0px; width: 750px; height: 35px; background: url(../images/nav_bottom.jpg); font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #666666; }
#footer .Copyright { position: absolute; left: 10px; top: 13px; }
#footer .Impressum { position: absolute; left: 665px; top: 13px; text-decoration: underline; }
#footer .Impressum a:link { font-weight: normal; color: #666666; }
#footer .Impressum a:visited { font-weight: normal; color: #666666; }


/* Der Kern von Clearfix */
.clearfix:after { content: "."; display: block; clear: both; font-size: 0; height: 0; visibility: hidden; }
/* IE-Patches für Clearfix */
.clearfix { display: inline-block; }
/* Vor IE5/Mac verstecken \*/
* html .clearfix { height: 1px; }
.clearfix { display: block; }
/* Ende des Versteckspiels für den IE5/Mac */

Ich habe beim <h3>-Tag, um die vordefinierten Abstände zu entfernen "margin" auf null gesetzt.

Du meinst meine ID-Box? Okay, ich werde daraus eine Klasse machen. Ist das nur formhalber, oder gibt es bei Browsern Probleme mit der mehrmaligen def. einer ID? Fragen die das Land bewegen - entschuldige meine Neugier. ^_^

Oh, verflixt. okay, ich werde das mit dem <ul> u. <li> korrigieren.

beste Grüße
Floppy
 
Zuletzt bearbeitet:
Stell dir vor, du wendest auf ein Konstrukt mit mehreren gleichlautenden IDs eine Javascript-Anwendung mittels der getElementById("ID-Name_des_Elements")-Methode an, um beispielsweise diese Elemente ein- und auszublenden; die Browser würden das Script dann nur auf das erste Element im Dokumentbaum anwenden, und bei den übrigen Elementen die Arbeit "verweigern".

Ein weiterer Grund für die unterschiedlichen Abstände ist die margin-top:15px-Deklaration für #Box, die in diesem Modell auschliesslich vom IE interpretiert wird - alle übrigen Browser setzen dem Anschein nach diesen Wert auf "0".

mfg Maik
 
Danke für die Erklärung - ich werde es umgehend ändern. Okay, also das "margin-top: 15px;" galt eigentl. nur deswegen, weil ich zu faul war sämtliche margins mit 10px; zu deklarieren mit ausnahme vom "margin-top: 15px;", deswegen habe ich alle margins auf 10px gesetzt und margin-top auf 15px.

Wenn ich margin-top deaktivere tut sich nur über meiner <h3> Überschrift etwas. Der Abstand dazwischen bleibt gleich. Wenn ich "margin: 10px;" deaktiviere verschwindet der Abstand und gleicht sich dem von Firefox an. Allerdings müsste ich jetzt margin-left u. margin-right noch deklarieren, da ich den Abstand links u. rechts benötige. Das Problem bei der Sache ist nur, dass ich ohen ein margin-top oder margin-bottom den Abstand zur nächsten Box verliere. Ich könnte das max. mit dem <p>-Tag ausgleichen, aber ist das eine Lösung?

Bzw. komm ich da gleich auf meine nächste Theorie, weil nicht jede Seite von diesem Abstandproblem damit aus der Welt geschafft wurde. Andere Seiten haben diesen Abstand nachwievor, u. ich vermute dass es am <p>-Tag liegen könnte, da ich bei den Aufzählungen keine verwendet habe, oder?

Bzw. eine letzte Theorie wäre eventuell der Bug vom IE im Box-Modell?

Jedenfalls die 15px; zu deaktivieren hat leider das Problem nicht gelöst. (Der Abstand wird benötigt, damit rechts von meiner Seite der Text nicht direkt oben an der Leiste ankommt)

beste Grüße
floppy
 
Moin,

neuer Tag, neues Glück :)

Mit dieser Regelerweiterung für .Pfeil und -änderung für .Header dürften die Abstände nun auch bei dir in den unterschiedlichen Browsern übereinstimmen.

Code:
.Pfeil {
float: left;
background: url(../images/arrow.gif) repeat-x;
width: 11px;
height: 8px;
margin-top: 5px;
overflow:hidden; /* Für IE5.x + IE6, damit sie die height:8px-Deklaration einhalten, und darin nicht einen Platzhalter setzen, dessen Zeilenhöhe sich an der globalen Schriftgröße orientiert  */
}

.Header {
/*float: left;*/ /* auskommentiert, denn der Header umfliesst schon den Pfeil, und soll vom nachfolgenden Element nicht umflossen werden */
margin-left: 5px;
margin-bottom: 3px;
height: 20px; 
}

Bei mir ist das unter WinXP in den folgenden Browsern der Fall:

  • FF 1.x, 2.x, 3.x
  • IE 5.x, 6, 7
  • Mozilla 1.8b
  • Netscape 9.x
  • Opera 9.5.x
  • Safari 3.1.2 (Win)
  • SeaMonkey 1.1.6

Zum Schluß noch eine Bitte an dich: Das nächste Mal poste doch bitte gleich den vollständigen CSS-Code, oder zumindest die Regeln für alle im Markup beteiligten Elemente, damit solche Mißverständnisse erst garnicht aufkommen, und wir gleich zur Sache kommen können. Woher soll ich denn anhand des eingangs gezeigten Code-Snippets wissen, ob und was für CSS-Regeln für die übrigen Elemente definiert worden sind - vielen Dank! :)

mfg Maik
 
Perfekt. Der automatische Abstand ist jetzt überall weg wo ich keinen <p>-Tag dazwischen hatte. Wo die <p>-Tags waren, hat der IE6 auch einen höheren Abstand zur Überschrift gehabt.

Ich habe jetzt einfach dem <p>-Tag folgende Werte zugewiesen:

Code:
p { margin: 0px; margin-bottom: 10px; }

Somit ist der Abstand auch im IE6 angeglichen und zum nächsten <p>-Tag gibt es trotzdem den Abstand den ich mir erwünscht habe. *hehe*

Dank dir Maik!
In Zukunft poste ich auch den ganzen CSS Code. :)

beste Grüße
floppy
 
Hi,

ich weiß zwar nicht, von welchem p-Element du jetzt sprichst, denn in deinem gezeigten HTML-Code ist überhaupt keines enthalten, aber auch dieses Element besitzt, wie alle übrigen Blockelemente, in den Browsern unterschiedliche Initialwerte für seine Polsterung im Textfluß.

Ich nutze daher immer zu Beginn eines Stylesheets den Universalselektor *, um zunächst mal diese diskrepanten Werte für alle im HTML-Dokument enthaltenden Elemente auf null zu setzen:

Code:
* {
margin:0;
padding:0;
}
Im Verlauf des Stylesheets weise ich dann den Elementen, die im Dokument einen Außen- und/oder Innenabstand besitzen sollen, diesen explizit zu - auf diese Weise stimmen alle Abstände im Textfluß browserübergreifend überein.

mfg Maik
 
Ich meinte den <p>-Tag mit dem man bei einem Text in die Absätze macht - das was von HTML aus vordefiniert ist. Meine Fachsprache lässt ein wenig zu wünschen Übrig. ;)

Danke für den Tip! Das ist auch immer mein Grundgedanke gewesen zunächst alles auf 0 zu setzen u. dann die Werte zuzuweisen. Bei dieser Webseite werde ich das jetzt nicht mehr anwenden, da ich sonst nicht mehr weiß was alles sich dadurch ändern würde, aber bei meiner nächsten Webseite kommt dies mit Sicherheit zum Einsatz.

PS: Mein floating-Problem hast du mit der Erklärung in deinem Code-Snippet auch gelöst - es ist schön wenn man selbst drauf kommt! :)

beste Grüße und ein schönes WE noch!
floppy
 
Zuletzt bearbeitet:
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück