Tamer Kavlak: Css Problem mit IE 6.0

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 ---

  1. Hallo,

    Hat Jemand eine Idee/Tip worin das Problem liegen koennte

    Mach es genau umgekehrt.
    Gibt nicht dem <div> einen Außenabstand (margin), sondern der Zelle einen Innenabstand (padding) von 10px

    .positionContainer  {}
    .containerGroupBoxContentGrey   { background-color: #EEEEEE; vertical-align: top; padding:10px;}

    Gruß NAG

    --
    signatur
    1. Hallo,

      Hat Jemand eine Idee/Tip worin das Problem liegen koennte

      Mach es genau umgekehrt.
      Gibt nicht dem <div> einen Außenabstand (margin), sondern der Zelle einen Innenabstand (padding) von 10px

      .positionContainer  {}
      .containerGroupBoxContentGrey   { background-color: #EEEEEE; vertical-align: top; padding:10px;}

      Gruß NAG

      Danke NAG,

      Ich inzwischen rausgefunden, dass der DOCTYPE Probleme verursacht. Wenn ich ihn aendere zB. auf:
      <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">

      dann ist das Problem geloest, dafuer spinnt Mozilla und Explorer bekommt andere Probleme, uaaaahhhhhh :-)

      Dein Loesungsvorschlag scheint mir momenatn die Schmerzloseste zu sein.

      Gruss

      Tamer

      1. Hallo,

        Ich inzwischen rausgefunden, dass der DOCTYPE Probleme verursacht. Wenn ich ihn aendere zB. auf:
        <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
          "http://www.w3.org/TR/html4/loose.dtd">

        dann ist das Problem geloest, dafuer spinnt Mozilla und Explorer bekommt andere Probleme, uaaaahhhhhh :-)

        dieses Phänomen hat auch einen Namen:
        "Doctype Switch"

        ich weiss ja nicht, wie sehr du dich mit deiner Webseite auseinandersetzen willst. aber wenn es ein wenig mehr sein soll, dann wirst du früher oder später damit in kontakt kommen. infos findest du übrigens hier:
        http://www.google.de/search?hl=de&q=doctype+switch&btnG=Google-Suche&meta=

        mfg NAG

        --
        signatur
        1. dieses Phänomen hat auch einen Namen:
          "Doctype Switch"

          ich weiss ja nicht, wie sehr du dich mit deiner Webseite auseinandersetzen willst. aber wenn es ein wenig mehr sein soll, dann wirst du früher oder später damit in kontakt kommen. infos findest du übrigens hier:
          http://www.google.de/search?hl=de&q=doctype+switch&btnG=Google-Suche&meta=

          mfg NAG

          Nochmals Danke

          Das war genau das Stichwort, das mir auf der Fehlersuche gefehlt hatte. Da die Seite mehr als nur hobbymaessiges ist, komme ich nicht um die ganze Problematik drumherum. Jetzt weiss ich aber wenigstens das Problem.

          Gruss

          Tamer