IE komptibel

[spaeg]

Hallo,
ich muss eine Webseite gestalten was mir im Moment etwas kopfzerbreichen bereitet. Ich bin kein HTML- und CSS-Freak, wollte aber gern diese Mittel nutzen. Mein grösstes Problem liegt nun darin das der IE 6 weie auch 7 macht was er will. Was in Opera und Firefox gut aussieht wird vom IE einfach über den Haufen geworfen, habe ich den Eindruck.

Verwendet habe ich aber laut selfhtml.de nur CSS- und HTML-Elemente die beide Versionen auch unterstützen. Ich muss sagen ich bin mit meinem Latin am Ende und ich weiß nicht mehr wo die Fehler liegen. Deswegen wende ich mich an euch, in der Hoffnung das ihr mir die Schwachstellen meines Tuns zeigen könnten.

Die Seite findet ihr unter < http://home.arcor.de/junge-gemeinde/Diplomarbeit/index.html> und die entsprechende css-Datei unter http://home.arcor.de/junge-gemeinde/Diplomarbeit/style.css

Meine grössten Probleme sind:

1. Client: das erste Bild wird im Op und FF ohne Scrollbalken dargestellt im IE nicht. Meine Idee hier ist das das Bild vielleicht zu breit ist. Nur wenn ich statt der konkreten Breite eine relative von 100% o.ä. angebe funktioniert das Konstrukt absolut nicht mehr.

2. Client: der Abstand zwischen dem vorletzten und dem letzten Bild ist ...nicht vorhanden. Am Quelltext bzw. Aufbau des Konstrukts hat sich aber nix geändert.

3. Übung: in den gelben Kästen wird die Formatierung sowie Einrückung einfach nicht bzw. nur halb übernommen. Zeilenumbrüche sind meine Schuld weil ich unter Linux arbeite und ich noch auf die Windowszeilenumbrüche umrüsten muss oder?

4. Ansosnten habe ich das letzte mal im IE 6 gesehen, das die Seitenleiste auf machen Seiten nicht mit dem Hintergrund aufgefüllt wird, wenn kein Text mehr drinne steht obowhl ich der Meinung bin, dass ich dieses div so gestaltet habe, dass das Bild vertikal unbegrenzt wiederholt wird.

Ich danke euch schonmal im vorraus.

Viele Grüße
spaeg

[Cheatah]

Hi,

Mein grösstes Problem liegt nun darin das der IE 6 weie auch 7 macht was er will. Was in Opera und Firefox gut aussieht wird vom IE einfach über den Haufen geworfen, habe ich den Eindruck.

willkommen in unserer Hölle.

Verwendet habe ich aber laut selfhtml.de nur CSS- und HTML-Elemente die beide Versionen auch unterstützen.

"Unterstützen" heißt nicht "korrekt unterstützen". Der IE macht in allen Versionen viel falsch - sehr viel. So kann er zwar grundsätzlich mit der float-Eigenschaft etwas anfangen, aber die Bugs die hierdurch getriggert werden können, gehen auf keine Kuhhaut mehr.

Ich muss sagen ich bin mit meinem Latin am Ende

Dann nimm UTF-8.

SCNR ;-)

Die Seite findet ihr unter http://home.arcor.de/junge-gemeinde/Diplomarbeit/index.html

Erst mal herzlichen Glückwunsch zum validen und sogar ziemlich semantischen Code. Das schafft nicht jeder. Darüber hinaus gefällt mir die Farbgestaltung - zumindest in Firefox. Auf rosa Hintergrund lässt sich der Text noch recht gut lesen; beim Orange des IE ist das schon deutlich schlechter. Vielleicht solltest Du eine andere Farbe angeben.

Das größte Problem, dass ich ansonsten sehe, ist die Verwendung von PNG-Grafiken mit Alphatransparenzen. Der IE kapiert das nur, wenn man ihn dazu prügelt, und rächt sich dann für die blauen Flecke. Verzichte besser (zumindest im IE) auf 24-Bit-PNG.

1. Client: das erste Bild wird im Op und FF ohne Scrollbalken dargestellt im IE nicht.

Ich habe in IE 6 und Seamonkey die selbe Menge, Position und Funktion Scrollbalken: Einen, rechts, scrollen der Seite.

2. Client: der Abstand zwischen dem vorletzten und dem letzten Bild ist ...nicht vorhanden. Am Quelltext bzw. Aufbau des Konstrukts hat sich aber nix geändert.

Nein, aber der IE verändert sein Rendering (von "falsch 1" zu "falsch 2") je nachdem, welche Elemente über die hasLayout-Eigenschaft verfügen.

3. Übung: in den gelben Kästen wird die Formatierung sowie Einrückung einfach nicht bzw. nur halb übernommen.

Ich tippe mal, die Schachtelung von <pre> und <code> sagt ihm nicht zu. Verwende die white-space-Eigenschaft.

Zeilenumbrüche sind meine Schuld weil ich unter Linux arbeite und ich noch auf die Windowszeilenumbrüche umrüsten muss oder?

Nein, das geht auch so.

Cheatah

[spaeg]

Also erstmal vielen Dank an die schnelle Antwort, das ist so nicht immer zu erwarten.

Ich werde mich später wieder genauer damit befassen.

Erst mal herzlichen Glückwunsch zum validen und sogar ziemlich semantischen Code. Das schafft nicht jeder. Darüber hinaus gefällt mir die Farbgestaltung - zumindest in Firefox. Auf rosa Hintergrund lässt sich der Text noch recht gut lesen; beim Orange des IE ist das schon deutlich schlechter. Vielleicht solltest Du eine andere Farbe angeben.

Die Farben sind aber bei dir so eingestellt oder, weil ich habe nirgendwo so interresante Hintergrundfarben definiert und bei mir ist der Hintergrund weiß. Aber danke für den Tipp, sollte ja reichen wenn ich den allg. Hintergrund weiß deklariere und die Schrift noch etwas dunkler mache.

Das größte Problem, dass ich ansonsten sehe, ist die Verwendung von PNG-Grafiken mit Alphatransparenzen. Der IE kapiert das nur, wenn man ihn dazu prügelt, und rächt sich dann für die blauen Flecke. Verzichte besser (zumindest im IE) auf 24-Bit-PNG.

Wie kann ich im nur für den IE andere Bilder laden, oder habe ich dich da gerade falsch verstanden. Das ist doch bestimmt mit js verbunden und davon hab ich nun echt keinen Schimmer deswegen wollte ich komplett ohne js auskommen.
Aber ein Verzicht auf PNG würde ja bedeuten das für Transparenzen nur noch GIF in Frage kommen würde, weil doch JPG das nicht unterstützt.

Gruss Thomas

[LX]

Was die Bilder angeht, hast Du 3 Möglichkeiten:

• Du verwendest weiterhin PNGs, ersetzt aber den transparenten Hintergrund durch einen farbigen, so dass keine Transparenz mehr vorhanden ist.
• Du verwendest ein anderes Bildformat (bspw. GIF oder JPG).
• Du überredest den MSIE zur fast funktionsfähigen Darstellung transparenter Bilder, entweder über CSS oder HTC (entsprechende Lösungen lassen sich leicht mit den Begriffen "transparent PNG MSIE" googeln).

Gruß, LX

[spaeg]

Also wie ich geschrieben habe, ist die Seite ja erstmal fertig. Der Test mit dem IE 7 allerdings hat mir wieder ein paar Probleme aufgeworfen. Einige konnte ich beseitigen, aber eines besteht immer nocht.
Und zwar werden in den <code></code>-Blöcken die <span class="syn"></span>-Blöcke nicht richtig angezeigt bzw. die Formatierung "fett" wird nicht umgesetzt.

  
code {  
  font-size: 90%;  
  display: block;  
  width: 100%;  
  color: #000;  
  background-color: #ffffcc;  
  border: 1px #000 solid;  
  white-space: pre;  
  padding-left: 10px;  
  overflow-x: auto; /* Use horizontal scroller if needed; for Firefox 2, not needed in Firefox 3 */  
}  
code span.syn {  
  font-weight: bold;  
}  

Aber das passiert nur im IE 7, im IE6 geht es. Woran kann das liegen?

Danke und Gruß

spaeg

[Cheatah]

Hi,

Die Farben sind aber bei dir so eingestellt oder,

ja.

weil ich habe nirgendwo so interresante Hintergrundfarben definiert

Genau dies ist das Problem ;-)

Wie kann ich im nur für den IE andere Bilder laden,

Die vierte Möglichkeit, die LX vergessen hat, ist die Vermittlung anderer Grafiken nur an den IE mittels CSS-Hacks, etwa dem Star-HTML-Hack.

Das ist doch bestimmt mit js verbunden

Nope.

Aber ein Verzicht auf PNG würde ja bedeuten das für Transparenzen nur noch GIF in Frage kommen würde, weil doch JPG das nicht unterstützt.

Korrekt. Im IE ist die Qualität damit möglicherweise etwas reduziert; andere leiden nicht darunter.

Cheatah

[spaeg]

Danke an euch beide. Ihr habt mir das Wochenende gerettet. Dank euch habe ich wieder etwas dazu gelernt, auch gerade was den Umgang mit dem Internet Explodierer angeht. Vielen Dank nochmal.

Das Ergebnis kann man sich hier nochmal betrachten
< http://home.arcor.de/junge-gemeinde/Diplomarbeit/index.html>

Ich bin soweit erstmal zufrieden, auch wenn es immer noch besser geht. Aber die Feinheiten kommen dann mit der Zeit.

Gruß

spaeg