Seite wird nur im IE korrekt angezeigt

dreaddy

hm also es gibt folgende Seite:
http://www.eternalreign.de/eronline/testopera.html

Da ist ein Bild drin und eine Zahl darüber.
Unter dem IE wird die Seite auch richtig angezeigt, aber unter jedem anderen Browser(nagut bisher habich nur Opera und Firefox probiert ) fehlt die weisse Zahl.

Kann mir jemand mal verraten wieso da so ist bzw wo der Fehler ist? ^^ ich such da schon ewig und valid sollte die Seite auch sein.

dreaddy

toll, ich habs mal wieder 3 minuten nach dem post rausgefunden, anscheinend wird bei einem "normalen" Browser das Bild über die Zahl gezeichnet wenn man erst die zahl und dann das bild darstellt, beim IE hingegen nicht ^^

nich so toll:

<DIV ID='Container' ALIGN='left'
style='overflow:auto;position:relative;left:0;top:0' >

  <div
  style='width:0;height:0;position:absolute;left:0;top:0'>
        <table><tr><td>
        <font color='#FFFFFF'><b>22</b></font>
        </td></tr></table>
</DIV>
      <a href = 'www.toll.de'>
      <img border=0 height=40 width=40 src = '../imgs/MONSTER_KREUZRITTER_VON_DON_ARMIR.gif' alt = '1232'>
      </a>
</div>

toll:

<DIV ID='Container' ALIGN='left'
style='width:40;height:40;overflow:auto;position:relative;left:0;top:0' >
      <a href = 'www.toll.de'>
      <img border=0 height=40 width=40 src = '../imgs/MONSTER_KREUZRITTER_VON_DON_ARMIR.gif' alt = '1232'>
      </a>
  <div
  style='width:40;height:40;position:absolute;left:0;top:0'>
        <table><tr><td>
        <font color='#FFFFFF'><b>22</b></font>
        </td></tr></table>
</DIV>
</div>

flenders

Die Verschachtelung von DIVs (absolut und relativ positioniert) in der Tabelle sieht sehr komisch aus

dreaddy

Naja Sinn der Sache ist es relativ zu einem bestimmten Element ein anderes absolut zu positionieren.
Wenn es da eine bessere Möglichkeit gibt immer her damit :>

flenders

Ich weiß jetzt nicht so genau, was genau du machen willst, aber warum mischt du Tabellen und DIVs so? Ich denke du solltest dich bei der Positionierung schon für die eine oder die andere Variante entscheiden.

dreaddy schrieb:

Naja Sinn der Sache ist es relativ zu einem bestimmten Element ein anderes absolut zu positionieren.

Du willst also eine Überlagerung von verschiedenen Sachen (denn das erreichst du ja mit absoluter Positionierung)

dreaddy

naja das position:absolute orientiert sich am übergeordneten position:xxxx element oder wenn es sowas nicht gibt an der Seite selbst, deswegen position:relative mit x0 y0, das macht quasi überhaupt nichts aber sorgt dafür das das position:absolute genau da ansetzt wo es hin soll.

und was ich eigentlich will... hm ich machma am Besten nen Screenshot

da:
www.eternalreign.de/eronline.jpg

Ich will halt diese Monsterbilder mit den Zahlen darüber darstellen, die natürlich an keiner festen Position stehen.
Und mit Hintergrundbild zu arbeiten macht auch nur Probleme, besonders weil man dem nicht sagen kann verkleinere das Bild auf 40*40 ;).

flenders

dreaddy schrieb:

Und mit Hintergrundbild zu arbeiten macht auch nur Probleme, besonders weil man dem nicht sagen kann verkleinere das Bild auf 40*40 ;).

Naja, das sollte man eh nicht machen - sieht schlecht aus und verursacht nur unnötig lange Ladezeiten.

Aber warum packst du z.B. die Zahl nochmal in eine extra Tabelle?!

dreaddy

Problem dabei is halt das ich nur dieses eine Bild hab und das nichtmal ne feste Größe hat ^^
Und ich verkleiner sicher nicht mehrere hundert Bilder per Hand, besonders wenn dauernd Neue dazukommen.

Die Tabelle müsste ich inzwischen auch weglassen können, die hat ihren Sinn verwirkt.

flenders

dreaddy schrieb:

Problem dabei is halt das ich nur dieses eine Bild hab und das nichtmal ne feste Größe hat ^^
Und ich verkleiner sicher nicht mehrere hundert Bilder per Hand, besonders wenn dauernd Neue dazukommen.

Für sowas kann man auch PHP nehmen (falls du das zur Verfügung hast) - naja, sollte auch nur eine Anmerkung sein, wenn du es lieber so lassen willst... deine Entscheidung

Ben04

Wie wäre es mit solch einem Konstrukt:

<table>
    <tr>
        <td>a</td>
        <td>b</td>
        <td>c</td>
        <td>d</td>
        <td>e</td>
        <td>f</td>
        <td>g</td>
        <td>h</td>
    </tr>
    <tr>
        <td>a</td>
        <td>b</td>
        <td>c</td>
        <td>d</td>
        <td>e</td>
        <td>f</td>
        <td>g</td>
        <td>h</td>
    </tr>
    <tr>
        <td>Test:<table>
            <tr>
                <td>a</td>
                <td>b</td>
                <td>c</td>
                <td>d</td>
            </tr>
        </table>
        </td>
    </tr>
</table>