✔ Totales FF - IE Desaster - Layout ist platt

Carrear · 31. Juli 2007

Ich habe meine Seite zu kleineren Teilen mit CSS konvertiert. Sieht im Firefox auch wirklich klasse aus. Aber im IE gibts 2 Probleme :

1. Die Zeilenhöhe ist trotz vieler konfliktvermeidender Maßnahmen unterschiedlich (das sieht dann echt doof aus) - in jeder ZEILE in der ein FORMULARELEMENT (wie Input oder Select Felder) steigt die Höhe der Tabelle im Vergleich zur Firefox Tabelle um 2 Pixel zu viel. Wo könnte ich die abzwacken?

2. Unten bleibt bei FF genauso wie bei IE ein mehr oder weniger großer weißer Überstehender Rand, den ich mit overflow: hidden; verbergen wollte. Jetzt sieht es bei FF perfekt aus, aber bei IE siehts komischaus.

Hier der Code:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style type="text/css">
#seitenbegrenzung{
    max-height: 500px;
    max-width: 650px;
    overflow: hidden;
    margin: 0px auto;
    padding: 0px;
    left: auto;
    right: auto;
    border: 1px solid #000000;
    background-color: #FFFFFF;
    }
 table{
     margin:0px;
    padding:0px;
    border:0px;
     table-layout:fixed;
    empty-cells:show;
    border-spacing:0px;
    border-collapse:collapse;
    background-image:url(/Bildurl);
    }
 tr, td{
      margin:0px;
    padding:0px;
    border:0px;
    border-spacing:0px;
    border-collapse:collapse;
    }
 body{
    border-bottom-width:0px;
    color:#000000;
    font-size:14px;
    }
 input{
     height:17px;
    margin:0px;
    padding:0px;
    vertical-align:middle;
    color:#000000;
    font-size:13px;
    font-weight:normal;
    }
 input.button{
     vertical-align:top;
    font-size:10px;
    }
 select{
      height:19px;
    margin:0px;
    padding:0px;
    vertical-align:middle;
    color:#000000;
    font-size:13px;
    font-weight:normal;
    }
</style>

<title>LUP24</title>
</head>
<body>
<div id="seitenbegrenzung">
<form action="/verarbeitung.php" method="post" name="microsite_pkv" lang="de">

<table width="650" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td height="297" colspan="2"></td>
    <td colspan="3"></td>
    <td width="13"></td>
    <td width="212"></td>
  </tr>
  <tr>
    <td height="21" colspan="2" cellpadding="0">Name</td>
    <td colspan="2">Vorname</td>
    <td>Anrede</td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td height="21" colspan="2" cellpadding="0"><input type="text" name="name" id="name" style="width:170px;" /></td>
    <td colspan="2" cellpadding="0"><input type="text" name="vorname" id="vorname" style="width:160px;" /></td>
    <td cellpadding="0"><select name="anrede" size="1">
      <option>Herr</option>
      <option>Frau</option>
    </select></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td height="21" colspan="2" cellpadding="0">Stra&szlig;e</td>
    <td width="95">HausNr.</td>
    <td width="77">Vorwahl</td>
    <td width="83">Rufnummer</td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td height="21" colspan="2" cellpadding="0"><input type="text" name="strasse" id="strasse" style="width:170px;" /></td>
    <td cellpadding="0"><input type="text" name="hausnummer" id="hausnummer" style="width:50px;" /></td>
    <td cellpadding="0"><input type="text" name="vorwahl" id="vorwahl" style="width:83px;"/></td>
    <td cellpadding="0"><input type="text" name="rufnummer" id="rufnummer" style="width:80px;" /></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td width="77" height="21"  cellpadding="0">PLZ</td>
    <td width="93">Ort</td>
    <td></td>
    <td colspan="2">Erreichbarkeit</td>
    <td></td>
    <td>Geburtsdatum</td>
  </tr>
  <tr>
    <td height="21"  cellpadding="0"><input type="text" name="plz" id="plz" style="width:83px;" /></td>
    <td colspan="2" cellpadding="0"><input type="text" name="ort" id="ort" style="width:130px;"/></td>
    <td colspan="2" cellpadding="0"><select name="erreichbarkeit" size="1">
      <option>Vormittag</option>
      <option>Mittag</option>
      <option>Nachmittag</option>
    </select></td>
    <td></td>
    <td cellpadding="0">
    <select name="geb_tag" size="1" style="width:40px;" >
              <option>01</option>
              <option>02</option>
              <option>03</option>
            <option>04</option>
            <option>05</option>
            <option>06</option>
            <option>07</option>
            <option>08</option>
            <option>09</option>
            <option>10</option>
            <option>11</option>
            <option>12</option>
            <option>13</option>
            <option>14</option>
            <option>15</option>
            <option>16</option>
            <option>17</option>
            <option>18</option>
            <option>19</option>
            <option>20</option>
            <option>21</option>
            <option>22</option>
            <option>23</option>
            <option>24</option>
            <option>25</option>
            <option>26</option>
            <option>27</option>
            <option>28</option>
            <option>29</option>
            <option>30</option>
            <option>31</option>
    </select>
    <select name="geb_mon" size="1" style="width:70px;" >
            <option value="01">Januar</option>
            <option value="02">Februar</option>
            <option value="03">M&auml;rz</option>
            <option value="04">April</option>
            <option value="05">Mai</option>
            <option value="06">Juni</option>
            <option value="07">Juli</option>
            <option value="08">August</option>
            <option value="09">September</option>
            <option value="10">Oktober</option>
            <option value="11">November</option>
            <option value="12">Dezember</option>
     </select>
     <input type="text" name="geb_jahr" id="geb_jahr" style="width:60px;" /></td>
  </tr>
  <tr>
    <td height="21" colspan="2" cellpadding="0">T&auml;tigkeit</td>
    <td colspan="3">Versicherung</td>
    <td></td>
    <td>E-Mail-Adresse</td>
  </tr>
  <tr>
    <td height="21" colspan="2" cellpadding="0">
        <select name="taetigkeit" size="1">
              <option>Artbeitnehmer</option>
              <option>Arzt</option>
              <option>Beamter</option>
              <option>Freiberufler</option>
              <option>Selbstst&auml;ndiger</option>
            <option>Student</option>
            <option>Zahnarzt</option>
        </select>    </td>
    <td colspan="3" cellpadding="0">
        <select name="versicherung" size="1" style="width:153px;">
            <option value="ARAG">ARAG</option>
                        <option value="Was Anderes">Was Anderes</option>
        </select>    </td>
    <td></td>
    <td cellpadding="0"><input type="text" name="email" id="email" style="width:160px;" /></td>
  </tr>
  <tr>
    <td height="18" colspan="5" cellpadding="0"><input type="checkbox" name="datenschutz" id="datenschutz" /> Ja, ich stimme den Datenschutzbestimmungen zu.</td>
    <td></td>
    <td cellpadding="0"><input class="button" type="submit" name="senden" id="senden" value="Abschicken" style="width:160px;" /></td>
  </tr>
  <tr>
    <td height="12" colspan="2"></td>
    <td colspan="3"></td>
    <td></td>
    <td></td>
  </tr>
</table>

</form>
</div>

</body>
</html>

Und hier noch zwei Screenshots. Zuerst von Firefox:

Und hier der vom Internet Explorer:

Maik · 31. Juli 2007

Hi,

setz mal die Polsterungseigenschaften des Formulars auf null:

Code:

form {
margin: 0;
padding: 0;
}

und wandel max-height in height, sowie max-width in width um, da der IE6 diese Eigenschaften nicht unterstützt.

Carrear · 31. Juli 2007

Hi,

ich habe jetzt folgende zwei Dinge noch eingefügt:

Code:

* {
    padding: 0px; 
    margin: 0px; 
    position:relative;
    }
form {
    margin: 0px;
    padding: 0px;
    }

Also auch deinen Tipp befolgt. Hat aber im Internet Explorer nichts gebracht

Mir fällt gerade auf, dass sich eine Kleinigkeit doch geänderthat: Der schwarze Rahmen, der so groß ist hat jetzt keinen Außenabstand zum Fenster hin mehr. Aber mehr nicht.

Maik · 31. Juli 2007

Gibt es denn evtl. eine Online-Version der Seite, um das mal "live" betrachten zu können?

Carrear · 31. Juli 2007

Habe jetzt erstmal das große Problem lösen können. max-height und max-width habe ich einfach wieder durch ein "normales" width und height ersetzt. Dann ist der Rahmen genau da wo er hingehört. Jetzt ist nur noch das Problem mit den Zeilenhöheabweichungen. Mit Line-height an verschiedenen Stellen ließ es sich nicht beheben. Ich habe jetzt an eine Browserweiche via JS gedacht. Dazu habe ich auch einen Thread im JavaScript Forum geschrieben.

Ich hoffe meine Erkenntnis kann auch anderen weitehelfen

Danke auf jeden fall schonmal für die Hilfe.

✔ Totales FF - IE Desaster - Layout ist platt

Carrear

Erfahrenes Mitglied

Maik

Carrear

Erfahrenes Mitglied

Maik

Carrear

Erfahrenes Mitglied

Neue Beiträge