darkAngel012: Float einer Tabelle Probleme IE8

Beitrag lesen

Sehr geehrte Damen und Herren,

ich wende mich an Sie, da ich selber leider nicht mehr weiter weiß.

Es geht um ein Problem im IE8.

Ich habe eine Homepage im IE7 erstellt und leider wird mir mit IE8 meine Tabelle immer unter das Bild geschoben.

Ich habe es schon probiert mit div's nur leider habe ich noch keine Funktion gefunden welche mir meine rechte Seite der Tabelle immer genau untereinander macht.

Mit text-align: right; hängt es immer von der Zeichenanzahl ab.
und wenn ich von links margin_left: verwende fährt der Text leider nicht so schön zusammen wie bei einer Tabelle.

Hier der HTML CODE:

  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  
       "http://www.w3.org/TR/html4/strict.dtd">  
<html>  
  
<head>  
    <title>Titel</title>  
  
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />  
    <meta name="description" content="">  
    <meta name="author" content="">  
    <meta name="keywords" content="">  
    <meta name="generator" content="Webocton - Scriptly (www.scriptly.de)">  
  
    <link href="test2.css" type="text/css" rel="stylesheet">  
    <link href="../images/" type="image/x-icon" rel="shortcut icon">  
</head>  
  
<body>  
    <div class="container">  
        <div class="nav">  
        Navigation  
        </div>  
        <div class="image">  
        Bild  
        </div>  
       <div class="text">  
          <table border="1" summary="">  
             <tbody>  
                <tr>  
                   <td id="spaltenbreite">Gesch&auml;ftsleitung:</td>  
                   <td>xxx</td>  
                </tr>  
                <tr>  
                   <td>Technische Leitung:</td>  
                   <td>xxx</td>  
                </tr>  
                <tr>  
                   <td>Projektleitung:</td>  
                   <td>xxx<br>xxx</td>  
                </tr>  
                <tr>  
                   <td>Konstruktion:</td>  
                   <td>xxx<br>xxx<br>xxx</td>  
                </tr>  
                <tr>  
                   <td>Verwaltung:</td>  
                   <td>xxx<br>xxx</td>  
                </tr>  
             </tbody>  
          </table>  
       </div>  
       <div class="text">  
          <table border="1" summary="">  
             <tbody>  
                <tr>  
                   <td id="spaltenbreite">Gesch&auml;ftsleitung:</td>  
                   <td>xxx</td>  
                </tr>  
                <tr>  
                   <td>Technische Leitung:</td>  
                   <td>xxx</td>  
                </tr>  
                <tr>  
                   <td>Projektleitung:</td>  
                   <td>xxx<br>xxx</td>  
                </tr>  
                <tr>  
                   <td>Konstruktion:</td>  
                   <td>xxx<br>xxx<br>xxx</td>  
                </tr>  
                <tr>  
                   <td>Verwaltung:</td>  
                   <td>xxx<br>xxx</td>  
                </tr>  
             </tbody>  
          </table>  
       </div>  
    </div>  
</body>  
</html>  

und hier der CSS Code dazu: (ohne Inhalt nur mit hintergrundfarben)

  
.container {  
    overflow: hidden;  
}  
.nav {  
    width: 165px;  
    float: left;  
    background-color: #58b744;  
    margin-bottom: -1000px;  
    padding-bottom: 1000px  
}  
.image {  
    width: 330px;  
    height: 200px;  
    float: left;  
    margin: 0px 20px;  
    background-color: #808080;  
}  
.text {  
    background-color: #800080;  
    padding-top: 10px;  
    text-align: left;  
    vertical-align: top;  
    margin-left: 190px;  
    min-width: 1px;  
}  
.text table {  
    width: 100%;  
    margin-top: 10px;  
}  
#spaltenbreite {  
    width: 50%;  
}  

Ich würde mich über Vorschläge sehr freuen.