✔ Abstand zwischen Tabellen im Firefox

Status
Nicht offen für weitere Antworten.
SilentWarrior

SilentWarrior

Erfahrenes Mitglied
Servus

Ich hab für meine HP folgenden Code (klar, ist vereinfacht, sonst könnte ich ja beide Bilder in eine Tabelle reinhämmern):
PHP: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title>Titel</title>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="height:100px;"><img src="bild.gif" width="500" height="100" alt="Text" style="border-width:0px;" /></td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="height:100px;"><img src="bild.gif" width="500" height="100" alt="Text" style="border-width:0px;" /></td>
</tr>
</table>
</body>
</html>
Den Code hab ich durch den XHTML-Validator laufen lassen, der sagt, es wäre alles im Ordnung. Im IE wird auch alles schön angezeigt. Aber im Firefox entsteht zwischen den beiden Tabellen ein Abstand von 5 Pixeln. Ich steh ehrlich gesagt voll auf der Leitung - ist das ein Fehler im Code (der Validator ist ja auch nicht allwissend) oder ein Anzeigefehler des Browsers? Und falls letzteres: Was kann man dagegen tun?

Achja, was ich noch erwähnen sollte: Wenn ich die DTD rausnehme, funktioniert es wunderbar. Das will ich aber nicht (man will ja bisschen angeben können :)), und schliesslich hat der Validator auch nichts gefunden, also müsste es der Browser doch auch mit DTD korrekt anzeigen.

TIA

SilentWarrior
 
Also mal vorweg, ich habe auch keine Ahnung wieso der Mozilla das so interpretiert...

Aber das Problem tritt meines Ereachtens aufgrund der Bilder auf und nicht aufgrund der Tabellen (probier mal nur 2 Bilder untereinander zu fügen ohne Tabelle).


Abhilfe könnte man zB. über JavaScript schaffen alá:

Code: 
  function resetMargin(id)
    {
    if(!document.defaultCharset && !window.opera)
      document.getElementById(id).style.marginTop = "-5px";
    }

und dann natürlich durch onload aufrufen mit der id des unteren Bildes/der unteren Tabelle.

MfG.

xxenon
 
Aber das Problem tritt meines Ereachtens aufgrund der Bilder auf und nicht aufgrund der Tabellen (probier mal nur 2 Bilder untereinander zu fügen ohne Tabelle).
Zum Vergrößern anklicken....
Du hast vollkommen recht. Auch zwei einfache Bilder durch ein simples <br /> getrennt haben einen Abstand von 5 Pixeln. Das ist ja eine Unverschämtheit. Ich verklag die, gleich morgen! :)

Nein, mal im Ernst: Vielen Dank für den Hinweis! Und das JavaScript hilft mir gleich doppelt weiter. Ich werd den "Bug" dann mal dem Entwicklerteam mitteilen (wenn das nicht schon einer getan hat).
 
Hi,

eine andere Möglichkeit wäre, das erste Bild mit Hilfe von float: left bzw. float: right
in den Textfluß aufzunehmen. Damit sollte der Abstand auch verschwinden und Du
kannst auf JavaScript verzichten.

Ciao
Quaese
 
Hi Quaese!

Kannst du bitte mal den Code posten, mit dem du dieses Ergebnis erzielt hast / denkst erzielen zu können?

Ich kann mir irgendwie gerade nix zusammenreimen, was "float: left/right" mit dem von Mozilla überflüssigerweise eingefügten vertikalen Abstand zwischen zwei Bildern zu tun hat?! :)


Naja, vielleicht (oder wahrscheinlich) liegt hier einfach ein Missverständnis vor. :)


MfG.

xxenon
 
Hi,

1. Möglichkeit wie von SilentWarrior gepostet:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title>Titel</title>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td style="height:100px;"><img src="bild.jpg" width="500" height="100" alt="Text" style="border-width: 0px; float: left;" /></td>
    </tr>
</table>
<table border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td style="height:100px;"><img src="bild.jpg" width="500" height="100" alt="Text" style="border-width:0px;" /></td>
    </tr>
</table>
</body>
</html>
2. Möglichkeit
Code: 
<div style="width: 200px;">
    <img style="float: left;" src="bild.jpg" width="200" height="200" border="0" alt=""><br>
    <img src="bild.jpg" width="200" height="200" border="0" alt="">
</div>
Bei mir zeigt der Mozilla mit obigen Codes keinen Zwischenraum mehr an, also
kein Missverständnis.

Ciao
Quaese
 
Aha! Na das klingt doch schonmal sehr vielversprechend. Allerdings möchte ich noch darauf hinweisen, dass das Problem im Firefox auftrat, nicht im Mozilla. (Dein Code funktioniert auch im Firefox, keine Angst. ;))

Nur leider bräuchte ich wirklich eine Tabelle, da das gesamte Layout darauf basiert und ich ehrlich gesagt keine Lust habe, alles auf divs umzustellen. Also gibt's bei Tabellen auch was von floatiopharm? :)

- Werbung Ende -
 
Zuletzt bearbeitet:
@ Quaese:

Zugegeben, deine Variante funktioniert ganz gut :)

Ausschlaggebend für die Funktion ist aber, dass beide Bilder in einem Container sind, der fixe Breitenangaben hat und diese von den Einzelbildern (so sie nebeneinander gereiht würden) überragt würden.

Das Missverständnis lag also bei mir, wobei ich das mit meiner Aussage im letzten Post nicht ausschließen wollte =).


Wie auch immer, bei mir trat das Problem auch im Mozilla auf, was auch logisch ist, weil die beiden Browser zwar unterschiedlich aussehen, aber sicher die gleiche Engine benutzen.

Wenn Quaese es noch schafft, seinen Schnipsel so zu gestalten, dass die Bilder in Tabellen drin sind, und es trotzdem funktioniert, würde ich ebenfalls auf das JavaScript verzichten :).


MfG.

xxenon
 
Moin,

@SilentWarrior

In meiner 1. Möglichkeit habe ich doch die Bilder ohne vertikalen Zwischenraum
in Tabellen eingebunden - habe sogar die gleiche Struktur wie in Deinem ersten
Post übernommen.


@xxenon

Ich habe noch etwas am Schnipsel gestaltet und folgendes hingepfriemelt ;-)
Code: 
<img style="float: left;" src="bild.jpg" width="200" height="200" border="0" alt=""><br style="clear: left;">
<img src="bild.jpg" width="200" height="200" border="0" alt="">
Funktioniert bei mir wunderprächtig mit allen Browsern, die eine Mozilla-Engine
unter der Haube haben sowie im Firefox.

Ciao
Quaese
 
w00t, kann ich da nur sagen! :)

Quaese: Sorry, als ich gelesen hab "Möglichkeit wie von SilentWarrior gepostet", hab ich gedacht, das wäre mein Code. Naja, vielleicht sollte ich beim nächsten mal zuerst lesen, und dann posten. :-(

Auf jeden Fall funktioniert das jetzt wunderbar, ich danke dir vielmals! :)
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück