tabelle - hintergrundbilder - eigenartige Darstellung in FF

    Hallo!

    Ich habe folgendes problem...
    ich habe auf einer Seite eine Tabelle die den Content bzw. den schriftlichen Inhalt der Seite darstellen soll. diese tabelle hat 9 zellen in dennen jeweils ein hintergrundbild ist (zwingend ist das aber nur in einer Zelle). Das Problem dabei ist das wenn man die seite im Firefox aufruft, das jener die bilder der tabelle eigenartig zerteilt - im IE geht es andererseits ohne probleme.
    Zu sehen unter: http://members.chello.at/gjimplementation/
    (sollte drop down menu an falscher stelle sein einmal f5 drücken - ist ein anderes problem... :) )

    um die ansicht zu erleichtern hier der code um den es geht:

    <table cellSpacing="0" cellPadding="0" width="100%" bgColor="black" border="0" align="center">
    <tr>
    <td width="20" height="31"></td>
    <td height="31" weight="100%" style="background-image:url(images/top-tile-none.jpg)"></td>
    <td width="20"></td>
    </tr>
    <tr>
    <td width="20" background="images/left-tile.jpg"></td>
    <td vAlign="top" align="center" style="background-image:url(images/content.jpg)">

    </td>
    <td background="images/right-tile.jpg"></td>
    </tr>
    <tr>
    <td height="31"></td>
    <td height="31" width="100%" style="background-image:url(images/bottom-tile.jpg)"></td>
    <td></td>
    </tr>
    </table>

    </br>

    <table cellSpacing="0" cellPadding="0" width="100%" height="100%" bgColor="black" border="0" align="center">
    <tr>
    <td width="20" height="31"></td>
    <td></td>
    <td width="20"></td>
    </tr>
    <tr>
    <td width="20" background="images/left-tile.jpg"></td>
    <td vAlign="top" height="550" style="background-image:url(images/content.jpg)">


    </td>
    <td background="images/right-tile.jpg"></td>
    </tr>
    <tr>
    <td height="31"></td>
    <td height="31" width="100%" style="background-image:url(images/bottom-tile.jpg)"></td>
    <td></td>
    </tr>
    <tr>
    <td colspan="3" height="1" align="center"><font color="#ff8c00">&copy;Copyright by JDuffy. All Rights Reserved.</font></td>
    </tr>
    </table>


    Muss aber auch ehrlich dazu sagen das diese beiden tabellen eher improvisation sind... wie man sowas am besten löst weiss ich nicht.

    bin für jede hilfe dankbar.

    lg, cannubis 8)

    Moin!

    Zunächst einmal herzlichen Glückwunsch, ich habe noch keine HTML-Seite gesehen, die so voll mit Javascript gestopft ist und dabei so wenig damit erreicht. Wo hast du das machen lassen?

    Das ist aber überraschenderweise nicht das Problem.
    Bei deiner Seite beissen sich die Angaben zum Documententyp und die Tabellenformatierung. Im Documentyp (das ist das, was ganz oben als allererstes auf der Seite steht) gibst du mit dem Zusatz "Strict" an, daß du nur das neue HTML verwenden willst.

    Code
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


    Dann mußt du jedoch auch die ganze Seite und vor allem die Tabellen mit Stylesheets formatieren, was einerseits etwas komplizierter ist, aber andererseits auch noch wesentlich mehr Möglichkeiten ergibt.

    Die einfachere und in deinem Fall auch sicherlich bessere Variante ist, den Documententyp abwärtskompertibel zu machen und mit "transitional" auch ältere Formatierungsarten zuzulassen. Das hat den Vorteil, daß es dann auch ältere Browsermodelle verstehen. Der Code dazu lautet (XHTML-gerecht):

    Code
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    Das ist eigentlich dann schon alles.
    Einziges sonstiges Problem vielleicht noch dein JavaScript. Das Pulldownmenü hast du z.B. doppelt (übereinander liegend) im Quelltext.
    Da muß dir dann aber jemand anderes helfen, ich hasse Javascript ;)

    Gruß aus der Marsch

    Ronald

    hallo!

    um den quell text etwas besser bzw. einfacher zu gestalten, habe ich die js datei ausgelagert.

    zum thema xhtml nun ich möchte eine sauber geschriebene page haben, die jedoch auch überall kompatibel ist. wenn es sein muss auch mit css!

    Würde mir sehr helfen wenn jemand mir die nachfolgende tabelle sauber umschreiben würde so das es in jedemfall gut geht, (lieber allerdings die schwieriger variante!):

    Code:

    <table cellSpacing="0" cellPadding="0" width="100%" height="100%" bgColor="black" border="0" align="center">
    <tr>
    <td width="20" height="31"></td>
    <td></td>
    <td width="20"></td>

    </tr>
    <tr>
    <td width="20" background="images/left-tile.jpg"></td>
    <td vAlign="top" height="550" style="background-image:url(images/content.jpg)">


    <font size="3">News:</font></p>

    Hier steht text... </p>

    encr</p>


    </td>

    <td background="images/right-tile.jpg"></td>
    </tr>
    <tr>
    <td height="31"></td>
    <td height="31" width="100%" style="background-image:url(images/bottom-tile.jpg)"></td>
    <td></td>
    </tr>
    </table>


    Danke für eure hilfe...

    Cannubis 8)

    P.S.: das menu ist ein open source projekt, jedoch wird die page von einem servlet generiert, ... entschuligt allerdings nicht dieses "wirrwar"...