Probleme mit den verschieden Browsern

[Paul]

Guten Abend,
ich habe ein Problem mit CSS. Ich habe für meine Seite ein CSS Layout gemacht, damit es auch bei mehreren Auflösungen noch gut aus sieht, habe ich es alles mit Prozent Angaben gemacht, nur das Problem ist, dass beim IE alles total verzogen und zerstückelt ist, doch bei Mozilla super aussieht und auch so wie es sein soll, da ich mit der Homepage möglichst viele Leute erreichen möchte und halt die meisten den IE nutzen, brauche ich eure Hilfe. Hätte ich ihr noch eine Idee, wie ich es hinbekommen könnte, dass es sowohl gut bei verschiedenen Browsern und Auflösungen aussieht? Ich habe so ziemlich das selbe Layout auch noch mal mit Pixel Angaben, da ist nur das Problem mit den verschiedenen Auflösungen, aber dafür kein Problem mit den Browsern.
mfG Paul

[Gunnar Bittersmann]

Hello out there!

damit es auch bei mehreren Auflösungen noch gut aus sieht

<leier alter="alt">
Die Auflösung ist für einen Webseitenautor irrelevant.

Die Auflösung hat nichts mit der Größe des Anzeigebereichs im Browser (Viewport) zu tun. Manche Nutzer haben den Browser nicht im Vollbildmodus, manche haben Sidebars ...
</leier>

Ich habe so ziemlich das selbe Layout auch noch mal

Schön für dich, dass du es hast. Wir haben es nicht.

See ya up the road,
Gunnar

[Paul]

also der Quelltext des Layouts mit den Pixel Angaben schaut so
aus:

<style type="text/css">
<!--
 div {border: 1}
 #Logo { position:absolute; left: 175px; top: 0px; height: 85px; width: 554px; border-bottom: 0px solid black; border-left: 1px solid black; border-right: 0px solid black; }
 #Navi { position:absolute; left: 175px; top: 85px; height: 915px; width: 160px; background-color:#DDDDDD;border-left: 1px
solid black; border-bottom: 1px solid black; border-top: 1px solid black; border-right: 0px solid black; }
 #Text { position:absolute; left: 335px; top: 85px; height: 915px; width: 394px; background-color:#D4D0b8;border-top: 1px solid black; border-bottom: 1px solid black; border-left: 1px solid black; }
 #Shoutbox { position:absolute; left: 729px; top: 0px; height: 1000px; width: 200px; background-color:#DDDDDD;border-bottom: 1px solid black; border-right: 1px solid black; border-left: 1px solid black }
//-->
</style>

und der mit den Prozent Angaben:

<style type="text/css">
<!--
 div {border: 1;}
 #Logo { position:absolute; left: 12%; top: 0%; height: 15%; width: 53.1%; border-bottom: 1px solid black; border-left: 1px solid black; border-right: 1px solid black; }
 #Navi { position:absolute; left: 12%; top: 15%; height: 150%; width: 18.0%; background-color:#DDFFBB;border-bottom: 1px solid black; border-left: 1px solid black; border-right: 1px solid black; }
 #Text { position:absolute; left: 30.2%; top: 15.2%; height: 150%; width: 35.0%; background-color:#CCFF99;border-bottom: 1px solid black; border-left: 0px solid black; border-right: 1px solid black; }
 #Shoutbox { position:absolute; left: 65.1%; top: 0%; height: 165.2%; width: 19.5%; background-color:#DDFFBB;border-bottom: 1px solid black; border-left: 1px solid black; border-right: 1px solid black; }
//-->
</style>

vielleicht könnt ihr mir ja jetzt weiter helfen. Ich weiß auch nicht ob alles so richtig ist, weil ich mich noch nicht so viel mit CSS beschäftigt habe.

mfG Paul

[Gunnar Bittersmann]

Hello out there!

<style type="text/css">
<!--

Die Auskommentierung ist unnötig; weg mit den HTML-Kommentarzeichen aus dem Stylesheet.

div {border: 1}

Das ist eine ungültige Angabe. (1 wovon?)

Dein Stylesheet wäre übersichtlicher, wenn nicht alle Angaben in einer Zeile stünden. [Meiert]

<style type="text/css">  
[code lang=css]  div {  
    border: 1px;  
  }  
  #Logo {  
    position: absolute;  
    left: 12%;  
    top: 0%;  
    height: 15%;  
    width: 53.1%;  
    border-bottom: 1px solid black;  
    border-left: 1px solid black;  
    border-right: 1px solid black;  
  }  
  #Navi {  
    position: absolute;  
    left: 12%;  
    top: 15%;  
    height: 150%;  
    width: 18.0%;  
    background-color: #DDFFBB;  
    border-bottom: 1px solid black;  
    border-left: 1px solid black;  
    border-right: 1px solid black;  
  }  
  #Text {  
    position: absolute;  
    left: 30.2%;  
    top: 15.2%;  
    height: 150%;  
    width: 35.0%;  
    background-color: #CCFF99;  
    border-bottom: 1px solid black;  
    border-left: 0px solid black;  
    border-right: 1px solid black;  
  }  
  #Shoutbox {  
    position: absolute;  
    left: 65.1%;  
    top: 0%;  
    height: 165.2%;  
    width: 19.5%;  
    background-color: #DDFFBB;  
    border-bottom: 1px solid black;  
    border-left: 1px solid black;  
    border-right: 1px solid black;  
  }

</style>[/code]

Das ändert natürlich nichts an deinem Problem, hilft aber vielleicht bei der Lösung.

See ya up the road,
Gunnar