Merkwürdiger Box-Abstand im Internet Explorer

SPACEart · #1 (**permalink**) 05.09.2005, 09:44

Hallo

Ich bin noch ganz neu beim Layouten mit CSS, also ein echter Anfänger.
Darum bitte ich um etwas Nachsicht für vielleicht dumme Frage :)

Es geht um folgende Seite:
http://www.spaceart.de/_Test/Test-06.shtml

Hier der HTML Quelltext:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">

<head>

<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" media="screen" href="Test-06.css" />


<title>Ich werd noch wahnsinnig :-)</title>

</head>
<body>

<div id="Seite">

  <div id="Kopfzeile">Ich bin eine Kopfzeile, das ist doch wirkllich toll !</div>

  <ul id="Navigation">[*]XXXXX[*]XXXXX[*]XXXXX[*]XXXXX[*]XXXXX[*]XXXXX[*]XXXXX[*]XXXXX[*]XXXXX[*]XXXXX[*]XXXXX[*]XXXXX[*]XXXXX[*]XXXXX[*]XXXXX[*]XXXXX[/list]
  <div id="Inhalt">
    <h2>Ich bin eine h2 Überschrift</h2>
    <h3>Ich bin eine h3 Überschrift</h3>
    

Bla Blubber dies ist eigentlich nicht so wichtig, weil es eben nur ein Fülltext ist. Und ich fand es halt einfach schöner, nicht immer diesen Standard Fülltext zu verwenden :-) Und gleich nochmal ... Bla Blubber dies ist eigentlich nicht so wichtig, weil es eben nur ein Fülltext ist. Und ich fand es halt einfach schöner, nicht immer diesen Standard Fülltext zu verwenden :-)</p>
    

Bla Blubber dies ist eigentlich nicht so wichtig, weil es eben nur ein Fülltext ist. Und ich fand es halt einfach schöner, nicht immer diesen Standard Fülltext zu verwenden :-) Und gleich nochmal ... Bla Blubber dies ist eigentlich nicht so wichtig, weil es eben nur ein Fülltext ist. Und ich fand es halt einfach schöner, nicht immer diesen Standard Fülltext zu verwenden :-)</p>
    

Bla Blubber dies ist eigentlich nicht so wichtig, weil es eben nur ein Fülltext ist. Und ich fand es halt einfach schöner, nicht immer diesen Standard Fülltext zu verwenden :-) Und gleich nochmal ... Bla Blubber dies ist eigentlich nicht so wichtig, weil es eben nur ein Fülltext ist. Und ich fand es halt einfach schöner, nicht immer diesen Standard Fülltext zu verwenden :-)</p>
    

Bla Blubber dies ist eigentlich nicht so wichtig, weil es eben nur ein Fülltext ist. Und ich fand es halt einfach schöner, nicht immer diesen Standard Fülltext zu verwenden :-) Und gleich nochmal ... Bla Blubber dies ist eigentlich nicht so wichtig, weil es eben nur ein Fülltext ist. Und ich fand es halt einfach schöner, nicht immer diesen Standard Fülltext zu verwenden :-)</p>
  </div>

  <div id="Fusszeile">Hallo hier unten, ich bins, Eure heissgeliebte Fusszeile :-)</div>
</div>

</body>
</html>

Hier der CSS Quelltext

Code:

* {margin:0;padding:0;}

body {
  text-align: center;  /* Zentrierung im Internet Explorer */
  font: 100.1% Helvetica, Arial, sans-serif;
  background-color: black;
  color: #ffffff;
}

div#Seite {
  background-image:url(Hintergrund.gif);
  text-align: left;    /* Seiteninhalt wieder links ausrichten */
  margin: 20px auto;      /* standardkonforme horizontale Zentrierung */
  border: 1px solid #fff;
  width: 760px;
}

div#Kopfzeile{
  background-color: #004559;
  border-bottom: 1px solid #fff;
}

ul#Navigation {
  list-style:none;
  width: 200px;
  float: left;
  margin-top: 15px;
}

div#Inhalt {
  margin-left: 200px;
  text-align: center;  /* Zentrierung im Internet Explorer - für Inhalt-Box */
  background-color: #235F70;
  border-left: 1px solid #fff;
  padding: 15px 0 7px;
}

div#Fusszeile {
  background-color: #004559;
  border-top: 1px solid #fff;
  clear: both;
}

p, h2, h3 {

  width: 500px;
  text-align: left;    /* Seiteninhalt wieder links ausrichten - für Inhalt-Box */
  margin: 0 auto 7px;      /* standardkonforme horizontale Zentrierung - für Inhalt-Box */
  padding: 5px;
  border:1px solid #fff;
}

h2, h3 {
  color: #FFF000;
}

a:link, a:visited {
  color: #ffffff;
  font-weight: bold;
}
a:hover, a:active, a:focus {
  color: #fff000;
}

´

Und hier noch der conditional-CSS-Code für den IE:

Code:

div#Inhalt {
  height: 1em;  /* Workaround gegen den 3-Pixel-Bug des Internet Explorers */
  margin-left: 197px;  /* Workaround gegen den 3-Pixel-Bug des Internet Explorers */
}

ul#Navigation {
  margin-right:-3px  /* Workaround gegen den 3-Pixel-Bug des Internet Explorers */
}

Wie man in der #Navigation ja sehen kann, "kleben" die XXXXX-Links
alle am linken Rand.

Darum habe ich nun der #Navigation einen padding-left von 10px angewiesen, und zwar so:

Code:

ul#Navigation {
  list-style:none;
  width: 200px;
  float: left;
  margin-top: 15px;
  padding-left: 10px;
}

Im Firefox und Opera klappt das auch wunderbar.
Aber im IE passiert folgendes:
http://www.spaceart.de/_Test/Test-07.shtml
Es wird also wohl auch der padding von 10px links neben den
XXXXX-Links eingefügt, wie ich es ja haben wollte.
Aber gleichzeitig wird wohl im IE auch auf der rechten Seite
noch die #Navigation um 10px vergrößert.

Woran liegt das denn nur?
Da ich eben noch nicht so wirklich der CSS-Profi bin,
würde ich mich über Hilfe sehr freuen.

Gruß
Ingo

Swoop · #2 (**permalink**) 05.09.2005, 10:19

das liegt an der Interpretation des Boxmodells des Internet Explorers..

Zitat:

ul#Navigation {
float: left;
list-style:none;
width: 210px;
margin-top: 15px;
padding-left: 10px;
voice-family: "\"}"";
voice-family: inherit;
width: 200px;
}

html>body {

width: 200px;
}

sollte funktionieren..

fricca · #3 (**permalink**) 05.09.2005, 10:34

Zitat:

Zitat von SPACEart

Es wird also wohl auch der padding von 10px links neben den
XXXXX-Links eingefügt, wie ich es ja haben wollte.
Aber gleichzeitig wird wohl im IE auch auf der rechten Seite
noch die #Navigation um 10px vergrößert.

Woran liegt das denn nur?

Beschäftige dich mit dem Box-Model:
Gesamtbreite eines Elements = width + padding + border + margin
Deine Navigation ist bei dir jetzt 210px breit.
Auch im FF wird die Navigations-Box größer; du siehst es nur nicht, weil der Firefox richtig floatet (der IE6 nicht). Vergib mal eine Hintergrundfarbe für #Navigation, dann siehst du, was ich meine.

Gib das padding den Listenelemementen:
#Navigation li {padding:10px}

BTW: gewöhne dir lieber an, alle IDs usw. in Kleinbuchstaben zu schreiben - in XHTML wird das unterschieden...

Grüße
fricca

edit:
@swoop: der Fehler liegt (das Box-Model betreffend) diesmal nicht beim IE(6)...

SPACEart · #4 (**permalink**) 05.09.2005, 10:46

Zitat:

Zitat von Swoop

das liegt an der Interpretation des Boxmodells des Internet Explorers..

Zitat:

ul#Navigation {
float: left;
list-style:none;
width: 210px;
margin-top: 15px;
padding-left: 10px;
voice-family: "\"}"";
voice-family: inherit;
width: 200px;
}

html>body {

width: 200px;
}

sollte funktionieren..

Vielen Dank für Deine schnelle Antwort.
Dein Tipp funxt aber leider nicht ... sorry.

Gruß
Ingo

SPACEart · #5 (**permalink**) 05.09.2005, 11:19

Guten Morgen fricca

Erstmal wieder: DANKE!

Zitat:

Zitat von fricca

Beschäftige dich mit dem Box-Model:
Gesamtbreite eines Elements = width + padding + border + margin

OK, alles klar, das verstehe ich.
Habe es mir genau so auch schon angelesen.
Machen da nicht die alten IEs (5er) diesen Fehler,
dass sie nur den margin addieren?
Das ist doch dieser Box-Modell Bug, oder so, richtig?

Zitat:

Zitat von fricca

Deine Navigation ist bei dir jetzt 210px breit.
Auch im FF wird die Navigations-Box größer; du siehst es nur nicht, weil der Firefox richtig floatet (der IE6 nicht). Vergib mal eine Hintergrundfarbe für #Navigation, dann siehst du, was ich meine.

Jou, das habe ich mal ausprobiert, ist ja der Hammer.
Mit genau solchen Methoden kann man das ja echt gut erlernen., toller Tipp.

Zitat:

Zitat von fricca

Gib das padding den Listenelemementen:
#Navigation li {padding:10px}

Menno :) ... warum bin ich denn schon wieder nicht selbst auf diese Idee gekommen?
Die Lösung ist ja so einfach wie geniel.
Schau hier, es funxt nun wunderbar:
http://www.SPACEart.de/_Test/Test-08.shtml

Zitat:

Zitat von fricca

BTW: gewöhne dir lieber an, alle IDs usw. in Kleinbuchstaben zu schreiben - in XHTML wird das unterschieden...

OK, ich habe das nun so geändert, dass alles klein ist.

Zitat:

Zitat von fricca

edit:
@swoop: der Fehler liegt (das Box-Model betreffend) diesmal nicht beim IE(6)... ;)

Dann verstehe ich das doch richtig, dass das im Grunde garnix mit
diesem berühmten Box-Modell-Bug des IE zu tun hatte, richtig?

Gruß
Ingo

fricca · #6 (**permalink**) 05.09.2005, 11:28

Zitat:

Zitat von SPACEart

Dann verstehe ich das doch richtig, dass das im Grunde garnix mit
diesem berühmten Box-Modell-Bug des IE zu tun hatte, richtig?

Richtig. Der Bug lag diesmal woanders

*SCNR*

Der IE6 im Standards-Mode hat den "berühmten" Bug auch nicht mehr - und in diesem hattest du ja wohl getestet...
Im IE5 (der nur den Quirks-Mode kennt) trat der "Fehler" nämlich gar nicht auf - eben wegen des BM-Bugs

Grüße
fricca

SPACEart · #7 (**permalink**) 05.09.2005, 11:39

Hallo

Zitat:

Zitat von fricca

Der IE6 im Standards-Mode hat den "berühmten" Bug auch nicht mehr - und in diesem hattest du ja wohl getestet...

Ja, ich habe hier auf mkeinem Rechner nur den IE6 (und FF und Opera).

Zitat:

Zitat von fricca

Im IE5 (der nur den Quirks-Mode kennt) trat der "Fehler" nämlich gar nicht auf - eben wegen des BM-Bugs :)

Ich mache es immer so, dass ich meine Seite hier im IE6, FF und OP teste.
Und dann jeweils einmal mit Doctype (XHTML strickt) und einmal ohne Doctype.
Und wenn da dann alles funktioniert, müsste ich doch auf der sicheren Seite sein.
Was meinst Du?

Gruß
Ingo

Swoop · #8 (**permalink**) 05.09.2005, 11:57

[quote="fricca"]

Zitat:

Zitat von SPACEart

edit:
@swoop: der Fehler liegt (das Box-Model betreffend) diesmal nicht beim IE(6)...

hm scheint so, da hab ich wohl zu schnell gehandelt

Zitat:

...einmal ohne Doctype.

das kannst du streichen, falls du das nicht schon kennst -> http://www.fabrice-pascal.de/artikel/dtd/

SPACEart · #9 (**permalink**) 05.09.2005, 12:12

Tach Swoop

Zitat:

Zitat von Swoop

hm scheint so, da hab ich wohl zu schnell gehandelt :?

Tja, kommt vor :)

Zitat:

Zitat von Swoop

Zitat:

...einmal ohne Doctype.

das kannst du streichen, falls du das nicht schon kennst -> http://www.fabrice-pascal.de/artikel/dtd/

Ok, vielen Dank für den Link.
Ich werde mir das nachher mal ganz in Ruhe durchlesen.
Und wenn ich was nicht kapiere, melde ich mich wieder.

Gruß
Ingo

fricca · #10 (**permalink**) 05.09.2005, 12:29

Zitat:

Zitat von SPACEart

Ich mache es immer so, dass ich meine Seite hier im IE6, FF und OP teste.

IE5 und 5.5 solltest du dir IMHO auch noch antun, die gibt's als standalone-Versionen:
http://browsers.evolt.org/

Grüße
fricca

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Probleme im Internet Explorer	web334	CSS	15	21.06.2013 19:27
Problem mit sich erweiternder Box im Internet explorer!!!!	etron	(X)HTML	9	03.09.2011 11:50
layout zerschossen im internet explorer	opentyper	CSS	2	02.08.2007 12:57
#boxes a:hover.info: 2.posting mit css !!!	marioN	CSS	5	25.01.2004 17:04
#box a:hover .info: css-layout: ie6.0/win, moz.1ie5.0/mac,	marioN	CSS	2	19.01.2004 17:17