Darstellungsproblem mit IE @ tutorials.de: Tutorials, Forum & Hilfe

age-pee · 09.06.05 20:44

Hallo, habe eine partyseite gebaut, welche im firefox wunderbar aussieht aber im IE mal wieder völlig vermurgst aussieht. Laut dem validator vom w3c ist die css-datei natürlich auch fehlerfrei...

Und hier ist die seite. Auf die inhalte müsst ihr allerdings nit achten. die sind momentan noch größtenteils dummies.

Genau gesagt gehts um die positionierung der grafiken. Das feuer soll links unten stehen und Elmo rechts unten und beim scrollen sollen sie auch da bleiben wo sie sind. Natürlich sollen sie auch bei größenänderungen vom browser in den jeweiligen ecken liegen bleiben. Um die hintergrundbilder in den kästen, welche wegen dem firefox grad noch pngs sind gehts mir gar nit...

Hier die css-datei dazu:

Code :

  body {
    background-color: #420101;
    background-image: url(../images/header_02.jpg);
    background-repeat: repeat-x;
    background-position: 290px 0px;
    background-attachment: fixed;
    color: White;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 16px;
    margin: auto;
    padding: 0;
  }
  
  .top {
    position: fixed;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 120px;
    z-index: 2;
  }
  
  .head1 {
    position: fixed;
    top: 0;
    left: 0;
    width: 290px;
    height: 73px;
    background-image: url(../images/header_01.jpg);
    z-index: 0;
  }
  
  .head3 {
    position: fixed;
    top: 73px;
    left: 0px;
    width: 290px;
    height: 131px;
    background-image: url(../images/header_03.jpg);
    z-index: 0;
  }
  
  .head4 {
    position: fixed;
    top: 204px;
    left: 0px;
    width: 290px;
    height: 196px;
    background-image: url(../images/header_04.jpg);
    z-index: 0;
  }
  
  .naviBar {
    position: fixed;
    left: 0;
    top: 0;
    width: 150px;
    height: 100%;
    z-index: 0;
  }
  
  .navi {
    position: fixed;
    left: 20px;
    top: 80px;
    padding: 5px;
    z-index: 3;
    background-image: url(../images/BG.png);
    border: 2px dashed white;
  }
  
  .content {
    position: absolute;
    left: 30%;
    top: 80px;
    margin-left: -25px;
    padding: 10px;
    width: 500px;
    z-index: 3;
    background-image: url(../images/BG.png);
    border: 1px dashed white;
  }
  
  .bottom {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 400px;
    height: 113px;
    background-image: url(../images/fire.png);
    z-index: 2;
  }
  
  .elmo {
    position: fixed;
    right: 0;
    bottom: 0px;
    padding: 0;
    margin: 0;
    background-image: url(../images/elmo.gif);
    height: 155px;
    width: 175px;
  }
  
  .pageHeader {
    font-weight: bold;
    font-size: 16pt;
    padding: 5px;
    background-image: url(../images/BG.png);
    border-bottom: 1px dotted white;
  }
   
  .bookForm {
    position: absolute;
    top: 10px;
    left: 10px;
  }
  
  .inputText {
    position: absolute;
    top: 17px;
    left: 157px;;
  }
  
  textarea, input {
    background-color: #420101;
    border: solid white 1px;    
    color: White;
  }
  
  .buttons {
    position: absolute;
    top: 176px;
    left: 0px;
  }
  
  .item {
    border: solid white 1px;
    background-image: url(../images/BG.png);
  }
  
  .subItem {
    font-weight: bold;
    padding: 5px;
    background-image: url(../images/BG.png);
    border-bottom: 1px dotted white;
  }
  
  .text {
    padding: 5px;
  }
  
  .table {
    border: 1px solid white;
    background-image: url(../images/BG.png);
  }
  
  .tableHead {
    font-weight: bold;
    border-bottom: 1px dotted white;
    background-image: url(../images/BG.png);
    padding: 5px;
  }
  
  td {
    border: 1px dotted white;
  }
  
  a:link, a:visited  {
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 11pt;
    color: white;
    text-decoration:none;
  }
  
  a:hover, a:active  {
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 11pt;
    color: white;
    text-decoration:underline;
  }

Wäre wunderbar wenn mir jemand sagen könnte wie mand em IE klar mach wie er das zeug darzustellen hat.

MFG
age-pee

rootssw · 10.06.05 22:21

Hallo!

Das liegt daran, dass der IE position:fixed nicht kennt.
Die Positionierung der Elemente sollte richtig sein. Nur solltest du z. B. bei Elmo folgendes machen:

HTML-Code:

.elmo {
  position: absolute;
  right: 0;
  bottom: 0px;
  padding: 0;
  margin: 0;
  background-image: url(../images/elmo.gif);
  background-attachment: fixed;
  height: 155px;
  width: 175px;
  }

Dabei kommt es mir auf background-attachment: fixed; an.

daddz · 10.06.05 22:28

Das Gästebuch wird bei mir irgendwie verschoben angezeigt. Die Leisten wo man Name und Email reinschreibt, sind total komisch da und überdecken den Text.
Browser: FF 1.04

greetz
daddz

Dr Dau · 11.06.05 01:33

Hallo!

Bei mir mit dem IE5.5 dass gleiche wie daddz schon geschrieben hat.
Zusätzlich ragt die Textarea eine halbe Scrollbalken Breite über den gepunkteten Rand nach rechts hinaus.

Code :

Versuche mal
<!--[if IE 6]>
gegen
<!--[if IE]>
zu tauschen

Ersteres bezieht sich nämlich auf den IE ab 6.0, zweiteres auf den IE ab 5.0.

Auch scheint irgendetwas bei der Textübergabe (durch PHP generierter Text?) schief zu laufen.

Code :

1 2	G䳴ebuch Eintritt 1€ <-- hier wird mir auf der Seite auch nur ein Kästchen für das Eurosymbol angezeigt

Gruss Dr Dau

age-pee · 11.06.05 04:04

ja danke euch erst mal!

also das mit dem text scheint neu zu sein. is mir auch grad erst aufgefallen kurz bevor ich hier rein geguckt hab und die komisch verschobenen gästebuchdivs sin mir zwischendurch auch aufgefallen, hatte nur noch keinen bock da nachzuforschen

background-attachment:fixed geht auch nit, da sich das ja nur auf das jeweilige element bezieht. wie im body in welchem ich das hintergrundbild auf fixed gesetzt hab. also wenn das div mitscollt dann halt auch dessen hintergrundbild

hab zwischendurch auch noch andere sachen ausprobiert und jetzt sind die divs zwar scheinbar fixed aber der scrollbalken ist weg und durch text markieren und mouse runter ziehen kann man auch nit scrollen...

mfg
age-pee

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

Darstellungsproblem IE

Darstellungsproblem

Darstellungsproblem mit IE 7

Darstellungsproblem IE

FF vs. IE: Darstellungsproblem

E-Mail:

Abonnieren Abbestellen