tabelle - hintergrundbilder - eigenartige Darstellung in FF

[gregor]

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"><img src="images/top-left-none.jpg" border="0" /></td>
  <td height="31" weight="100%" style="background-image:url(images/top-tile-none.jpg)"></td>
  <td width="20"><img src="images/top-right-none.jpg" border="0" /></td>
 </tr>
 <tr>
  <td width="20" background="images/left-tile.jpg"></td>
  <td vAlign="top" align="center" style="background-image:url(images/content.jpg)">

<img src="images/chrome.jpg" border="0" />

</td>
  <td background="images/right-tile.jpg"></td>
 </tr>
 <tr>
  <td height="31"><img src="images/bottom-left.jpg" border="0" /></td>
  <td height="31" width="100%" style="background-image:url(images/bottom-tile.jpg)"></td>
  <td><img src="images/bottom-right.jpg" border="0" /></td>
 </tr>
</table>
  <!-- Menu -->
  <!-- Menu End -->
<br></br>

<table cellSpacing="0" cellPadding="0" width="100%" height="100%" bgColor="black" border="0" align="center">
 <tr>
  <td width="20" height="31"><IMG src="images/top-left.jpg" border="0"></td>
  <td><img src="images/top-tile.jpg" height="31" width="100%" border="0" /></td>
  <td width="20"><img src="images/top-right.jpg" border="0" /></td>
 </tr>
 <tr>
  <td width="20" background="images/left-tile.jpg"></td>
  <td vAlign="top" height="550" style="background-image:url(images/content.jpg)">
  <!-- Content -->
  <!-- Content End -->
  </td>
  <td background="images/right-tile.jpg"></td>
 </tr>
 <tr>
  <td height="31"><img src="images/bottom-left.jpg" border="0" /></td>
  <td height="31" width="100%" style="background-image:url(images/bottom-tile.jpg)"></td>
  <td><IMG src="images/bottom-right.jpg" border="0"></td>
 </tr>
 <tr>
     <td colspan="3" height="1" align="center"><font color="#ff8c00">&copy;&nbsp;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, gregor

[Candid Dauth]

Hallo du da draußen,

Verwende ausschließlich CSS fürs Design und achte auf eine korrekte logische Auszeichnung mit HTML. Bei deinem Wirrwarr-HTML-Tabellen-Layout weiß man nie, wie es in einem Browser angezeigt wird – schließlich darf ein Browser selbst entscheiden, wie er HTML darstellt – solange du ihm keine genaueren Informationen mit einem Stylesheet gibst.

So sieht man das auch auf deiner Seite (du solltest dir mal die </faq/> durchlesen, wie man Links macht): Riesige Abstände zwischen den von dir so ausgezeichneten Tabellenzellen. Die Abstände zwischen den Zellen kann man übrigens mithilfe von padding und border-spacing festlegen.

Nach einem Blicke in deinen Quellcode muss ich auch noch feststellen, dass du lächerlicherweise behauptest, XHTML Strict zu schreiben. Das brauche ich garnicht im Validator zu prüfen.

Grüße von hier drinnen, aus Biberach an der Riss,
Candid Dauth (Dogfish)

[gregor]

Hallo Candid Dauth (Dogfish)!

erstmal danke für deine antwort...

du meintest ich solle alle designaspekte in css angeben, ... nun wenn ich bei jedem td ein style="background-image:url(images/dummy.jpg)" etc. einfüge, hat das den effekt, dass die linken 3 bilder bzw. die rechten drei bilder schon gar nicht mehr angezeigt werden.

Was du allerdings mit abständen zwischen den bilder meinst weiss ich nicht, habe das nötige cellpadding & cellspacing in die table-def eingebaut.

zum thema xhtml ist zu sagen dass das meinste aus test und zeit gründen noch hardcodet ist, bzw. nicht xhtml komform. aber lächerlich würde ich es nicht bezeichnen... immerhin ist ja nicht alles falsch.

Ich bitte mir die lösung nochmal und ein bisschen detailierter näher zu bringen, da ich mit dem vorhanden nicht so viel anfangen kann.

Am liebsten wäre mir wenn jemand (bzw. du Dogfish) eine der beiden tabellen einfach her nehmen würde, und sie xhtml komform und sauber geschrieben mir posten würde.

hoffe das macht nicht zu viele umstände

mfg,

gregor

[Candid Dauth]

Hallo du da draußen,

Was du allerdings mit abständen zwischen den bilder meinst weiss ich nicht, habe das nötige cellpadding & cellspacing in die table-def eingebaut.

http://www.phoenix-world.com/Candid/files/selfforum/jduffy.png (112 KiB)

cellpadding und cellspacing sind HTML-Attribute. Wie gesagt, da bleibt es dem Browser selbst überlassen, wie er es darstellt. Verwende also Stylesheets für Angaben, wie etwas aussehen soll.

zum thema xhtml ist zu sagen dass das meinste aus test und zeit gründen noch hardcodet ist, bzw. nicht xhtml komform. aber lächerlich würde ich es nicht bezeichnen... immerhin ist ja nicht alles falsch.

Also ich finde es einfacher, gleich richtigen Code zu schreiben.

Am liebsten wäre mir wenn jemand (bzw. du Dogfish) eine der beiden tabellen einfach her nehmen würde, und sie xhtml komform und sauber geschrieben mir posten würde.

Soetwas wird hier generell nicht getan. Hier wird nur verholfen, die Lösung selbst zu finden. Und schriebe das jemand tatsächlich neu, würde er keine Tabellen verwenden – schließlich handelt es sich ja nicht um tabellarische Daten.

Mein Posting mag sich vielleicht arrogant und böse anhören – so ist es aber nicht gemeint. ;-)

Grüße von hier drinnen, aus Biberach an der Riss,
Candid Dauth (Dogfish)