markusweber_bettringen: Dreispaltiges Layout mit festem Heater / Fooder

Beitrag lesen

Hallo Post!
Ich schraube jetzt schon den ganzen nachmittag an einem neuen Design.

  • Header (fixiert)
  • Dreispaltiges Layout mit CSS
  • Fooder (fixiert)

Im IE sieht es in etwa schon so aus, wie es werden soll, im FF rutscht ein Teil der drei Spalten unter den fixierten Header. Im IE ist zusätzlich der Fooder nicht zu bewegen, sich an den unteren Rand des Fensters zu bewegen.

Hier mein Problem:

Klick!

Das zugehörige CSS:

  
/* ------------ Alles auf Null setzen für Internet Explorer ----------------------------- */  
  
body  
         {  
         margin:0px;  
         padding:0px;  
         width:100%;  
         font-size: 100.01%;  
         }  
  
/* --------- Footer: Angaben nur für den Internet Explorer mittels Star-HTML-Hack ------------- */  
  
* html, * html body {  
         overflow:hidden;  
         }  
  
* html container {  
         overflow: auto;  
         }  
  
/* ---------- Kopfzeile (head) und Hauptteil (container) um Kopfzeile zu fixieren --------- */  
  
#head    {  
         width: 100%;  
         position: fixed;  
         top:0px; left:0px; right:0px;  
         background:#efefef;  
         text-align: left;  
         margin: 0px  
         padding: 0px;  
         background-color: #FFFFFF  
         }  
  
/* ---------------- Kopfzeile: für Internet Explorer --------------------------- */  
  
  
#container  
         {  
         margin-top: 0px;  
         padding-top: 0px;  
         padding-bottom: 20px;  
         padding-left: 0;  
         }  
  
/* ----------------- Leiste "Du bist hier" ------------------------------------- */  
  
.leiste  {  
         width: 100%;  
         font-size: 10px;  
         color: #FFF;  
         font-family: verdana, sans-serifarial, helvetica, tahoma;  
         vertical-align: middle;  
         height: 16px;  
         border-bottom: solid 0px #FFF;  
         margin: 0px;  
         padding: 0px;  
         padding-left: 5px;  
         background-image: url(images/start/button.jpg);  
         background-repeat: repeat-x;  
         clear: both;  
         }  
  
.leiste a, .leiste a:visited , .leiste a:active, .leiste a:hover {  
         color: #FFF;  
         background:transparent;  
         font-size: 10px;  
         font-family: verdana, sans-serifarial, helvetica, tahoma;  
         text-decoration: none;  
         }  
  
  
  
/* ---------------- Einstellungen Schriften Hauptteil ------------------------------ */  
  
h1       {  
         font-family: verdana, sans-serif, arial, helvetica, tahoma;  
         color:#FF8D02;  
         margin-bottom:20px;  
         letter-spacing:0px;  
         font-size: 19px;  
         border-bottom:dashed 1px #FF8D02;  
         padding-bottom:4px;font-style:italic;  
         }  
  
p        {  
         margin: 0px;  
         font-family: verdana, sans-serif, arial, helvetica, tahoma;  
         font-size:12px;  
         text-align: justify;  
         }  
  
blockquote {  
         padding: 0 0 0 94px;  
         background: url(images/quote.gif) no-repeat;  
         font: italic small Times,Georgia,verdana, helvetiva,  "Times New Roman",  serif;  
         font-size: 22px;  
         height:80px  
         }  
  
/* ----------- Kasten Navigation (links) Einstellungen -------------------------------------*/  
  
div#navi {  
         clear: both;  
         float: left;  
         width: 150px;  
         background-color: #000000;  
         }  
  
a.navi   {  
         width: 140px;  
         margin-top: 4px;  
         color: #fff;  
         background-color: #666;  
         display: block;  
         font-family: verdana, sans-serif, arial, helvetica, tahoma;  
         font-size: 12px;  
         font-weight:bold;  
         }  
  
a.navi:link    {  
         color:#ccc;  
         background-color:transparent;  
         border:1px solid #000;  
         text-decoration:none;  
         }  
  
a.navi:visited {  
         color:#ccc;  
         background-color:transparent;  
         border:1px solid #000;  
         text-decoration:none;  
         }  
  
a.navi:hover {  
         color:#fff;  
         background-color:transparent;  
         border:1px solid #fff;  
         text-decoration:none;  
         }  
  
a.navi:active {  
         color:#fff;  
         background-color:transparent;  
         border:1px solid #fff;  
         text-decoration:none;  
         }  
  
div.navi {  
         color:#000;  
         background-color:#ccc;  
         border:1px solid #000;  
         width:200px;  
         text-align:center;  
         padding:10px;  
         }  
  
  
/* -------- Kasten Neuigkeiten  (rechts) Einstellungen -----------------------------------------*/  
  
div#news {  
         float: right;  
         width: 150px;  
         background-color: #FFFFFF;  
         }  
  
h1.news   {  
          font-family: verdana, sans-serif, arial, helvetica, tahoma;  
          color:#FF8D02;  
          margin-bottom:20px;  
          border: none;  
          letter-spacing:0px;  
          font-size: 15px;  
          padding-bottom:4px;font-style:italic;  
         }  
  
/* -------- Kasten Hauptteil Einstellungen ---------------------------------------------------*/  
  
div#main {  
         padding: 0px 160px 5px 160px;  
         margin: 0px;  
         background-color: #FFFFFF;  
         }  
  
/* -------------- Footer Einstellungen -----------------------------------------------------*/  
  
#footer {  
         position:fixed;  
         bottom:0px;  
         width:100%;  
         color: #fff;  
         vertical-align: middle;  
         height: 20px;  
         border-bottom: solid 0px #fff;  
         margin: 0px;  
         padding: 0px;  
         padding-left: 5px;  
         background-image: url(images/start/button.jpg);  
         background-repeat: repeat-x;  
         }  
  
#footer p {  
         font-size: 12px;  
         font-family: verdana, sans-serif, arial, helvetica, tahoma;  
         text-align:center;  
         }