Ben: Das leidige Thema: Positionierung

Hallo,

mal wieder wird meine Homepage überarbeitet und mal wieder möchte ich nur auf CSS setzen. Es gibt aber ein Problem mit dem folgenden Teil:

#hintergrund
{
  background-image:url('../gfx/weiss.gif');
  background-repeat: repeat-y;
  z-index: 1;
  width: 799px;
  height: 100%;
}

#header
{
  width: 415 px;
  height: 516 px;
  position: absolute;
  left: 0;
  top: 0;
}

#rechtsoben
{
  width: 277px;
  height: 385px;
  position: absolute;
  left: 515 px;
  top: 0;
}

Der IE positioniert die div "rechtsoben" richtig. Der Firefox zeigt sie über "header" in der linken Ecke an, obwohl ich doch mit position: absolute und left: 515px eine Position angegeben habe, oder? Wie muss es denn richtig lauten und könnt ihr mir vielleicht Tipps zu guten Artikeln und/oder Tutorials zu diesem Thema geben?

Schon einmal vielen Dank und viele Grüße
Ben

  1. Hi,

    #hintergrund
    {
      z-index: 1;

    Ohne position wirkungslos.

    #header
    {
      width: 415 px;
      height: 516 px;
      position: absolute;
      left: 0;
      top: 0;
    }
    #rechtsoben
    {
      width: 277px;
      height: 385px;
      position: absolute;
      left: 515 px;
      top: 0;
    }

    Ohne die Dokumentstruktur zu kennen, ist keine Aussage möglich.

    cu,
    Andreas

    --
    Warum nennt sich Andreas hier MudGuard?
    Schreinerei Waechter
    Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
    1. Hi,

      #hintergrund
      {
        z-index: 1;

      Ohne position wirkungslos.

      Okay, das stimmt wohl allerdings...

      Ohne die Dokumentstruktur zu kennen, ist keine Aussage möglich.

      Das Dokument sieht folgendermaßen aus:

      <html>
      <head>
      <title>bens-homepage.de - v3</title>
      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
      <link rel="stylesheet" type="text/css" href="css/style.css">
      </head>

      <body>
      <div id="hintergrund"></div>
      <div id="header"><img src="gfx/logo.gif" alt="bens-homepage"></div>
      <div id="rechtsoben"><img src="gfx/kabel1.jpg" alt="Kabel"></div>
      </body>
      </html>

      Gruß
      Ben

  2. Hi,

    width: 415 px;
      height: 516 px;

    Du setzt hiermit die beiden Eigenschaften auf auto, da die Werte ungültig sind (zwischen Zahl und Einheit darf kein Whitespace kommen).

    left: 515 px;

    Du setzt hiermit left auf auto (was auf 0 rausläuft).

    Der IE positioniert die div "rechtsoben" richtig.

    Nein, er macht es falsch, weil er die fehlerhaften Werte zu interpretieren versucht, obwohl der Standard klar sagt, daß fehlerhafte Werte ignoriert werden müssen.

    Der Firefox zeigt sie über "header" in der linken Ecke an, obwohl ich doch mit position: absolute und left: 515px eine Position angegeben habe,

    Firefox verhält sich korrekt, Du hast eben nicht
    left: 515px angegeben, sondern
    left: 515 px - kleiner Unterschied, große Wirkung.

    cu,
    Andreas

    --
    Warum nennt sich Andreas hier MudGuard?
    Schreinerei Waechter
    Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
    1. Hi Andreas,

      Firefox verhält sich korrekt, Du hast eben nicht
      left: 515px angegeben, sondern
      left: 515 px - kleiner Unterschied, große Wirkung.

      Ich habe die Leerzeichen enfernt und es klappt. Wirklich so eine Kleinigkeit.. Oh man... Vielen Dank! :)

      Gruß
      Ben