Tamer Kavlak: Css Problem mit IE 6.0

Beitrag lesen

Hallo Zusammen

Unten habe eine Html Seite und ein darin verwendetes Stylesheet angehaengt. Die Html Seite zeigt ein grundgerüst, dass ich mehrfach verwende. Mit <div class="positionContainer"> versuche ich innerhald eines TD rundherum ein margin von 10px zu setzen. Mozilla und Netscape setllen es wie erwartet dar, IE 6.0 hat Probleme damit. Auf der rechten Seite macht er keinen margin und schneidet den Inhalt der Tabelle ab.

Ein Screenshot ist ev. hier ersichtlich (irgendwie hatte yahooetwas Muehe, ich in nicht sicher, ob der Ordner wirklich public ist):
http://f2.pg.briefcase.yahoo.com/tamer_kavlak
unter images nach nn_vs_ie.jpg Ausschau halten

Hat Jemand eine Idee/Tip worin das Problem liegen koennte

Vielen Dank

Tamer

--- start html ---

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Test Page</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>

<body topmargin="0">

<br>

<form name="test" method="post" action="foo?">

<table border="0" cellspacing="0" cellpadding="0" style="width:100%">
    <tr>
   <td class="containerGroupBoxContentGrey">

<!-- start box with margins -->

<div class="positionContainer">
     <table border="0" cellspacing="0" cellpadding="2" style="width:100%">
      <tr>
       <td>
        <table width='100%' border='0' cellspacing='0' cellpadding='1'>
         <tr>
          <td colspan='2' align='left'><b>Underlying Vehicle :</b>
           XY Share&nbsp;&nbsp;
          </td>
         </tr>
         <tr>
          <td colspan='2' align='left'><b>Distribution Rule:</b>
           BLABLA&nbsp;&nbsp;
          </td>
         </tr>
         <tr>
          <td align='left'><b>ISIN :</b>
           123456&nbsp;&nbsp;</td>
          <td align='left'><b>Trading Location :</b>
           NASDAQ&nbsp;&nbsp;</td>
         </tr>
         <tr>
          <td align='left'><b>Current Market Price:</b>
           100.80&nbsp;USD
          </td>
          <td>
           <b>As of :</b>
           22.Feb.2005&nbsp;&nbsp;15:54:04 GMT&nbsp;&nbsp;
          </td>
         </tr>
        </table>

</td>
      </tr>
      <tr>
       <td>
        <table width='100%' border='1' cellspacing='1' cellpadding='2'>
         <tr>
          <td  align='left' colspan='7'>1. EOR</td>
         </tr>
         <tr>
          <th  align='center' valign='middle'>Plan</th>
          <th  align='center' valign='middle'>Participation<br>ID</th>
          <th  align='center' valign='middle'>Least<br>Expiration<br>Date</th>
          <th  align='center' valign='middle'>Vehicle<br>Currency</th>
          <th  align='center' valign='middle'>Vehicle</th>
          <th  align='center' valign='middle'>Available</th>
          <th  align='center' valign='middle'>Current<br>Qty<br>Actionable</th>
         </tr>
         <tr>
          <td align="left" >X</td>
          <td align="left" >Y</td>
          <td align="left" >01.Apr.2012</td>
          <td align="left" >USD</td>
          <td align="left" >TEST</td>
          <td align ="center" >??</td>
          <td align ="right" >5,820</td>
         </tr>
        </table>
       </td>
      </tr>
     </table>
    </div>

<!-- end box with margins -->

</td>
   <td class="containerGroupBoxShadow"><img src="images/spacer.gif" style="width:1px" /></td>
  </tr>
  <tr>
   <td colspan="2" class="containerGroupBoxShadow"><img src="images/spacer.gif" style="height:1px" /></td>
  </tr>
</table>
<table border="0" cellspacing="0" cellpadding="0">
  <tr>
   <td>
    <div class="buttonBox">
     <input type="submit" value="Transact on the group above">
    </div>
   </td>
  </tr>
</table>
</form>

</body>
</html>

--- end html ---

--- start stylesheet 'styles.css' ---

.containerGroupBoxShadow    { background-color: #CCCCCC; }
.buttonBox { margin: 10px 10px 10px 10px; margin-left: 10px; margin-right: 10px; margin-top: 10px; margin-bottom: 10px; }
.positionContainer  { margin:10px 10px 10px 10px; margin-left:10px; margin-right:10px; margin-top:10px; margin-bottom:10px; }
.containerGroupBoxContentGrey   { background-color: #EEEEEE; vertical-align: top; }
--- end styleysheet ---