HX3 Foren - [HTML/CSS]Internet Explorer zickt bei Padding

HX3 Foren (https://hx3.de/)

- Software- und Webentwicklung (https://hx3.de/software-webentwicklung-23/)

- - [HTML/CSS]Internet Explorer zickt bei Padding (https://hx3.de/software-webentwicklung-23/html-css-internet-explorer-zickt-padding-11780/)

[HTML/CSS]Internet Explorer zickt bei Padding

Hi, ich habe ein kleines Problem. Auf einer Website sollen 9 Bilder dargestellt werden. jedes einzelne mit einem Außenabstand von 5px (padding). Der Mozilla und Opera Browser stellt die Website wie gewünscht da. Das einzigste problem bereit der IE indem er die Aussenabstände überhaupt nicht interpretiert.

Ich hab leider keine Ahnung woran es liegt und wäre deshalb dankbar wenn mit hier jemand helfen könnte. :confused:

http://schomsen.fiberworld.nl/bewerbung/

HTML-Code:

<html>

 <head>

 <title>Bewerbungs Referenzen</title>

  <style>

   body {

          padding: 30px;

          background-image: url(img/background.gif);

          }

   .maindiv {

          width: 500px;

          background-color: #ffffdd;

          border: 2px solid #FFAA00;

          padding: 10px;

          }

   .maintablecell {

          margin: 5px;

          }

   .images {

          padding: 5px;

          }

   .header {

          text-align: center;

          vertical-align: middle;

          font-family: tahoma, verdena, arial;

          font-size: 8pt;

          border: 2px solid #dddddd;

          padding: 5px;

          background-color: #ffffee;

          font-weight: 900;

          }

  </style>

  <body>

   <div class="maindiv">

   <center>

    <p class="header">Bewerbungs Referenzen:</p>

    <table class="maintable" cellpadding="0" cellspacing="0" border="0">

     <tr>

       <td><a target="blank" href="img/01.jpg"><img class="images" border="0" alt="01.jpg" src="img/vorschau/01.jpg"></a></td>

       <td><a target="blank" href="img/02.jpg"><img class="images" border="0" alt="02.jpg" src="img/vorschau/02.jpg"></a></td>

       <td><a target="blank" href="img/03.jpg"><img class="images" border="0" alt="03.jpg" src="img/vorschau/03.jpg"></a></td>

     </tr>

     <tr>

       <td><a target="blank" href="img/04.jpg"><img class="images" border="0" alt="04.jpg" src="img/vorschau/04.jpg"></a></td>

       <td><a target="blank" href="img/05.jpg"><img class="images" border="0" alt="05.jpg" src="img/vorschau/05.jpg"></a></td>

       <td><a target="blank" href="img/06.jpg"><img class="images" border="0" alt="06.jpg" src="img/vorschau/06.jpg"></a></td>

     </tr>

     <tr>

       <td><a target="blank" href="img/07.jpg"><img class="images" border="0" alt="07.jpg" src="img/vorschau/07.jpg"></a></td>

       <td><a target="blank" href="img/08.jpg"><img class="images" border="0" alt="08.jpg" src="img/vorschau/08.jpg"></a></td>

       <td><a target="blank" href="img/09.jpg"><img class="images" border="0" alt="09.jpg" src="img/vorschau/09.jpg"></a></td>

     </tr>

     <tr>

       <td><a target="blank" href="img/10.jpg"><img class="images" border="0" alt="10.jpg" src="img/vorschau/10.jpg"></a></td>

       <td></td>

       <td></td>

     </tr>

    </table>

    <p class="header">mailadress@gmail.com

   </div>

  </body>

</html>

AW: [HTML/CSS]Internet Explorer zickt bei Padding

Versuch doch mal bei < table ..... > cellspacing="4" zuzufügen.
Satt 4, kannst ja auch ne andere Grösse nehmen.
müsste eigentlich den Abstand der einzelnen Zellel regeln.
Hoffe es hilft...

AW: [HTML/CSS]Internet Explorer zickt bei Padding

Jo, das wäre schonmal ein anderer Lösungsvorschlag, müsste eigentlich funktionieren :)

Also danke erstmal :daumen:

Aber falls jemand noch eine Idee hat warum es nicht mit padding funktioniert kann er mir diese auch noch gerne noch mitteilen ;)

AW: [HTML/CSS]Internet Explorer zickt bei Padding

Padding ist Innenabstand. Margin ist Außenabstand.

Entsprechend musst du Margin verwenden - nen Innenabstand für ein Bild is irgendwo
widersinnig.
Innenabstand für die Tabellenzelle, in der sich das Bild befindet ist aber sowieso die
bessere Lösung - du willst ja, dass auch andere Elemente in der Zelle Abstand haben.

Grundsätzlich sollte man Padding nur bei Elementen verwenden, die _keine_ absoluten Größen
in die Richtung des Padding haben.

Also kein padding: 0 5px; mit width: 100px;

Das führt zum falschen Darstellen im Internet Explorer.

AW: [HTML/CSS]Internet Explorer zickt bei Padding

Ja, eigentlich haste Recht. Hat mich eben nur erst verwundert das es mit Opera und IE funktioniert hat - aber danke auch an dich für die flotte Hilfe :)