Darstellungsproblem

[seven]

Hallo,

folgende Seite wird in IE und FF unterschiedlich dargestellt, der div-tag "subHeader" bereitet mir Probleme. In IE ging es mit dem Workaround margin-top: -4px, in FF geht das allerdings nicht.
Kann mir jmd sagen, wo mein Fehler liegt?
danke

[seven]

sorry, Link vergessen:

http://www.tms-web.de/jp/html/

danke.

[D.R.]

Hallo,

folgende Seite wird in IE und FF unterschiedlich dargestellt, der div-tag "subHeader" bereitet mir Probleme. In IE ging es mit dem Workaround margin-top: -4px, in FF geht das allerdings nicht.
Kann mir jmd sagen, wo mein Fehler liegt?

Wozu dieses display:inline beim sub-header?
Deshalb funktioniert margin-top auch nicht! (in gescheiten Browsern)

mfg. Daniel

[seven]

hi,

Wozu dieses display:inline beim sub-header?

ok, ich hab's mal rausgenommen, aber besser sieht es jetzt nicht aus ;). Hast Du noch eine andere Idee?

[Detlef G.]

Hallo seven

folgende Seite wird in IE und FF unterschiedlich dargestellt, der div-tag "subHeader" bereitet mir Probleme. In IE ging es mit dem Workaround margin-top: -4px, in FF geht das allerdings nicht.
Kann mir jmd sagen, wo mein Fehler liegt?

Daran, dass du deine Seite, mit zerschnittenen Grafiken zusammensetzt, wie es einst bei Tabellenlayouts durchaus üblich war.

Warum zerschneidest du ein Bild erst, um die Einzelteile dann wieder bündig zusammen zu setzen?
Warum schreibst du extra ein leeres div#header in den Quielltext, wenn dieses überhaupt keine Inhalte bekommen soll sondern nur einen Teil der Grafik als Hintegrundbild?

Abstände solltest du mit einem sinnvollen Einsatz von margin und padding realisieren, nicht durch leere Elemente.

Lass die Grafik einfach ganz, definiere sie für ein geeignetes Element als Hintergrund.
Es ist zum einen wesentlich effektiver, wenn der Browser nur wenige eventuell auch etwas größere Grafiken anfordern muss, als viele einzelne kleine. Außerdem gehören alle Grafiken, die lediglich Design sind und kein Seiteninhalt ins CSS und nicht ins HTML.
Kleine Teilgrafiken (die Linkgrafiken) überlagern dann einfach das Hintergrundbild, wenn du sie mittels margin bzw. padding auf die richtige Position bringst.
Wenn es dann browserbedingt zu einer Verschiebung um wenige Pixel kommt, fällt diese viel weniger auf, als jetzt der leere Streifen.

Das zu deinem grundsätzlichen Problem.

Jetzt zu deinem aktuellen:
Grafiken (img) sind Inlineelemente. Sie werden auf der Basislinie eines eventuellen textlichen Inhalt angezeigt. Bei Schrift werden aber die Unterlängen der Buchstaben mit berücksichtigt (g, j, p, q, y). Der Spalt den du siehst, ist genau dieser reservierte Unterlängenplatz.
Eine Verschiebung des nachfolgenden Elements um den Platz, der dafür bei _deinem_ Browser, auf _deinem_ Betriebssystem, bei genau _deiner_ Standardschriftart und -größe reserviert wird ist da ziemlich sinnlos.

Du könntest dafür sorgen, dass die Grafiken nicht auf der Basisllinie sondern unten ausgerichtet werden. (vertikale Ausrichtung)

Auf Wiederlesen
Detlef