Ein Bild wird in Firefox nicht dargestellt. Warum?

    Sehr geehrte Damen und Herren
    Ein Bild wird bei der Site, die ich entwickelt habe, kann nicht in FIREFOX dargestellt werden. Alles wurde mit Frontpage entwickelt und in IE 5.5 visualisisert.

    Code abschnitt:

    ...
    <td width="588" height="247" rowspan="2" colspan="2" valign="top">

    <p align="left"><span style="position: absolute; left: 189px; top: 136px; z-index: -1"><img border="0" src="images/BILD.jpg" width="585" height="360" alt="Beschreibung"></span></p>

    <p align="left" style="margin-left: 5px">&nbsp;</p>
    <p align="left" style="margin-left: 5px">&nbsp;</p>
    <p align="left" style="margin-left: 5px">&nbsp;</p>
    <p align="left" style="margin-left: 5px">&nbsp;</p>
    <p align="left" style="margin-left: 5px">&nbsp;</p>
    <p align="left" style="margin-left: 10px">
    &nbsp;</p>

    <p align="left" style="margin-left: 10px">
    <br>
    <br>
    HERZLICH WILLKOMMEN auf dem Webportal
    der BLABLABLA.<br>
    <br>
    Hier erhalten Sie&nbsp;die offiziellen Informationen über unsere
    Organisation.<br>
    <br>
    </p>
    ...

    Es handelt sich um ein Bild (Position angegeben) und Text über das Bild.
    Kann mir jemand sagen warum wird korrekt in IE angezeigt und in FIREFOX nicht? Wo liegt den Fehler?
    Danke im Voraus für jede Hilfe: greg.h@tiscali.ch

    Grüsse
    Greg

    Frontpage=Microsoft
    Internet Explorer=Microsoft

    Fällt da was auf?

    Zitat

    z-index: -1


    Bei sowas muß man sich nicht wundern wenn die Anzeige nicht stimmt.

    P.S.: Ein Thread hätte ja nun wirklich gereicht.

    Btw, du könntest ja mal die "Suchen" Funktion mit Frontpage füttern.

    Zitat von Road-Runner

    Wenn damit nicht geht, nimm ../images/BILD.jpg anstatt./images/BILD.jpg

    das kann nicht gehn ..
    das ist dann nicht der selbe pfad.
    wird in http://www.xxx.de/xx/index.html
    ./images/... angegeben ist das http://www.xxx.de/xx/images/...
    bei ../images/.... http://www.xxx.de/images/...

    Hallo Simon

    Das

    z-index : -1

    stellt das Bild in Hinterground gegenüber den Text. Sonst kann ich den Text nicht lesen.

    ein positives Wert zeigt das Bild in Vordergrund

    Danke im Voraus für eine andere Lösung. (code please)

    Grüsse

    Das ist nicht ganz richtig. Einen z-index mit einem negativen Wert dürfte es imo nach Webstandard nicht geben. Wozu auch? Du kannst doch z.B. einfach dem Bild 1 und dem Text 2 als z-index geben (weiß jetzt nicht wie du das genau gemacht hast). Im Übrigen würde ich dir empfehlen (falls das bisher noch nicht so rauskam) ein anderes Programm als Frontpage zu verwenden, da dieses Programm einfach nur schlechten Code mit MS-eigenen Sachen erstellt, der dann meist nur mit IE funktioniert.

    Mozilla/5.0 (Windows; U; Windows NT 5.1; de; rv:1.8.1.1) Gecko/20061204 Firefox/2.0.0.1

    Eine Theorie sollte so einfach wie möglich sein, aber nicht einfacher. (A. Einstein)

    Ein Negativer Z-Index legt ein element hinter den Body. Und da der Body nicht transparent ist, ist das Objekt mit dem negativen z-index vom Body verdeckt. das kann nützlich sein für DHTML-Scripte, wenn man bestimmte objekte verstecken will. wobei dafür visibility sinnvoller wäre. aber viele wegen führen nach rom...

    IE versteht keine negativen z-index-angaben (weswegen Frontpage da sogar müll generiert, wo der eigene Browser nicht versteht. Aber das Macht Frontpage und Konsorten häufig.) und arbeitet stattdessen mit z-index 1. darum sieht man mit ihm was, mit Fx aber nix. Aber Fx zeigts richtig an ; )

    Liebe LeserIn

    OK. Jetzt ist es klar. Die Abklärung von bugcatscher ist erleuchtend.
    Ich kriege aber die Lösung mit z-index :1 für das Bild und 2 für den Text nicht.

    <p align="left"><span style="position: absolute; left: 189px; top: 136px; z-index: 1"><img border="0" src="images/BILD.jpg" width="585" height="360" alt="beschreibung"></span></p>
    <p align="left" style="margin-left: 5px">&nbsp;</p>
    <p align="left" style="margin-left: 5px">&nbsp;</p>
    <p align="left" style="margin-left: 5px">&nbsp;</p>
    <p align="left" style="margin-left: 5px">&nbsp;</p>
    <p align="left" style="margin-left: 5px">&nbsp;</p>
    <p align="left" style="margin-left: 10px">&nbsp;</p>
    <span style="z-index: 2">
    <p align="left" style="margin-left: 10px">
    <br>
    <br>
    HERZLICH WILLKOMMEN auf dem Webportal
    der blablabla.<br>
    <br>
    Hier erhalten Sie&nbsp;die offiziellen Informationen über unsere
    Organisation.<br>
    <br>
    </p>
    </span>


    Dieses funktioniert auch nicht!

    Wer hätte eine bessere Idee?

    Grüsse
    Greg

    Code
    <span style="z-index: 2">


    kann auch nicht gehen. du kannst einem inline-objekt (was dem wert position:static entspricht) keinen anderen z-index zuweisen, wie dem rest des "layers". wenn du das machen möchtest, muss du diesen bereich auch als layer definieren, also die angabe position:absolute hinzufügen, die auch nur wirksam wird, wenn man dazu die positionsangaben (top/bottom/left/right) auch macht.

    Da ich mir aber nicht vorstellen kann, was du da bauen willst (allein der ganze "<p align="left" style="margin-left: 5px">&nbsp;</p>"-kram ist schon reiner überflüssiger code-müll), kann ich dir auch keinen tipp geben, wie es besser/richtiger gehen würde.

    dazu bräuchte ich mal eine aufgespielte testversion zum anschauen.

    Selbst nachdem ich die Dateien bekommen hab, kann ich mir nicht wirklich vorstellen, was das mal geben soll.

    Nungut. Ich weiss wenigstens, wofür der Bild-Layer benutzt werden soll.

    Aber dafür einen Layer zu benutzen? Völliger Unsinn. Benutz dafür lieber einen Hintergrund im <td>.

    Ungefähr so:

    Code
    <table>
 <tr>
  <td width="652" height="321" valign="bottom" style="background:url(bild.jpg)">
   <p>Blindtext, Blindtext, Blindtext</p>
  </td>
 </tr>
</table>


    Den Hintergrund im <body> würde ich mal ganz schnell rausnehmen. Eine einfarbige 10x10-Grafik als Hintergrund zu verwenden ist genauso unsinnig wie die Aktion mit dem Grafiklayer. Gibt als hintergrundfarbe lieber direkt #F7F7F7 an.

    Code
    <body bgcolor="#F7F7F7">

    Auch die 14x14-Image-Map für die 15x15 grosse Grafik entbehrt nicht ganz einer gewissen Komik. Besonders weil die gesammte Grafik dann nocheinmal zusätzlich per <a>-Tag umfasst wurde. Besser ohne ImageMap:

    Code
    <a href="http://www.liechtenstein.li" target="_blank"><img border="1" src="fl.jpg" width="15" height="15"></a>

    Noch einen gut gemeinten Hinweis zum Abschluss: Falls das ganze keine Privatseite, sondern eine Seite für eine Organisation/Unternehmen werden soll.... lass Dir von professioneller Seite helfen. Ein schlecht gemachter Webauftritt wirkt sich negativer auf ein Image aus, als garkein Webauftritt.

    Und Frontpage wird Dir auch kein Freund dabei sein, eine Seite zu entwickeln (wobei das momentan mehr was von "basteln" hat, ist aber nicht böse gemeint ; ), die auf allen Browsern ansprechent aussieht.

    Hallo Bugcatcher
    Du hast es erkannt: ich bin kein Profi.

    Danke für dein Typ betreffend das Bild, es funktioniert in FF und IE. Ich habe aber Schwierigkeiten mit der Positionierung. Ich schaue ob ich da besser werde.

    Das bgcolor ist auch ein guter Tipp.

    Bei der Image 15x15 habe ich auch den Code so geändert, dasss es kein Imagemap mehr gibt. Es hat aber etwas was ich nicht wollte: es macht ein Bild mit blauen Rahmen. Wie kann ich diesen Rahmen schwarz oder grau machen?

    <a href="http://www.liechtenstein.li" target="_blank"><img border="1" src="images/wappenklein/fl.jpg" width="15" height="15" alt="FL"></a>

    Das einfachste (und sinnvollste) wird sein, dass du der grafik direkt einen Rahmen per grafikprogramm gibst und im <img>-Tag dann border="0" einbaust. Die Rahmenfarbe bei Grafiken, die mit einem Link verknüpft sind, müssen mehrfach angegeben werden. Für jeden Zustand: normal, besucht, geklickt, mouseover/hover. Das ist zuviel tippkram für einen Rahmen. Daher direkt in die Grafik einbauen.

    Hallo
    Ich habe alles korrigiert, bzw. anders gemacht. Das Firefox zeigt jetzt alles richtig, aussert:

    <a href="http://www.liechtenstein.li" target="_blank"><img border="0" src="images/wappenklein/fl.jpg" width="17" height="17" alt="FL"></a>

    Ich habe jetzt ein Bild mit ein schwarzes Rand und das border auf 0 gesetzt. IE zeigt das Bild, wie ich es in Grafikprogramm gemacht habe. Firefox aber OHNE Rand! Das kann doch nicht wohl sein... ich verzweifle

    Also
    Ich habe beim CSS Datei alles gelöscht was ich nicht brauchte. Ich habe es auch validieren lassen mit w3c und die letzten Fehler bereinigt. Dann hat das alles funktioniert. Ich weiss aber nicht warum genau.
    Das mit dem Bild habe ich als einzel Grafik gelöst (Grafik mit Text). Also, kein Hintergrund, kein z-index -etwas mehr.
    Eine Sache habe ich gelernt:
    Frontpage=Fehler die bei nicht MS-Produkten auftauchen!
    Grüsse
    Greg

    Hallo
    Ich habe auch viele Kunden, die mit Microsoft Produkten zufrieden sind. Auch Unzufriedene gibt es natürlich... Es hat Vor- und nachteile mit Microsoft zu laufen. Ein Religionskrieg ist aber zu vermeiden und bringt nur teurere Lösungen.
    A propos Monopol: es gibt immer ein Markführer. Mit mehr oder weniger faire Marketing Methoden. Trotzdem, und ich hoffe, funtioniert den Markt
    ;)

    Richtig. Keine Religionskriege. Darum hält man sich auch an den festgeschriebenen Webstandard und nicht an die Ideen und Erfindungen von irgendwelchen Marktführern, die (wie die Vergangenheit gezeigt hat) gerne mal wechseln.

    Daher: No-IE-Only-Code! Only W3C!