✔ [css] IE suxx =) DIV-Container wird "falsch" dargestellt

[_root]

Hi ...

Ich bin total am verzweifeln.
Ich baue mir gerade eine Seite. In FF sieht die bis jetzt auch ganz gut aus ... nur im IE natürlich nicht.

---------------------------------------------------------------------------------------------

So soll es aussehen (Firefox)
http://my-root.org/v1/images/FF.gif

---------------------------------------------------------------------------------------------

Und so siehts im IE aus:
http://my-root.org/v1/images/IE.gif

---------------------------------------------------------------------------------------------

Hier ist das CSS zu sehen:
CSS - Datei

---------------------------------------------------------------------------------------------

Und hier die index-Datei:
index - Datei

---------------------------------------------------------------------------------------------

Vielleicht kann mir ja einer von euch netten Leuten helfen =)

MfG Tobi (alias aCid)

 

[Quaese]

Hi,

wirklich ein Layout, wo sich die IE-Bugs wohlfühlen.

Ein Phänomen ist die fehlerhafte linke Ausrichtung von Elementen, wenn float eingesetzt wurde.
Deshalb auch die Fehlpositionierung der Container für Banner, Menue, Photo, Content und Footer.

Weiterhin interpretieren die IE-Versionen 5.0 und 5.5 das Box-Modell falsch. Das heisst, das der linke
Innenabstand (padding) in die Breitenangabe mit einfliesst und die effektive Breite um 10 Pixel
zu kurz ausfällt.
Das gleiche Phänomen tritt bei der Höhe des main-Containers auf. Auch hier interpretieren IEs der
Version 5.x die Werte falsch und zeigen das Element zu niedrig an.

Lange Rede kurzer Sinn - du musst mit CSS-Filtern auf die oben beschriebenen Verhalte reagieren
und die Eigenschaften entsprechend anpassen.

Geändertes CSS:

body{
  background-image:url(images/background.png);
  font-family:Arial, Helvetica, sans-serif;
  font-size:10px;
  color:#3D3D3D;
}
ul {
  list-style-type:none;
  text-align:right;
  padding: 0px 0 0 0px;
  margin: 0px 0 0 0px;
}
ul a {
  color: #333;
  text-decoration: none;
  margin: 0;
  padding: 0px 0 0 0px;
}
ul a:hover {
  color: #FFFFFF;
  text-decoration:none;
  background-color:#000000;

}
li {
  font-size: 10px;
  margin: 0 20px 0 0;
  padding: 0px;
  float:right;
}
#main{
  width:700px;
  height:440px;
  background-color:#F1F1F1;
  border: 1px solid #A6A6A6;
  margin:0px auto;
  padding:10px 0 0 0px;
  background-image:url(images/background.gif);
  background-repeat:no-repeat;
}
/* Höhe für IEs 5.5 anpassen */
* html #main{
  height: 450px;
  /* Tantek Box Model Hack - Anschliessende Werte werden von IEs 5.x nicht */
  /* interpretiert. i{} ist Dummyklasse -> löst IE 5.x Verwirrung auf!     */
  voice-family: "\"}\"";
  voice-family: inherit;
  height: 440px;}i{}

#header{
  width:670px;
  height:65px;
  background-color:#FFFFFF;
  margin:0px 0 0 10px;
  padding:0px 0 0 10px;
}
/* Breite für IEs anpassen (ebenso für menucontainer, photocontainer, content und footer */
* html #header{ 
  width: 680px;   /* Box-Modell-Bug ausgleichen */
  w\idth: 670px;
}
#menucontainer{
  width:670px;
  height:20px;
  background-color:#FFFFFF;
  margin:10px 0 0 10px;
  padding:0px 0 0 10px;
}
* html #menucontainer{ 
  width: 680px;
  w\idth: 670px;
}
#photocontainer{
  float:left;
  width:230px;
  height:295px;
  background-color:#FFFFFF;
  margin:10px 0 0 10px;
  padding:0px 0 0 10px;
  top: 122px;
  left: 196px;
}
* html #photocontainer{
  margin: 10px 0 0 5px;   /* fehlerhaften linken Abstand ausgleichen */
  width: 240px;
  w\idth: 230px;
}
#content{
  width:420px;
  height:295px;
  background-color:#FFFFFF;
  margin:10px 0 0 260px;
  padding:0px 0 0 10px;
}
* html #content{
  margin:10px 0 0 257px;
  width: 430px;
  w\idth: 420px;
}
#footer{
  width:670px;
  height:20px;
  background-color:#FFFFFF;
  margin:10px 0 0 10px;
  padding:0px 0 0 10px;
}
* html #footer{
  width: 680px;
  w\idth: 670px;
}

Ciao
Quaese

 

[_root]

Quaese ... darf ich dich so ein bisschen als mein GOTT betiteln

 

[Quaese]

Solange es keine religiösen Ausmasse annimmt und ich mich morgens nicht am Fenster
zeigen musss ... ok ;-)

Ciao
Quaese