Problem mit CSS

Eistoeter · 13.01.2006, 17:27

Hi

Ich bin Programmierer eines Browser-Spieles.

Es gibt folgende Weltkarte:

Das ist eine Tabelle. Jede Zelle hat eine Grafik darin, eine Landschafts Textur. Per CSS lege ich DIVS über diese Tabelle um die Spielfiguren und die Gebäude darzustellen.

Das ganze passt natürlich nicht einfach so hin, die Spielfläche ist zu groß, deswegen ist die Tabelle von einer DIV-BOX eingeschlossen. Dort sind mittels overflow:scroll Scrollbars.

Hier wird alles korrekt angezeigt und alles funktioniert so wie ich will. Der Browser ist Firefox.

Jetzt schaut man sich das Ganze im IE an:

Die Tabelle ist hier aus der umgebenden DIV-BOX scheinbar "ausgebrochen". Wie kann ich das fixen?

Die #karte DIV-Box ist die Box mit dem overflow, welche nicht überschreitet werden sollte. Nach der #karte DIV-BOX kommt noch eine Box die genauso groß ist wie die Tabelle, also die ganze Karte. Diese ist relativ positioniert, so dass in dieser Box widerum die Figuren und Gebäude absolut positioniert werden können und dabei trotzdem von den Scrollleisten beeinflusst werden. (Würd ich das nicht machen würde man die Figuren und Gebäude immer sehen) Dann kommen die DIVS die über die Tabelle positioniert werden. Dann die Tabelle.

Code:

Code:

#karte {
   height: 390px;
   width: 100%;
   overflow: scroll;
}

        <!-- START PLANETENKARTE -->
  <div id="karte">
  <div style="position: relative; width: 820px; height: 1036px;">
<div style="z-index: 1; position: absolute; top: 136px; left: 320px; width: 100px; height: 100px;" /><img src="textures/temp/2/5.png" /></div>
<div style="z-index: 1; position: absolute; top: 236px; left: 220px; width: 100px; height: 100px;" /><img src="textures/temp/2/2.png" /></div>
<div style="z-index: 1; position: absolute; top: 236px; left: 420px; width: 100px; height: 100px;" /><img src="buildings/menschen/economy/aufkw1.png" /></div>
<div style="z-index: 1; position: absolute; top: 336px; left: 220px; width: 100px; height: 100px;" /><img src="buildings/menschen/military/kaserne2.png" /></div>
<div style="z-index: 1; position: absolute; top: 336px; left: 420px; width: 100px; height: 100px;" /><img src="textures/temp/2/1.png" /></div>
<div style="z-index: 1; position: absolute; top: 536px; left: 220px; width: 100px; height: 100px;" /><img src="textures/temp/2/3.png" /></div>
<div style="z-index: 1; position: absolute; top: 536px; left: 420px; width: 100px; height: 100px;" /><img src="buildings/menschen/military/kaserne2.png" /></div>

<table style="position: absolute; " width="820" border="0" cellpadding="0" cellspacing="0" align="center">
 <tr>
  <td width="20">&nbsp;</td>
  <td width="100" align="center">A<br />1</td>
  <td width="100" align="center">B<br />2</td>

  <td width="100" align="center">C<br />3</td>
  <td width="100" align="center">D<br />4</td>
  <td width="100" align="center">E<br />5</td>
  <td width="100" align="center">F<br />6</td>
  <td width="100" align="center">G<br />7</td>

  <td width="100" align="center">H<br />8</td>
 </tr>
 <tr>
  <td width="20"><a name="1"></a>1</td>
  <td bgcolor="#000000" width="100" height="100"><img src="textures/fog/gras 100.jpg" border="0" alt=""></td>
  <td bgcolor="#000000" width="100" height="100"><img src="textures/Wasser 100.jpg" alt="" border="0"></td>
  <td bgcolor="#000000" width="100" height="100"><a href="/planet.php?aktion=setpos&pos_field=3&pos_row=1&fid=3&map=18#1"><img src="textures/gras 100.jpg" alt="" border="0"></a></td>

  <td bgcolor="#000000" width="100" height="100"><a href="/planet.php?aktion=setpos&pos_field=4&pos_row=1&fid=4&map=18#1"><img src="textures/gras 100.jpg" alt="" border="0"></a></td>
  <td bgcolor="#000000" width="100" height="100"><a href="/planet.php?aktion=setpos&pos_field=5&pos_row=1&fid=5&map=18#1"><img src="textures/gras2.jpg" alt="" border="0"></a></td>
  <td bgcolor="#000000" width="100" height="100"><a href="/planet.php?aktion=setpos&pos_field=6&pos_row=1&fid=6&map=18#1"><img src="textures/erde01.jpg" alt="" border="0"></a></td>
  <td bgcolor="#000000" width="100" height="100"><a href="/planet.php?aktion=setpos&pos_field=7&pos_row=1&fid=7&map=18#1"><img src="textures/gras 100.jpg" alt="" border="0"></a></td>
  <td bgcolor="#000000" width="100" height="100"><a href="/planet.php?aktion=setpos&pos_field=8&pos_row=1&fid=8&map=18#1"><img src="textures/gras 100.jpg" alt="" border="0"></a></td>
 </tr>
 <tr>
  <td width="20"><a name="2"></a>2</td>

  <td bgcolor="#000000" width="100" height="100"><img src="textures/fog/gras 100.jpg" border="0" alt=""></td>
  <td bgcolor="#000000" width="100" height="100"><a href="/planet.php?aktion=setpos&pos_field=2&pos_row=2&fid=10&map=18#2"><img src="textures/gras 100.jpg" alt="" border="0"></a></td>
  <td bgcolor="#000000" width="100" height="100"><a href="/planet.php?aktion=setpos&pos_field=3&pos_row=2&fid=11&map=18#2"><img src="textures/gras 100.jpg" alt="" border="0"></a></td>
  <td bgcolor="#000000" width="100" height="100"><a href="/planet.php?aktion=setpos&pos_field=4&pos_row=2&fid=12&map=18#2"><img src="textures/gras 100.jpg" alt="" border="0"></a></td>
  <td bgcolor="#000000" width="100" height="100"><a href="/planet.php?aktion=setpos&pos_field=5&pos_row=2&fid=13&map=18#2"><img src="textures/erde01.jpg" alt="" border="0"></a></td>
  <td bgcolor="#000000" width="100" height="100"><a href="/planet.php?aktion=setpos&pos_field=6&pos_row=2&fid=14&map=18#2"><img src="textures/erde01.jpg" alt="" border="0"></a></td>
  <td bgcolor="#000000" width="100" height="100"><a href="/planet.php?aktion=setpos&pos_field=7&pos_row=2&fid=15&map=18#2"><img src="textures/gras 100.jpg" alt="" border="0"></a></td>
  <td bgcolor="#000000" width="100" height="100"><a href="/planet.php?aktion=setpos&pos_field=8&pos_row=2&fid=16&map=18#2"><img src="textures/gras 100.jpg" alt="" border="0"></a></td>
 </tr>

 <tr>
  <td width="20"><a name="3"></a>3</td>
  <td bgcolor="#000000" width="100" height="100"><img src="textures/fog/gras 100.jpg" border="0" alt=""></td>
  <td bgcolor="#000000" width="100" height="100"><a href="/planet.php?aktion=setpos&pos_field=2&pos_row=3&fid=18&map=18#3"><img src="textures/gras 100.jpg" alt="" border="0"></a></td>
  <td bgcolor="#000000" width="100" height="100"><a href="/planet.php?aktion=setpos&pos_field=3&pos_row=3&fid=19&map=18#3"><img src="textures/gras 100.jpg" alt="" border="0"></a></td>
  <td bgcolor="#000000" width="100" height="100"><a href="/planet.php?aktion=setpos&pos_field=4&pos_row=3&fid=20&map=18#3"><img src="textures/gras 100.jpg" alt="" border="0"></a></td>
  <td bgcolor="#000000" width="100" height="100"><a href="/planet.php?aktion=setpos&pos_field=5&pos_row=3&fid=21&map=18#3"><img src="textures/gras 100.jpg" alt="" border="0"></a></td>
  <td bgcolor="#000000" width="100" height="100"><a href="/planet.php?aktion=setpos&pos_field=6&pos_row=3&fid=22&map=18#3"><img src="textures/gras 100.jpg" alt="" border="0"></a></td>

  <td bgcolor="#000000" width="100" height="100"><a href="/planet.php?aktion=setpos&pos_field=7&pos_row=3&fid=23&map=18#3"><img src="textures/gras 100.jpg" alt="" border="0"></a></td>
  <td bgcolor="#000000" width="100" height="100"><img src="textures/wasser06.jpg" alt="" border="0"></td>
 </tr>
 <tr>
  <td width="20"><a name="4"></a>4</td>
  <td bgcolor="#000000" width="100" height="100"><img src="textures/fog/Wasser 100.jpg" border="0" alt=""></td>
  <td bgcolor="#000000" width="100" height="100"><a href="/planet.php?aktion=setpos&pos_field=2&pos_row=4&fid=26&map=18#4"><img src="textures/gras 100.jpg" alt="" border="0"></a></td>
  <td bgcolor="#000000" width="100" height="100"><a href="/planet.php?aktion=setpos&pos_field=3&pos_row=4&fid=27&map=18#4"><img src="textures/gras 100.jpg" alt="" border="0"></a></td>

  <td bgcolor="#000000" width="100" height="100"><a href="/planet.php?aktion=setpos&pos_field=4&pos_row=4&fid=28&map=18#4"><img src="textures/gras 100.jpg" alt="" border="0"></a></td>
  <td bgcolor="#000000" width="100" height="100"><img src="textures/gras 100.jpg" alt=""></td>
  <td bgcolor="#000000" width="100" height="100"><a href="/planet.php?aktion=setpos&pos_field=6&pos_row=4&fid=30&map=18#4"><img src="textures/gras 100.jpg" alt="" border="0"></a></td>
  <td bgcolor="#000000" width="100" height="100"><img src="textures/wasser06.jpg" alt="" border="0"></td>
  <td bgcolor="#000000" width="100" height="100"><img src="textures/wasser05.jpg" alt="" border="0"></td>
 </tr>
 <tr>
  <td width="20"><a name="5"></a>5</td>

  <td bgcolor="#000000" width="100" height="100"><img src="textures/fog/Wasser 100.jpg" border="0" alt=""></td>
  <td bgcolor="#000000" width="100" height="100"><img src="textures/Wasser 100.jpg" alt="" border="0"></td>
  <td bgcolor="#000000" width="100" height="100"><a href="/planet.php?aktion=setpos&pos_field=3&pos_row=5&fid=35&map=18#5"><img src="textures/gras 100.jpg" alt="" border="0"></a></td>
  <td bgcolor="#000000" width="100" height="100"><a href="/planet.php?aktion=setpos&pos_field=4&pos_row=5&fid=36&map=18#5"><img src="textures/gras 100.jpg" alt="" border="0"></a></td>
  <td bgcolor="#000000" width="100" height="100"><a href="/planet.php?aktion=setpos&pos_field=5&pos_row=5&fid=73&map=18#5"><img src="textures/gras 100.jpg" alt="" border="0"></a></td>
  <td bgcolor="#000000" width="100" height="100"><a href="/planet.php?aktion=setpos&pos_field=6&pos_row=5&fid=74&map=18#5"><img src="textures/gras 100.jpg" alt="" border="0"></a></td>
  <td bgcolor="#000000" width="100" height="100"><img src="textures/wasser06.jpg" alt="" border="0"></td>
  <td bgcolor="#000000" width="100" height="100"><img src="textures/wasser05.jpg" alt="" border="0"></td>
 </tr>

 <tr>
  <td width="20"><a name="6"></a>6</td>
  <td bgcolor="#000000" width="100" height="100"><img src="textures/fog/gras 100.jpg" border="0" alt=""></td>
  <td bgcolor="#000000" width="100" height="100"><a href="/planet.php?aktion=setpos&pos_field=2&pos_row=6&fid=78&map=18#6"><img src="textures/gras 100.jpg" alt="" border="0"></a></td>
  <td bgcolor="#000000" width="100" height="100"><a href="/planet.php?aktion=setpos&pos_field=3&pos_row=6&fid=79&map=18#6"><img src="textures/erde_huegel01.jpg" alt="" border="0"></a></td>
  <td bgcolor="#000000" width="100" height="100"><a href="/planet.php?aktion=setpos&pos_field=4&pos_row=6&fid=80&map=18#6"><img src="textures/erde_huegel01.jpg" alt="" border="0"></a></td>
  <td bgcolor="#000000" width="100" height="100"><a href="/planet.php?aktion=setpos&pos_field=5&pos_row=6&fid=81&map=18#6"><img src="textures/erde_huegel01.jpg" alt="" border="0"></a></td>
  <td bgcolor="#000000" width="100" height="100"><a href="/planet.php?aktion=setpos&pos_field=6&pos_row=6&fid=82&map=18#6"><img src="textures/erde_huegel01.jpg" alt="" border="0"></a></td>

  <td bgcolor="#000000" width="100" height="100"><img src="textures/wasser06.jpg" alt="" border="0"></td>
  <td bgcolor="#000000" width="100" height="100"><img src="textures/wasser06.jpg" alt="" border="0"></td>
 </tr>
 <tr>
  <td width="20"><a name="7"></a>7</td>
  <td bgcolor="#000000" width="100" height="100"><img src="textures/black.gif"></td>
  <td bgcolor="#000000" width="100" height="100"><a href="/planet.php?aktion=setpos&pos_field=2&pos_row=7&fid=86&map=18#7"><img src="textures/gras02.jpg" alt="" border="0"></a></td>
  <td bgcolor="#000000" width="100" height="100"><a href="/planet.php?aktion=setpos&pos_field=3&pos_row=7&fid=87&map=18#7"><img src="textures/gras01.jpg" alt="" border="0"></a></td>

  <td bgcolor="#000000" width="100" height="100"><a href="/planet.php?aktion=setpos&pos_field=4&pos_row=7&fid=88&map=18#7"><img src="textures/erde_huegel01.jpg" alt="" border="0"></a></td>
  <td bgcolor="#000000" width="100" height="100"><a href="/planet.php?aktion=setpos&pos_field=5&pos_row=7&fid=89&map=18#7"><img src="textures/erde_huegel02.jpg" alt="" border="0"></a></td>
  <td bgcolor="#000000" width="100" height="100"><a href="/planet.php?aktion=setpos&pos_field=6&pos_row=7&fid=90&map=18#7"><img src="textures/erde_huegel03.jpg" alt="" border="0"></a></td>
  <td bgcolor="#000000" width="100" height="100"><a href="/planet.php?aktion=setpos&pos_field=7&pos_row=7&fid=91&map=18#7"><img src="textures/Berg100.jpg" alt="" border="0"></a></td>
  <td bgcolor="#000000" width="100" height="100"><a href="/planet.php?aktion=setpos&pos_field=8&pos_row=7&fid=92&map=18#7"><img src="textures/Berg100.jpg" alt="" border="0"></a></td>
 </tr>
 <tr>
  <td width="20"><a name="8"></a>8</td>

  <td bgcolor="#000000" width="100" height="100"><img src="textures/black.gif"></td>
  <td bgcolor="#000000" width="100" height="100"><img src="textures/black.gif"></td>
  <td bgcolor="#000000" width="100" height="100"><img src="textures/black.gif"></td>
  <td bgcolor="#000000" width="100" height="100"><img src="textures/black.gif"></td>
  <td bgcolor="#000000" width="100" height="100"><img src="textures/black.gif"></td>
  <td bgcolor="#000000" width="100" height="100"><img src="textures/black.gif"></td>
  <td bgcolor="#000000" width="100" height="100"><img src="textures/black.gif"></td>
  <td bgcolor="#000000" width="100" height="100"><img src="textures/black.gif"></td>
 </tr>

 <tr>
  <td width="20"><a name="9"></a>9</td>
  <td bgcolor="#000000" width="100" height="100"><img src="textures/black.gif"></td>
  <td bgcolor="#000000" width="100" height="100"><img src="textures/black.gif"></td>
  <td bgcolor="#000000" width="100" height="100"><img src="textures/black.gif"></td>
  <td bgcolor="#000000" width="100" height="100"><img src="textures/black.gif"></td>
  <td bgcolor="#000000" width="100" height="100"><img src="textures/black.gif"></td>
  <td bgcolor="#000000" width="100" height="100"><img src="textures/black.gif"></td>

  <td bgcolor="#000000" width="100" height="100"><img src="textures/black.gif"></td>
  <td bgcolor="#000000" width="100" height="100"><img src="textures/black.gif"></td>
 </tr>
 <tr>
  <td width="20"><a name="10"></a>10</td>
  <td bgcolor="#000000" width="100" height="100"><img src="textures/black.gif"></td>
  <td bgcolor="#000000" width="100" height="100"><img src="textures/black.gif"></td>
  <td bgcolor="#000000" width="100" height="100"><img src="textures/black.gif"></td>

  <td bgcolor="#000000" width="100" height="100"><img src="textures/black.gif"></td>
  <td bgcolor="#000000" width="100" height="100"><img src="textures/black.gif"></td>
  <td bgcolor="#000000" width="100" height="100"><img src="textures/black.gif"></td>
  <td bgcolor="#000000" width="100" height="100"><img src="textures/black.gif"></td>
  <td bgcolor="#000000" width="100" height="100"><img src="textures/black.gif"></td>
 </tr>
</table></div></div>
  <!-- ENDE PLANETENKARTE -->