Eingebundene swf-Datei verzerrt Darstellung unter Firefox

macher · 07.01.2010

Hallo,

ich habe eine Webseite mit slices erstellt und in dieser an einer Stelle eine swf Datei statt eines Bildes eingebunden (die Animation oben rechts). Im IE als auch im Safari oder Chrome Browser klappt auch alles bestens. Schaut man sich die Seite jedoch mit Firefox an, sind einige Grafiken verschoben.

Das Problem trat nicht auf, als an der Stelle der swf Datei nur eine Grafik war.

Die Seite kann man sich anschauen unter:

EDIT: Ich habe einige HTML Fehler berichtigt, die berichtigte Version ist nun hier: online. Der Fehler der Darstellung ist aber weiterhin vorhanden

Hat jemand eine Idee?

Zero-PSD · 07.01.2010

AW: Eingebundene swf-Datei verzerrt Darstellung unter Firefox

Hast du vielleicht hier schon mal geschaut?

Bitte kostenlos registrieren, damit du die Links siehst.

.

TLux · 07.01.2010

AW: Eingebundene swf-Datei verzerrt Darstellung unter Firefox

Bau mal ein DOCTYPE in deinen Quellcode ein!

Edit:
Das kann manchmal Wunder in der Darstellung bewirken.

Außerdem:
Warum hast due den unteren roten Balken nicht als ein Div gesetzt?

Walter75 · 07.01.2010

AW: Eingebundene swf-Datei verzerrt Darstellung unter Firefox

Tja die Tips die greifen kamen schon (DOCTYPE setzen und den Quellcode entsprechend dem Doctype anpassen). Trotzdem tust Du Dir keinen Gefallen mit dem Tabellenlayout. Das ist eine Sackgasse. Entwirf eine Seite mit containern (DIV) und CSS, also im Tabellen losen Layout. Fotograf - Preise usw. riechen doch nach gewerblicher Website. Möchtest Du Erfolg damit haben, dann mach Dir die Mühe lass die Tabelle wo sie hingehört, aber nicht ins Layout. Unter

Bitte kostenlos registrieren, damit du die Links siehst.

findest Du etwas für den Einstieg und im Forum hilft man hier sicher gern weiter.

Gruß Walter75

macher · 08.01.2010

AW: Eingebundene swf-Datei verzerrt Darstellung unter Firefox

So, habe Doctype und Fehler berichtigt,

Bitte kostenlos registrieren, damit du die Links siehst.

gibt es keine Fehler mehr.

Die Berichtigte Seite findet sich nun unter

Jemand eine Idee, warum es immer noch nicht passt mit der Darstellung? Bei mir sieht die Seite im Firefox 3.5.7 unter XP immer noch verschoben aus (hier mal ein Screenshot:

TLux schrieb:
Warum hast due den unteren roten Balken nicht als ein Div gesetzt?

Ich habe die Seite mit Photoshop gemalt und dann als slices exportiert und dann mit Dreamweaver das swf File integriert. Mit Divs kenne ich mich zugegeben nicht aus. Die falsche Darstellung betrifft aber auch nicht nur den Balken unten. Habe im obigen Screenshot mal einige Problemstellen markiert.

Walter75 · 08.01.2010

AW: Eingebundene swf-Datei verzerrt Darstellung unter Firefox

Morgen,
also bei mir sieht es ok aus.

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>fotograf</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
<style type="text/css">
*{margin:0px;padding:0px;}
body{ text-align:center; background-color:#FFF;}
#tabelle{ width:961px; border:0; margin: 0 auto;}
</style>
</head>
<body>
<!-- Save for Web Slices (fotograf.psd) -->
<table id="tabelle" cellpadding="0" cellspacing="0">
  <tr>
    <td colspan="14"><img src="Bilder/fotograf_01.jpg" width="960" height="4" alt=""></td>
    <td><img src="Bilder/Abstandhalter.gif" width="1" height="4" alt=""></td>
  </tr>
  <tr>
    <td rowspan="8"><img src="Bilder/fotograf_02.jpg" width="5" height="480" alt=""></td>
    <td><img src="Bilder/fotograf_03.jpg" width="230" height="35" alt=""></td>
    <td rowspan="8"><img src="Bilder/fotograf_04.jpg" width="10" height="480" alt=""></td>
    <td colspan="2"><img src="Bilder/fotograf_05.jpg" width="230" height="35" alt=""></td>
    <td rowspan="3"><img src="Bilder/fotograf_06.jpg" width="10" height="47" alt=""></td>
    <td colspan="2"><img src="Bilder/fotograf_07.jpg" width="230" height="35" alt=""></td>
    <td rowspan="8"><img src="Bilder/fotograf_08.jpg" width="10" height="480" alt=""></td>
    <td colspan="3"><img src="Bilder/fotograf_09.jpg" width="230" height="35" alt=""></td>
    <td colspan="2" rowspan="5"><img src="Bilder/fotograf_10.jpg" width="5" height="249" alt=""></td>
    <td><img src="Bilder/Abstandhalter.gif" width="1" height="35" alt=""></td>
  </tr>
  <tr>
    <td><img src="Bilder/fotograf_11.jpg" width="230" height="11" alt=""></td>
    <td colspan="2" rowspan="2"><img src="Bilder/fotograf_12.jpg" width="230" height="12" alt=""></td>
    <td colspan="2" rowspan="2"><img src="Bilder/fotograf_13.jpg" width="230" height="12" alt=""></td>
    <td colspan="3" rowspan="2"><img src="Bilder/fotograf_14.jpg" width="230" height="12" alt=""></td>
    <td><img src="Bilder/Abstandhalter.gif" width="1" height="11" alt=""></td>
  </tr>
  <tr>
    <td rowspan="5"><img src="Bilder/fotograf_15.jpg" width="230" height="400" alt=""></td>
    <td><img src="Bilder/Abstandhalter.gif" width="1" height="1" alt=""></td>
  </tr>
  <tr>
    <td rowspan="5"><img src="Bilder/fotograf_16.jpg" width="1" height="433" alt=""></td>
    <td colspan="3" rowspan="3"><img src="Bilder/01-Fotograf_16.jpg" width="468" height="398" alt=""></td>
    <td rowspan="5"><img src="Bilder/fotograf_18.jpg" width="1" height="433" alt=""></td>
    <td rowspan="5"><img src="Bilder/fotograf_19.jpg" width="1" height="433" alt=""></td>
    <td><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="228" height="195" id="FlashID" title="Minislideshow">
        <param name="movie" value="Slideshow-mini/slide-mini.swf">
        <param name="quality" value="high">
        <param name="wmode" value="opaque">
        <param name="swfversion" value="6.0.65.0">
        <!-- Dieses param-Tag fordert Benutzer von Flash Player 6.0 r65 und höher auf, die aktuelle Version von Flash Player herunterzuladen. Wenn Sie nicht wünschen, dass die Benutzer diese Aufforderung sehen, löschen Sie dieses Tag. -->
        <param name="expressinstall" value="Scripts/expressInstall.swf">
        <!-- Das nächste Objekt-Tag ist für Nicht-IE-Browser vorgesehen. Blenden Sie es daher mit IECC in IE aus. -->
        <!--[if !IE]>-->
        <object type="application/x-shockwave-flash" data="Slideshow-mini/slide-mini.swf" width="228" height="195">
          <!--<![endif]-->
          <param name="quality" value="high">
          <param name="wmode" value="opaque">
          <param name="swfversion" value="6.0.65.0">
          <param name="expressinstall" value="Scripts/expressInstall.swf">
          <!-- Im Browser wird für Benutzer von Flash Player 6.0 und älteren Versionen der folgende alternative Inhalt angezeigt. -->
          <div>
            <h4>F&uuml;r den Inhalt dieser Seite ist eine neuere Version von Adobe Flash Player erforderlich.</h4>
            <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Adobe Flash Player herunterladen" width="112" height="33" ></a></p>
          </div>
          <!--[if !IE]>-->
        </object>
        <!--<![endif]-->
      </object></td>
    <td rowspan="2"><img src="Bilder/fotograf_21.jpg" width="1" height="202" alt=""></td>
    <td><img src="Bilder/Abstandhalter.gif" width="1" height="195" alt=""></td>
  </tr>
  <tr>
    <td><img src="Bilder/fotograf_22.jpg" width="228" height="7" alt=""></td>
    <td><img src="Bilder/Abstandhalter.gif" width="1" height="7" alt=""></td>
  </tr>
  <tr>
    <td colspan="3" rowspan="2"><img src="Bilder/01-Fotograf_22.jpg" width="230" height="197" alt=""></td>
    <td rowspan="3"><img src="Bilder/fotograf_24.jpg" width="4" height="231" alt=""></td>
    <td><img src="Bilder/Abstandhalter.gif" width="1" height="196" alt=""></td>
  </tr>
  <tr>
    <td colspan="3" rowspan="2"><img src="Bilder/fotograf_25.jpg" width="468" height="35" alt=""></td>
    <td><img src="Bilder/Abstandhalter.gif" width="1" height="1" alt=""></td>
  </tr>
  <tr>
    <td><img src="Bilder/fotograf_26.jpg" width="230" height="34" alt=""></td>
    <td colspan="3"><img src="Bilder/fotograf_27.jpg" width="230" height="34" alt=""></td>
    <td><img src="Bilder/Abstandhalter.gif" width="1" height="34" alt=""></td>
  </tr>
  <tr>
    <td><img src="Bilder/Abstandhalter.gif" width="5" height="1" alt=""></td>
    <td><img src="Bilder/Abstandhalter.gif" width="230" height="1" alt=""></td>
    <td><img src="Bilder/Abstandhalter.gif" width="10" height="1" alt=""></td>
    <td><img src="Bilder/Abstandhalter.gif" width="1" height="1" alt=""></td>
    <td><img src="Bilder/Abstandhalter.gif" width="229" height="1" alt=""></td>
    <td><img src="Bilder/Abstandhalter.gif" width="10" height="1" alt=""></td>
    <td><img src="Bilder/Abstandhalter.gif" width="229" height="1" alt=""></td>
    <td><img src="Bilder/Abstandhalter.gif" width="1" height="1" alt=""></td>
    <td><img src="Bilder/Abstandhalter.gif" width="10" height="1" alt=""></td>
    <td><img src="Bilder/Abstandhalter.gif" width="1" height="1" alt=""></td>
    <td><img src="Bilder/Abstandhalter.gif" width="228" height="1" alt=""></td>
    <td><img src="Bilder/Abstandhalter.gif" width="1" height="1" alt=""></td>
    <td><img src="Bilder/Abstandhalter.gif" width="1" height="1" alt=""></td>
    <td><img src="Bilder/Abstandhalter.gif" width="4" height="1" alt=""></td>
    <td></td>
  </tr>
</table>
<!-- End Save for Web Slices -->
<script type="text/javascript">
<!--
swfobject.registerObject("FlashID");
//-->

</script>
</body>
</html>

Zum Test habe ich mir alle einzelnen Bilder heruntergeladen und funktioniert in IE5.5/IE6/IE8/FF und Opera. Im IE7 habe ich jetzt nicht getestet. Einzig die Tabelle habe ich zentriert. Wenn Du es nicht magst kannst Du es ja wieder herausnehmen. Teste nochmal ob Du alle Bilder hochgeladen und richtig verlinkt hast.

Gruß Walter

macher · 08.01.2010

AW: Eingebundene swf-Datei verzerrt Darstellung unter Firefox

@Walter:
Ich habe mal den von Dir geposteten Quelltext übernommen. Sieht (bis auf die Zentrierung) aus wie vorher auch:

Bei mir und meinem Kollegen funktioniert die Seite unter allen Browsern, nur nicht unter FF

Walter75 · 08.01.2010

AW: Eingebundene swf-Datei verzerrt Darstellung unter Firefox

Dann würde ich vorschlagen den Cache zu leeren im FF [ Extras-Einstellungen - Erweitert - Jetzt leeren]. Alternativ kannst Du Dir auch CCleaner herunterladen mit dem Du bei geschlossenen Browser den Cache, Verlauf et cetera löschen kannst. Anschließend die Seite erneut aufrufen.

Um sicher zu stellen, das alle Bilder vorhanden sind die komplette Datei:

macher · 08.01.2010

AW: Eingebundene swf-Datei verzerrt Darstellung unter Firefox

Schaue ich mir die Seite so wie bei Rapidshare an, sieht es in meinem FF so aus:

Allerdings ist die swf Datei ja auch nicht vorhanden. Stelle ich diese nun im Verzeichnis Slideshow-mini zur Verfügung, habe ich wieder diese Darstellung:

Walter75 · 08.01.2010

AW: Eingebundene swf-Datei verzerrt Darstellung unter Firefox

AH...mein Fehler ..Moment

Walter75 · 08.01.2010

AW: Eingebundene swf-Datei verzerrt Darstellung unter Firefox

So ich habe mich nochmal herangearbeitet und bin jetzt bei .....

HTML:

<object>  ...width="228" height="190" </object>.

Hier sprengt er zumindest nicht den Rahmen. Ich muss jetzt auf Arbeit - Spätschicht - sehe es mir morgen nochmal an.
Gruß Walter75

macher · 08.01.2010

AW: Eingebundene swf-Datei verzerrt Darstellung unter Firefox

OK, ich zähle auf Dich.

Walter75 · 09.01.2010

AW: Eingebundene swf-Datei verzerrt Darstellung unter Firefox

So ich denke ich habe kein Lösung gefunden.
1.

HTML:

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="222" height="190" id="FlashID" title="Minislideshow">

...dabei steht 228px x 195px wie 222px zu 190px (wegen dem Seitenverhältnis)
2.

HTML:

<style type="text/css">

*{margin:0px;padding:0px;}
body{ text-align:center; background-color:#FFF;}
#tabelle{ width:961px; border:0; margin: 0 auto;background-color:#FFF;}
object{background-color:#FFF; vertical-align:middle; margin:0 auto;}
</style>

um object erweitern: vertical-align:middle vermittelt alles schön in der vertikalen und margin:0 auto; in der horizontalen
3. da der IE5.5 margin: 0 auto; nicht mag

wird die zelle (der Inhalt) :

HTML:

 <td  style=" text-align:center;"><object ...........

so zentriert (horizontal)....

Wenn Du jetzt z.B. im FF mit der Maus über den Flash gehst graut die Flashfläche ein und Du siehst die genutzte Fläche und ohne (Mouse over Flash) einen kleinen grauen Schatten der wahrscheinlich von der erzeugten swf Datei stammt (Deine Bildergröße + Schatten). Das ist aber jetzt nur eine Annahme von mir. Da sollte man doch mal bei einem Flash-spezi nachfragen.

Zum Test: Im IE5.5/IE6/IE8/FF und Opera ist es getestet. Vielleicht hilft es Dir ja weiter.

Gruß Walter

macher · 09.01.2010

AW: Eingebundene swf-Datei verzerrt Darstellung unter Firefox

Cool danke. Sowas in der Art hatte ich auch schon überlegt. Gefällt mir nicht so 100% aber erstmal besser als nix. So kann ich die Seite erstmal nutzen und mich dann doch mal mit CSS beschäftigen. Aber als "quick & dirty" reichts erst mal.

Walter75 · 09.01.2010

AW: Eingebundene swf-Datei verzerrt Darstellung unter Firefox

Jo "quick & dirty" trifft es sehr gut

wohl eher dirty, da, wie ich schon schrieb der Königsweg nicht über das Tabellenlayout geht. Dein Layout ist Art bedingt auch zu Grafiklastig da sich Rahmen, der Dicke Querbalken usw. auch ohne Grafik umsetzen lassen, was der Geschwindigkeit beim Aufbau der Seite entgegen kommt.