Zur Navigation

IE-Fehler: Grafik verrutscht

1 Halvor (Gast)

Hallo!
Ich arbeite zur Zeit an der Seite des
AKFreizeiten

Im Firefox ist das auch alles fein, im IE 6.0 verrutscht die Grafik der runden Ecke, die ich links oben über den Hintergrund gelegt habe, minimal nach links. Aber sieht natürlich sch**** aus, wenn die nicht in der Verlängerung vom Hintergrund sitzt.

Das Ganze ist gebaut mit CSS, zwei Divs mit float nebeneinander gelegt, in den linken die runde Ecke und die Links, in den rechten die Wellenlinie oben und dann später der Inhalt.
Die CSS-Code ist hier:
CSS-Code

Wie kann ich das beheben?

Gruß und Dank im Voraus!
Halvor

19.12.2006 00:01

2 Jörg Kruse

Hallo Halvor,

hast du den Fehler schon behoben? In meinem IE 6 kann ich keine Verschiebung sehen..

19.12.2006 00:55

3 Halvor (Gast)

Ne, ich habe noch nichts gemacht. Hie rein vergrößerter Screenshot:
Rutscher

Wie gesagt: Ist minimal, aber doch nicht schön.

Gruß!
Halvor

19.12.2006 13:00

4 Jörg Kruse

Ok, ich weiß jetzt wie dieser Fehler aussieht; allerdings kann ich in meinem IE 6 diesen Anzeigefehler leider immer noch nicht reproduzieren, dort kann ich diese Verschiebung auch mit starker Vergrößerung nicht entdecken :/

19.12.2006 13:59

5 Rudy

Der Fehler taucht nur im IE7 auf, und zwar ist er auch dort abhängig von der Größe des Fensters. Wenn man es in die Breite zieht, so 'hüpft' der Hintergrund vom body immer ein paar Pixel und verrutscht dabei. Ein weiterer unschöner Effekt, wenn man diese Grafik dem Body als Hintergrund setzt, zeigt sich beim Ändern der Fenstergröße unter Firefox/Opera: da verschiebt sich der Hintergrund weiterhin zur Mitte, auch wenn das Fenster kleiner als die Breite des bodys wird. IE macht das auch Version 7 nicht, ich schätze aber das entspricht wie gewohnt nicht den W3C-Vorgaben.

Eine Lösung wäre, anstatt body ein umschließendes div für die Hintergrundgrafik zu verwenden:

HTML:
<body>
<div id="all">
  <div class="navigation">
	<img class="kurve" src="images/kurve.gif">
....
  <div class="inhalt">
	<img src="images/downtop.gif">
  </div>
  <div style="clear:both"></div>
</div>
</body>

CSS:
body {
   margin: auto;
   padding: 0;
   position: relative;
   height: 100%;
   width: 770px;
   background: #ccc;
}
div#all {
   background: #ccc url(images/back.gif) repeat-y 50% 0;
   height: 100%;
}

Dann verschiebt sich nichts mehr, aber dann sieht es wahrscheinlich nicht mehr so aus wie Du Dir das erhoffst. Divs sind eben keine Tabellen, deshalb bedeuted 100% Höhe die Höhe des Inhalts (so wie es sein soll), nicht die Höhe des Browserfensters (die eine ziemlich undurchsichtige Sache ist).

Edit@Jörg: mit striktem Doctype siehst Du die Verschiebung auch in IE6.

19.12.2006 17:31 | geändert: 19.12.2006 17:33

6 Jörg Kruse

Auch mit strictem Doctype sehe ich keine Verschiebung, weder im IE 6 noch im IE 7. Aber ist dies vielleicht auch eine Frage der Bildschirm-Auflösung:

Der Fehler taucht nur im IE7 auf, und zwar ist er auch dort abhängig von der Größe des Fensters.

Ich habe hier nur mit 1024*768 getestet

19.12.2006 21:14 | geändert: 19.12.2006 21:15

7 Rudy

Ich habe hier 1280x1024, auch wenn ich auf 1024x768 runterschalte, verschiebt sich die Grafik in IE6 und 7. Wirklich komischer Effekt - scheint so, als könnte IE nicht richtig Prozentrechnen (würde mich nicht wundern ;)) und fehlt deshalb bei bestimmten Fenstergrößen 2 Pixel ab.

Das Problem lässt sich hierauf reduzieren:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body { background: #ccc url(images/back.gif) repeat-y 50% 0; height: 100%; margin: 0 auto; padding: 0; width: 770px; }
html { margin: 0; padding: 0; }
</style>
</head>
<body>
<img src="images/kurve.gif">
</body>
</html>

19.12.2006 22:20

8 Halvor (Gast)

Ne, Bildschirmauflösung ist nicht entscheidend. Habe eine Freundin mit 1024*768 testen lassen, gleicher Fehler. Ich weiß aber nicht, welche IE-Version.

Tatsächlich ist es beim IE 6 auch von der Fenstergröße abhängig. Manchmal passts, manchmal nicht. Aber bei dem ist auch Rudys Vorschlag fensterfüllend...

Ich denke, mit der Lösung von Rudy kann ich leben, werde ich mich halt auf einer "maximal-Fenstergröße" festlegen, bei der die Seite ordentlich zu sehen ist.

Danke!

19.12.2006 22:22

9 Jörg Kruse

Jetzt habe ich die Verschiebung auch entdeckt - hatte vorher wohl durch Zufall nur die "falschen" Fenstergrößen probiert ;)

19.12.2006 22:32

10 Rudy

Ist mir auch passiert, deshalb zog ich den Schluss, der Doctype hätte das bewirkt. De facto ist es aber ein Problem von IE6/7 gleichermaßen, auch mit transitional.

19.12.2006 22:42

Beitrag schreiben (als Gast)

Die Antwort wird nach der Überprüfung durch einen Moderator freigeschaltet.





[BBCode-Hilfe]