peter: boxen modell. ie 5 macht ärger ;-(

hallo zusammen,

ich habe folgendes problem mit dem ie 5x (ie 6 hab ich nicht von daher kann ich nicht sagen ob er auchd as problem hat):

ich versuche die 3 boxen pixelgenau aneinander zu legen. leider bekomme ich den pixel abstand nixht weg ;-(
kann jemand helfen?

  1. hier der html code:

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

    <html>
    <head>
     <title>Unbenannt</title>
     <meta http-equiv="imagetoolbar" content="no">

    <style type="text/css" media="screen">
     body
     {
      border: 0px;
      border-bottom : 0 0 0;
      border-left : 0;
      border-right : 0;
      border-top : 0;
      border-width : 0;
      margin : 0 0 0 0;
      padding : 0 0 0 0;
      font: 0.59em vardana, arial, hevetica, sans-serif;
      text-align: center;
      color: #red;
      background-color: #D6D6D6;
     }

    #container
     {
      float: left;
      text-align: left;
      width: 992px;
      height: auto;
      border: 0px;
      border-bottom : 0 0 0;
      border-left : 0;
      border-right : 0;
      border-top : 0;
      border-width : 0;
      margin : 0 0 0 0;
      padding : 0 0 0 0;
      background-color: red;
     }

    #left_container
     {
      float: left;
      width: 36px;
      height: 780px;
      border: 0px;
      border-bottom : 0 0 0;
      border-left : 0;
      border-right : 0;
      border-top : 0;
      border-width : 0;
      margin : 0 0 0 0;
      padding : 0 0 0 0;
      background-color: yellow;
     }

    #head_container
     {
      width: 914px;
      height: 151px;
      border: 0px;
      border-bottom : 0 0 0;
      border-left : 0;
      border-right : 0;
      border-top : 0;
      border-width : 0;
      margin : 0 0 0 0;
      padding : 0 0 0 0;
      background-color: fuchsia;
     }

    #right_container
     {
      float: right;
      width: 36px;
      height: 780px;
      border: 0px;
      border-bottom : 0 0 0;
      border-left : 0;
      border-right : 0;
      border-top : 0;
      border-width : 0;
      margin : 0 0 0 0;
      padding : 0 0 0 0;
      background-color: yellow;
     }

    </style>

    </head>

    <body>
    <div id="container">
     <div id="left_container">LEFTC</div>
     <div id="right_container">RIGHTC</div>
     <div id="head_container">HEADC</div>
    </div>
    </body>
    </html>

  2. Hallo,

    ich habe folgendes problem mit dem ie 5x (ie 6 hab ich nicht von daher kann ich nicht sagen ob er auchd as problem hat):

    Hat er, und bei deinem Code eigentlich alle Browser: im Firefox und Opera gibt es zwischen HEADC und RIGHTC einen Amstand von ca. 1cm.

    ich versuche die 3 boxen pixelgenau aneinander zu legen. leider bekomme ich den pixel abstand nixht weg ;-(
    kann jemand helfen?

    #left_container width:36px;  + #right_container width:36px;  +   #head_container width:914px;  = 986px

    #container width:992px;  != 986px

    Du kannst dir http://de.selfhtml.org/css/layouts/mehrspaltige.htm#dreispaltig durchlesen.

    Und so funktioniert dein Code:

    Grüße
    Thomas
    --------------------------------
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html>
    <head>
     <title>Unbenannt</title>
     <meta http-equiv="imagetoolbar" content="no">

    <style type="text/css" media="screen">
     body
     {
      border:0px;
      margin:0px;
      padding:0px;
      font:0.59em vardana, arial, hevetica, sans-serif;
      text-align:center;
      color:red;
      background-color:#D6D6D6;
     }

    #container
     {
      float:left;
      text-align:left;
      width:992px;
      height:auto;
      border:0px;
      margin:0px;
      padding:0px;
      background-color:red;
     }

    #left_container
     {
      float:left;
      width:36px;
      height:780px;
      border:0px;
      margin:0px;
      padding:0px;
      background-color:yellow;
     }

    #head_container
     {
      float:left;
      width:920px;
      height:151px;
      border:0px;
      margin:0px;
      padding:0px;
      background-color:fuchsia;
     }

    #right_container
     {
      float:right;
      width:36px;
      height:780px;
      border:0px;
      margin:0px;
      padding:0px;
      background-color:yellow;
     }

    </style>

    </head>

    <body>
    <div id="container">
     <div id="left_container">LEFTC</div>
     <!-- Reihenfolge geändert! -->
    <div id="head_container">HEADC</div>
     <div id="right_container">RIGHTC</div>
    </div>
    </body>
    </html>