Einzelnen Beitrag anzeigen
  #1 (permalink)  
Alt 05.09.2005, 10:44
SPACEart SPACEart ist offline
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