Siegmund: Darstellungsproblemchen

Beitrag lesen

Hallo an alle,

ich habe ein Darstellungsproblem zwischen Firefox und IE 8.

Mit dem folgenden Script wird eine Tabelle mit zwei Spalten und zwei Reihen dargestellt. In der ersten Tabellen-Zelle wird eine Checkbox dargestellt, in der zweiten Zelle eine Überschrift. Die Zellenbreite der Checkbox soll nur so breit sein, dass die Checkbox dargestellt werden kann.
Sobald man jedoch die chekcbox anklickt, öffnet sich ein Menü, indem einige Buttons dargestellt werden -> die Zellenbreite wird also entsprechend größer dargestellt, sodass die Buttons sichtbar sind. Firefox macht soweit alles so, wie ich es haben will, der IE dagegen reisst die Zellenbreite ca. doppelt so weit auf, wie eigentlich notwendig. Folgend der code zum nachvollziehen:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Muster</title>
<script type="text/javascript">
function menue(chk)
         {
         var fs = document.getElementById('menue_' + chk.id);
         fs.style.display = (chk.checked) ? '' : 'none';
         }
</script>
</head>
<body bgcolor="#FFFF99">
<form action="test.php" method="POST">
<table style="width:98%;height:95%;background:black" border="1" cellpadding=0 cellspacing=0><tr style="height:25;">
<td style="width:10;">
<?PHP
$main=$_POST["main"];
if ($main=="")
   {
   $main="ja";
   }
echo"<input type="checkbox" id="a1" name="main" value="ja" onclick="menue(this);" ";
if ($main=="ja")
   {
   echo"checked=checked";
   }
echo"></td><td align="center"><font color=white>Headline</font></td></tr><tr><td valign="top" align="center">";
echo"<fieldset id="menue_a1" style="border:0; ";
if ($main=="nein")
   {
   echo"display:none;";
   }
echo""><font color=white>Menü</font>";
$x="1";
while ($x<="9")
      {
      echo"<hr><input type="submit" name="$x" value="Button_$x" style="width:120;">";
      $x++;
      }
echo"<hr></fieldset>";
echo"</td><td style="background:#CCCCCC;" valign="top" align="center">";
echo"<iframe src="inhalt.php" frameborder="0" style="width:100%;height:100%;"></iframe></td></tr>";
?>
</table></form>
</body>
</html>

Am <hr> zwischen den Buttons liegt es nicht, ich hatte es auch mal mit nur <br> getestet.

Wie kann ich es also anstellen, dass der IE nur die Breite darstellt, die man benötigt, um die Buttons darzustellen und nicht links un rechts noch 200 Pixel mehr angezeigt werden?

Freue mich über konstruktive Ratschläge

Siegmund