Image-Offset-Problem (Firefox, Opera)

Stefan Ruettinger · 19.05.2005

Hallo,

ich habe ein kleines Problem mit Image-Offsets innerhalb von DIVs.
Mein DIV enthält nur ein Bild, aber ich kriege es irgendwie nicht hin, dass es oben ohne Abstand anfängt. Beim IE sieht es aus wie gewünscht, aber Firefox und Opera leider nicht. Dieses kleine Beispiel zeigt das Problem:

http://www.css-erfolg.de/problem/imageproblem.html

Beim Bild oben und unten schaut der blaue Hintergrund durch (sogar in unterschiedlicher Größe), was nicht so sein soll (Fixefox, Opera). Beim IE ist alles ok. Hat jemand eine Idee, was ich tun muss, um keinen Offset zu haben?

Hier der komplette Code:
CODE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML LANG="de">
<HEAD>
<TITLE>Image Problem</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
</HEAD>
<BODY STYLE="margin: 0px; padding: 0px; border: 0px none; background-color: #00FF00;">
<DIV STYLE="position: absolute; left: 200px; top: 200px; width: 220px;">
<DIV STYLE="position: relative; width: 220px; height: 12px; background-color: #0000FF; overflow: hidden;">
<IMG SRC="oben.gif" ALT="" WIDTH=220 HEIGHT=12><BR>
</DIV>
<DIV STYLE="position: relative; width: 220px; height: 28px; background-image: url('kopf.gif'); background-repeat: repeat-y; overflow: hidden;">&nbsp;</DIV>
<DIV STYLE="position: relative; width: 220px; background-image: url('inhalt.gif'); background-repeat: repeat-y;">&nbsp;</DIV>
<DIV STYLE="position: relative; width: 220px; height: 14px; background-color: #0000FF; overflow: hidden;">
<IMG SRC="unten.gif" ALT="" WIDTH=220 HEIGHT=14><BR>
</DIV>
</DIV>
</BODY>
</HTML>

Vielen Dank und viele Grüße

Jörg Kruse · 19.05.2005

Beim IE passen die Bilder wegen der <BR>s - lässt man diese weg, besteht dort das gleiche Problem. So ganz bin ich dessen Ursache noch nicht auf die Schliche gekommen, aber wenn man die <BR>s rausschmeißt und stattdessen die Höhe der Bilder jeweils auf 15 erhöht schaut's in Opera, Firefox und im IE gleich aus:

QUOTE ("Code&quot

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML LANG="de">
<HEAD>
<TITLE>Image Problem</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
</HEAD>
<BODY STYLE="margin: 0px; padding: 0px; border: 0px none; background-color: #00FF00;">
<DIV STYLE="position: absolute; left: 200px; top: 200px; width: 220px;">
<DIV STYLE="position: relative; width: 220px; height: 12px; background-color: #0000FF; overflow: hidden;">
<IMG SRC="oben.gif" ALT="" WIDTH=220 HEIGHT=15>
</DIV>
<DIV STYLE="position: relative; width: 220px; height: 28px; background-image: url('kopf.gif&#39

; background-repeat: repeat-y; overflow: hidden;">&nbsp;</DIV>
<DIV STYLE="position: relative; width: 220px; background-image: url('inhalt.gif&#39

; background-repeat: repeat-y;">&nbsp;</DIV>
<DIV STYLE="position: relative; width: 220px; height: 14px; background-color: #0000FF; overflow: hidden;">
<IMG SRC="unten.gif" ALT="" WIDTH=220 HEIGHT=15>
</DIV>
</DIV>
</BODY>
</HTML>

Jörg Kruse · 19.05.2005

Nachtrag:

andere Variante, man wechselt die Doctype Declaration aus:

QUOTE ("Quelltext&quot

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML LANG="de">
<HEAD>
<TITLE>Image Problem</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
</HEAD>
<BODY STYLE="margin: 0px; padding: 0px; border: 0px none; background-color: #00FF00;">
<DIV STYLE="position: absolute; left: 200px; top: 200px; width: 220px;">
<DIV STYLE="position: relative; width: 220px; height: 12px; background-color: #0000FF; overflow: hidden;">
<IMG SRC="oben.gif" ALT="" WIDTH=220 HEIGHT=12><BR>
</DIV>
<DIV STYLE="position: relative; width: 220px; height: 28px; background-image: url('kopf.gif&#39

; background-repeat: repeat-y; overflow: hidden;">&nbsp;</DIV>
<DIV STYLE="position: relative; width: 220px; background-image: url('inhalt.gif&#39

; background-repeat: repeat-y;">&nbsp;</DIV>
<DIV STYLE="position: relative; width: 220px; height: 14px; background-color: #0000FF; overflow: hidden;">
<IMG SRC="unten.gif" ALT="" WIDTH=220 HEIGHT=14><BR>
</DIV>
</DIV>
</BODY>
</HTML>

Stefan Ruettinger · 20.05.2005

Hallo,

ich habe noch ein wenig herumgespielt.
Das Problem ist gelöst, wenn man die Font-Size für den oberen und unteren Bereich auf 1px setzt. Vermutlich liegt es daran, dass durch den Zeilenumbruch die imaginäre Fontgröße verwendet wird. Mir ist es aber leider nicht gelungen, das Image nach oben zu bringen, auch nicht mit vertical-align: top; oder sowas.

Wenn mir die Logik beim Strict-Modus noch genauer erläutern könnte, wäre das sehr schön. Oder wenn jemand weiss, wie man VALIGN=TOP in CSS korrekt ausdrückt.

QUOTE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML LANG="de">
<HEAD>
<TITLE>Image Problem</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
</HEAD>
<BODY STYLE="margin: 0px; padding: 0px; border: 0px none; background-color: #00FF00;">
<DIV STYLE="position: absolute; left: 200px; top: 200px; width: 220px;">
<DIV STYLE="position: relative; width: 220px; height: 12px; background-color: #0000FF; font-size: 1px; overflow: hidden;">
<IMG SRC="oben.gif" ALT="" WIDTH=220 HEIGHT=12><BR>
</DIV>
<DIV STYLE="position: relative; width: 220px; height: 28px; background-image: url('kopf.gif&#39

; background-repeat: repeat-y; overflow: hidden;">&nbsp;</DIV>
<DIV STYLE="position: relative; width: 220px; background-image: url('inhalt.gif&#39

; background-repeat: repeat-y;">&nbsp;</DIV>
<DIV STYLE="position: relative; width: 220px; height: 14px; background-color: #0000FF; font-size: 1px; overflow: hidden;">
<IMG SRC="unten.gif" ALT="" WIDTH=220 HEIGHT=14><BR>
</DIV>
</DIV>
</BODY>
</HTML>

Vielen Dank und viele Grüße

Urs · 20.05.2005

hallo

ist es dies mit top: left: bottom: etc ...

QUOTE top:Wert;
In Verbindung mit absoluter oder relativer Positionierung für Wert eine numerische Angabe wie 100px oder 2cm notieren.

erläuterung:
http://de.selfhtml.org/navigation/css.htm#positionierung

beschreibung:
http://de.selfhtml.org/css/eigenschaften/p...nierung.htm#top

gruss

urs

Jörg Kruse · 20.05.2005

Mit display:block für die Bilder (und ohne die <BR>s) gibt es keinen Rand mehr:

QUOTE ("Code&quot

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<HTML LANG="de">
<HEAD>
<TITLE>Image Problem</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
</HEAD>
<BODY STYLE="margin: 0px; padding: 0px; border: 0px none; background-color: #00FF00;">
<DIV STYLE="position: absolute; left: 200px; top: 200px; width: 220px;">
<DIV STYLE="position: relative; width: 220px; height: 12px; background-color: #0000FF; overflow: hidden;">
<IMG SRC="oben.gif" ALT="" WIDTH=220 HEIGHT=12 style="display:block">
</DIV>
<DIV STYLE="position: relative; width: 220px; height: 28px; background-image: url('kopf.gif&#39

; background-repeat: repeat-y; overflow: hidden;">&nbsp;</DIV>
<DIV STYLE="position: relative; width: 220px; background-image: url('inhalt.gif&#39

; background-repeat: repeat-y;">&nbsp;</DIV>
<DIV STYLE="position: relative; width: 220px; height: 14px; background-color: #0000FF; overflow: hidden;">
<IMG SRC="unten.gif" ALT="" WIDTH=220 HEIGHT=14 style="display:block">
</DIV>
</DIV>
</BODY>
</HTML>

Image-Offset-Problem (Firefox, Opera)

Stefan Ruettinger

Mitglied

Jörg Kruse

Angesehenes Mitglied

Jörg Kruse

Angesehenes Mitglied

Stefan Ruettinger

Mitglied

Urs

Legendäres Mitglied

Jörg Kruse

Angesehenes Mitglied

Wir schützen Ihre Privatsphäre