pixelgenaues CSS-Boxen-Layout mit IE

Manuelito

Hallo,

ich habe mit CSS-Boxen ein pixelgenaues Design für eine Homepage erstellt. Der Quellcode sieht folgendermaßen aus:

<div id="seite">
    <div id="streifenlinks"></div>
    <div id="streifenobenlinks"></div>
    <div id="streifenoben"></div>
    <div id="streifenobenrechts"></div>
    <div id="streifenrechts"></div>
    <div id="streifenuntenrechts"></div>
    <div id="streifenunten"></div>
    <div id="streifenuntenlinks"></div>
    <div id="logo"><img src="logo.jpg"></div>
    <div id="fussdreieck"><img src="fussdreieck.jpg"></div>
    <div id="titel"><font size="+1">Herzlich Willkommen auf der Homepage von Lerch Metallbau</font></div>
    <div id="fussnote">&copy; Lerch Metallbau GmbH</div>
   <div id="navi">
     <img src="Navi01.jpg">
     <img src="Navi02.jpg">
     <img src="Navi03.jpg">
     <img src="Navi04.jpg">
     <img src="Navi05.jpg">
     <img src="Navi06.jpg">
   </div>
   <div id="inhalt">
     <font size="+10">Text, Text, Text, Text<br></font>
   </div>
   </div>

Die CSS-Datei so:

* {padding: 0;
   border: 0;
   margin: 0;}

body {margin: 5px;}

img {border: 0px}

#seite {position: relative;
        height: 100%;
        width: 100%;}

#logo {position: absolute; top: 0; left: 5;
       width: 344px;
       height: 157px;}

#fussdreieck {position: absolute; right: 25px; bottom: 0px;
             width: 150px;
             height: 69px;}

#streifenlinks {position: absolute; top: 114px; left: 0; bottom: 44px;
                width: 4px;
                background-image:url("strlinks.jpg");}

#streifenobenlinks {position: absolute; top: 103px; left 0px;
                    width: 5px;
                    height: 11px;
                    background-image:url("strobenlinks.jpg");}

#streifenoben {position: absolute; top: 104px; left: 344px; right: 20px;
               height: 10px;
               background-image:url("stroben.jpg");
               background-repeat:repeat;}

#streifenobenrechts {position: absolute; top: 104px; right: 0;
                     width: 20px;
                     height: 10px;
                     background-image:url("strobenrechts.jpg");}

#streifenrechts {position: absolute; top: 114px; right: 0; bottom: 45px;
                 width: 4px;
                 background-image:url("strrechts.jpg");}

#streifenuntenrechts {position: absolute; right: 0; bottom: 35px;
                      width: 4px;
                      height: 10px;
                      background-image:url("struntenrechts.jpg");}

#streifenunten {position: absolute; right: 4px; bottom: 35px; left: 7px;
                height: 10px;
                background-image: url("strunten.jpg");}

#streifenuntenlinks {position: absolute; left: 0px; bottom: 35px;
                     height: 9px;
                     width: 7px;
                     background-image:url("struntenlinks.jpg");}

#titel {position: absolute; left: 400px; top: 40px;
        text-align: left;
        font-weight: bold;}

#fussnote {position: absolute; right: 185px; bottom: 10px;
          text-align: right;}

#navi {position: absolute; top: 210px; left: 30px;
       width: 126px;
       height: 300px;}

#inhalt {position: absolute; top: 190px; left: 250px; right: 20px; bottom: 90px;
         padding: 10px;}

Mit Opera und Firefox sieht das auch so aus, wie es sein soll, zu sehen hier.
Der Internetexplorer verkackt das jedoch. Manche Boxen sind doppelt so hoch und dafür haben andere überhaupt keine Breite zu haben.
Hat einer eine Idee, wie ich einen Hack für den IE schreiben kann?

Grüße,
Manuelito

zwutz

du bist nicht im Printdesing... pixelgenaues Arbeiten ist vergebene Liebesmüh, da du keinen Einfluss drauf hast, wie es beim User letztendlich aussieht.

es gibt ein paar Punkte, die zu bemängeln sind. Wenn du bereit bist, deine Seite zu verbessern (und zwar ohne IE Hacks, weil der in deinem Fall eh nichts bringt), dann greif ich dir gern unter die Arme (zumindest, was ein paar Ratschläge anbelangt.
Allerdings erfordert das eine Neugestaltung der Seite