zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Merkwürdiger Box-Abstand im Internet Explorer

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 05.09.2005, 10:44
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.09.2005
Beiträge: 83
SPACEart befindet sich auf einem aufstrebenden Ast
Standard Merkwürdiger Box-Abstand im Internet Explorer

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
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 05.09.2005, 11:19
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 23.03.2005
Beiträge: 1.032
Swoop befindet sich auf einem aufstrebenden Ast
Standard

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..
__________________
Shibby.....

Mein Blog
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 05.09.2005, 11:34
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard Re: Merkwürdiger Box-Abstand im Internet Explorer

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)...
Mit Zitat antworten
  #4 (permalink)  
Alt 05.09.2005, 11:46
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.09.2005
Beiträge: 83
SPACEart befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #5 (permalink)  
Alt 05.09.2005, 12:19
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.09.2005
Beiträge: 83
SPACEart befindet sich auf einem aufstrebenden Ast
Standard Re: Merkwürdiger Box-Abstand im Internet Explorer

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
Mit Zitat antworten
  #6 (permalink)  
Alt 05.09.2005, 12:28
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard Re: Merkwürdiger Box-Abstand im Internet Explorer

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
Mit Zitat antworten
  #7 (permalink)  
Alt 05.09.2005, 12:39
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.09.2005
Beiträge: 83
SPACEart befindet sich auf einem aufstrebenden Ast
Standard Re: Merkwürdiger Box-Abstand im Internet Explorer

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
Mit Zitat antworten
  #8 (permalink)  
Alt 05.09.2005, 12:57
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 23.03.2005
Beiträge: 1.032
Swoop befindet sich auf einem aufstrebenden Ast
Standard Re: Merkwürdiger Box-Abstand im Internet Explorer

[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/
__________________
Shibby.....

Mein Blog
Mit Zitat antworten
  #9 (permalink)  
Alt 05.09.2005, 13:12
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.09.2005
Beiträge: 83
SPACEart befindet sich auf einem aufstrebenden Ast
Standard Re: Merkwürdiger Box-Abstand im Internet Explorer

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
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 05.09.2005, 13:29
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard Re: Merkwürdiger Box-Abstand im Internet Explorer

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
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


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


Alle Zeitangaben in WEZ +2. Es ist jetzt 17:12 Uhr.