Ayom -> Image-Offset-Problem (Firefox, Opera)

Ayom -> Forum -> Webmaster-Ecke -> Design, Content & Usability

Anzeige - [Hier werben / Mediadaten]

(?) Tags raten (?) css, firefox, opera, platzierung (edit)

Image-Offset-Problem (Firefox, Opera), CSS: Platzierung eines Images im DIV

Thema abonnieren | Thema versenden | Thema drucken

Stefan Ruettinger

Geschrieben am: Do 19.05.2005, 13:45

AyomRank 2
Group Icon

Gruppe: Experten Marketing
Beiträge: 18
Mitglied seit: 22.10.2003

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;"> </DIV>
<DIV STYLE="position: relative; width: 220px; background-image: url('inhalt.gif'); background-repeat: repeat-y;"> </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

--------------------

Stefan Rüttinger
Homepage-Erfolg.de

Jörg Kruse

#2 Geschrieben am: Do 19.05.2005, 15:08 (+01:23)

AyomRank 5
Group Icon

Gruppe: Experten Entwicklung
Beiträge: 418
Mitglied seit: 19.12.2004

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")

<!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'); background-repeat: repeat-y; overflow: hidden;"> </DIV>
<DIV STYLE="position: relative; width: 220px; background-image: url('inhalt.gif'); background-repeat: repeat-y;"> </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>

--------------------

Webmaster-Forum | Webnotizen

Jörg Kruse

#3 Geschrieben am: Do 19.05.2005, 15:26 (+00:17)

AyomRank 5
Group Icon

Gruppe: Experten Entwicklung
Beiträge: 418
Mitglied seit: 19.12.2004

Nachtrag:

andere Variante, man wechselt die Doctype Declaration aus:

QUOTE ("Quelltext")

<!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'); background-repeat: repeat-y; overflow: hidden;"> </DIV>
   <DIV STYLE="position: relative; width: 220px; background-image: url('inhalt.gif'); background-repeat: repeat-y;"> </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>

--------------------

Webmaster-Forum | Webnotizen

Stefan Ruettinger

#4 Geschrieben am: Fr 20.05.2005, 07:59 (+16:32)

AyomRank 2
Group Icon

Gruppe: Experten Marketing
Beiträge: 18
Mitglied seit: 22.10.2003

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'); background-repeat: repeat-y; overflow: hidden;"> </DIV>
<DIV STYLE="position: relative; width: 220px; background-image: url('inhalt.gif'); background-repeat: repeat-y;"> </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

--------------------

Stefan Rüttinger
Homepage-Erfolg.de

Urs
GWD GmbH

#5 Geschrieben am: Fr 20.05.2005, 08:11 (+00:12)

AyomRank 9
Group Icon

Gruppe: Moderatoren
Beiträge: 2616
Mitglied seit: 21.05.2004

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

--------------------

------------------------------------------------------------------------------------------------------------
Es gibt nur 10 Typen von Menschen;
Solche die binär verstehen und solche die kein binär verstehen!
------------------------------------------------------------------------------------------------------------
vistablog.ch - Blog zu meinen Windows Vista Erfahrungen

www.topprodukte.ch - der online Shopping-Blog

www.surfstart.ch - Die Startseite der Schweiz

Jörg Kruse

#6 Geschrieben am: Fr 20.05.2005, 09:14 (+01:02)

AyomRank 5
Group Icon

Gruppe: Experten Entwicklung
Beiträge: 418
Mitglied seit: 19.12.2004

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

QUOTE ("Code")

<!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'); background-repeat: repeat-y; overflow: hidden;"> </DIV>
<DIV STYLE="position: relative; width: 220px; background-image: url('inhalt.gif'); background-repeat: repeat-y;"> </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>

--------------------

Webmaster-Forum | Webnotizen

Thema wird von 0 Benutzer(n) gelesen (0 Gäste und 0 anonyme Benutzer)

0 Mitglieder:

« Hover Buttons - WIE?! | Design, Content & Usability | Eigener Browser für Kompatibilität? »

Trackback-Url: http://www.ayom.com/track/t/7109

Dieses Thema abonnieren

Artikel die Sie interessieren könnten: (beta) - Feedback

Wie verbessert man das Ranking bei der Image-Suche?
Nützliche Firefox Plugins für Webmaster

Ähnliche Themen

Themen Titel	Autor	Views	Antworten	Letzte Aktion
Firefox 2.0.0.18 -> ajax Probleme ?!	lalo	130	1	Fr 21.11.2008, 22:34
Kleines Problem mit preg_replace...	BartTheDevil89	77	3	Do 20.11.2008, 22:13
Firefox 3 macht Probleme?	Nico B	133	4	Mi 12.11.2008, 22:28
Problem bei Mail-Versand	PH	344	14	Di 11.11.2008, 08:32
Datenbankabfrage Problem	Mauf	234	13	Mi 22.10.2008, 15:48
Php mail Problem UTF-8	Carbon	356	6	So 19.10.2008, 12:35
Firefox Problem	Marc3l	165	4	So 19.10.2008, 10:42
php Array Problem	kekskruemel	155	5	Di 14.10.2008, 22:36
Install-Problem mit Elgg	MacGyver	171	1	Fr 10.10.2008, 12:16
FTP Problem	DrCash	123	1	Mi 1.10.2008, 06:28

Anzeige - [Hier werben / Mediadaten]

Startseite

Ayom Blog

Forum

Wissensdatenbank

Domainbörse

Supertext

Über Ayom

Partner

Anzeigen