Geslicetes Bild zentrieren im IE

Computer: Software & Programmierung HTML & CSS
#1

Moin,

ich hab ein kleines Problem mit meiner Webseite und suche eine schnelle und simple Lösung. Ich arbeite an einer Seite, die rein graphisch aufgebaut ist und die deshalb auch nur aus einem großen Bild besteht, dass aus technischen Gründen gesliced wurde. Damit das ganze gut kommt habe ich das ganze noch horizontal und vertikal zentriert.

Lange Rede, kurzer Sinn: Alle Browser zeigen es korrekt an, nur der IE nicht. Er zentriert nicht richtig und reißt mir die Bilder auseinander, weil er „line-height“ falsch interpretiert. kann mir jemand eine „schnelle“ Lösung geben mit der ich das Bild zusammengesetzt zentrieren kann?

Die Testseite gibt es unter
http://www.diefischbude.de/1.html

Dangge^^

#2

Moin Björn,

ja, IE ist die Pest…versuche mal hiermit

div#innen
{
width:1024px;
height:600px;
position:absolute;
top:50%;
left:50%;
margin-top: -300px;
margin-left:-512px;

}
Mit absolute Positionierung wird die obere linke Ecke in der Mitte positioniert und das Bild über negative margins um die Hälfte seiner Breite nach links und die Hälfte seiner Höhe nach oben verschoben.
Bei kleinere Auflösung hast du eben Scrollbalken.

Noch ein paar Anmerkungen :smile:

Wozu der font-Tag ?

Korrekt ausgezeichnet wären die Grafiken so:

Wie fügst du Inhalte auf die Seite? Auch nur mit Grafiken? *augenbrauehochzieh

Aber wenn das alles ist, brauchst du die anderen zwei DIVs (inkl. CSS Form.) gar nicht.
Denk nur an text-decoration: none; wenn du was verlinkst.

Und Eigenschaft spacing gibt es in CSS nicht…

Genug gekluggesch… für heute und viele Grüße
Maja

#3

Danke für die schnelle und tolle Hilfe

Leider war die Zentrierung ein Fehler mit dem ich hätte leben können. Mein Hauptproblem ist, dass er mir leere Zeilen dazwischen setzt, die man durch den weißen Hintergrund der Testseite gut sieht.

und andere sinnlose Tags waren Versuche die Linie in den Griff zu bekommen^^
Ich bin halt Systemintegrator und hab vom Programmieren keinen Plan.
Und: Ja, alles über Grafik. Erstens soll die Seite nicht so oft geändert werden und zweitens hab ich eine Wette verloren und muss eine Webseite in Paint (!!!) machen^^

#4

Moinnochma,

ahja, in IE7+…

formatiere die DIV-innen so:

div#innen {
border:0 none;
line-height:0;
margin: 0;
padding:0;
width:1024px;
height:600px;
position:absolute;
top:50%;
left:50%;
margin-top: -300px;
margin-left:-512px;
text-decoration:none;

}

Dann ist auch der IE zufrieden. Das Problem mit Browser ist, dass jeder einen eigenen Standard hat und alles was man nicht angibt, wird danach formatiert.

Getestet hab ich nur in IE (6,7 und 8), FF war auch schon vorher randlos.

Und: Ja, alles über Grafik. Erstens soll die Seite nicht so
oft geändert werden und zweitens hab ich eine Wette verloren
und muss eine Webseite in Paint (!!!) machen^^

Na dann… Viel Spaß :wink:

Gruß
Maja

1 Like
#5

Hallo Dangge,

es handelt sich um das Unterlängen-Problem im IE.

IMG-Elemente sind ja nun mal Inline-Elemente, d.h. sie richten sich an der Text-Grundlinie aus.

Der IE hat dabei die Eigenheit, einen folgenden White-Space (also ein Leerzeichen oder einen Umbruch im Quellcode so zu interpretieren, dass es dabei ja auch ein „g, j, p, q” handeln könnte und reserviert den Platz für dessen Unterlänge (das Schwänzchen unter der Grundlinie) unterhalb des Bildes.

Einfache Lösung bei Tabellenlayout: Mach keine White-Spaces zwischen dem IMG- und dem schließenden TD-Tag.

Wenn du -was löblich ist- ohne (unsinnige) Tabelle auskommen willst, lass die IMG-Elemente _float_en oder verpasse ihnen display:block oder gib ihnen vertical-align:bottom, sodass sie sich nicht mehr an der Grundlinie, sondern eben ganz unten, an der Unterkante der Unterlänge ausrichten.

Gruß Gernot

P.S: Nimm Abstand von absoluter Positionierung: Das ist nur etwas für Könner. Ich habe es auch erst Jahre nach meiner Ausbildung gelernt.

#6

absolute Positionierung

P.S: Nimm Abstand von absoluter Positionierung: Das ist nur
etwas für Könner. Ich habe es auch erst Jahre nach meiner
Ausbildung gelernt.

Hallo Gernot,

hab dein Posting erst jetzt endeckt…

Dass man besser relativ positioniert, damit hast du recht. Allerdings ist absolute Positionierung wesentlich einfacher - sofern man addieren und subtrahieren kann :wink:

Gruß
Maja

1 Like
#7

Hallo Maya,

Dass man besser relativ positioniert, damit hast du recht.
Allerdings ist absolute Positionierung wesentlich einfacher -
sofern man addieren und subtrahieren kann :wink:

nein, auch das sehe ich anders. Das beste ist, man kommt ohne setzen einer Position-Eigenschaft aus und belässt es beim Default-Wert „static”. Relative Positionierung von Elementen ist eigentlich auch immer nur mit der absoluten Positionierung von enthaltenen Nachfahrenselementen erforderlich, an deren relativ-positionierten Vorfahren man sie ausrichten will. Manchmal auch, um Bugs im IE6 und darunter auszubügeln, der mit negativen Margins verschobene Teile von Elementen sonst manchmal verschluckt.

Komplette Seiteninhalte absolut am Viewport zu positionieren, wie viele WYSIWYG-Editoren das machen, ist extrem ungünstig, weil dann u.U. Hintergrundeigenschaften von Vorfahrenselementen (in Netscape 7 und älteren Mozillas teilweise einschließlich des BODY-Elements) nicht mehr angezeigt werden, da diese dann keinen block-formatting Context um ihre Kindelemente mehr bilden.

http://reference.sitepoint.com/css/blockformatting

Wie gesagt: Position:relative und mehr noch position:absolute ist nur etwas für absolute Profis und gerade auch die setzen beides so sparsam wie möglich ein.

Gruß Gernot