x-mac: "Fehlerhafte" Darstellung von Div's im IE

Beitrag lesen

SELF-Forum

"Fehlerhafte" Darstellung von Div's im IE

x-mac
– Informationen zu den Bewertungsregeln

Hallo zusammen,

ich habe nun die halbe Nacht an folgendem Problem gesessen und es nicht lösen können. Vielleicht kann mich ja mal einer von dem Schlauch heben auf dem ich stehe. Danke schon mal im vorraus!

Ich habe folgende CSS Datei:

  
/* CSS Document */  
  
    body { font-size: 12px; font-family: Helvetica,Arial,sans-serif;}  
  
    #Fix1 {position: absolute; left:0; top:0; bottom: 85%; width: 10%; height: 15%; background-color: #af9e93; }  
    #Logo {position: absolute; left:10%; top:0; bottom: 85%; width: 80%; height:15%; background-color: #af9e93;}  
    #Fix2 {position: absolute; left:90%; top:0; bottom: 85%; width: 10%; height:15%; background-color: #af9e93;}  
    #Fix3 {position: absolute; left:0; top: 15%; bottom: 70%; width: 10%; height:15%; background-color: #af9e93;}  
    #Var1 {position: absolute; left:0; top: 30%; bottom: 5%; width: 10%; height:65%; background-color: #FF8c00;}  
    #Fix4 {position: absolute; left:10%; top: 15%; bottom: 80%; width: 15%; height:5%; background-color: #af9e93;}  
    #Menue {position: absolute; left:10%; top: 20%; bottom: 10%; width: 15%; height:70%; background-color: #FFF5EE;}  
    #Var2 {position: absolute; left:10%; top: 90%; bottom: 5%; width: 15%; height:5%; background-color: #FF8c00;}  
    #MainC3 {position: absolute; left:25%; top: 15%; bottom: 5%; width: 15%; height:80%; background-color: #FFF5EE;}  
    #Breadcrumbs {position: absolute; left:40%; top: 15%; bottom: 80%; width: 50%; height:5%; background-color: #af9e93;}  
    #Content {position: absolute; left:40%; top: 20%; bottom: 10%; width: 50%; height:70%; background-color: #FFF5EE; overflow: auto;}  
    #Var3 {position: absolute; left:40%; top: 90%; bottom: 5%; width: 50%; height:5%; background-color: #FF8c00;}  
    #Fix6 {position: absolute; left:90%; top: 15%; bottom: 70%; width: 10%; height:15%; background-color: #af9e93;}  
    #Var4 {position: absolute; left:90%; top: 30%; bottom: 5%; width: 10%; height:65%; background-color: #FF8c00;}  
    #Copyright{position: absolute; left:0; top: 95%; bottom: 0%; width: 100%; height:5%; background-color: #FF8c00;}

und die entsprechende Webseite die auf diese CSS referenziert:

  
<html>  
  <head>  
   <link href="./css/template.css" rel="stylesheet" type="text/css"/>  
  </head>  
  <body style="overflow:auto;">  
    <div id="Fix1">f1</div>  
    <div id="Logo">Logo</div>  
    <div id="Fix2">f2</div>  
    <div id="Fix3">f3</div>  
    <div id="Var1">v1</div>  
    <div id="Fix4">f4</div>  
    <div id="Menue">menue</div>  
    <div id="Var2">v2</div>  
    <div id="MainC3">Pics</div>  
    <div id="Breadcrumbs">Bread</div>  
    <div id="Content">Content</div>  
    <div id="Var3">v3</div>  
    <div id="Fix6">f6</div>  
    <div id="Var4">v4</div>  
    <div id="Copyright">Copy</div>  
  </body>  
</html>

Im Firefox werden die Div's nahtlos aneinander gefügt, so wie es auch sein soll, im Opera sind je nach Skalierung winzige "Nähte" zu sehen, aber auch damit könnte ich leben, aber der IE macht wunderwerke der Lücken zwischen den einzelnen Div's, vorallem in der Breite. Kann mir da jemand einen Rat geben? (Ich weiss, IE weglassen ist ne gute Idee, aber leider noch nicht praktikabel).

Danke und viele Grüße ins WWW
x-mac

Beitrag melden
–
Informationen zu den Bewertungsregeln