Problem mit Darstellung im IE 8/9

[Tronjer]

Ich habe ein Problem mit der abweichenden Darstellung vom FF zu den aktuellen Versionen des Internet Explorer auf dieser Seite, und zwar geht es um die Produktliste im linken mittleren Bereich.



Die Höhe des divs ist in beiden Browsern kongruent, aber offensichtlich scheint der IE die Abstände zwischen den <tr> Elementen anders zu interpretieren. Mir ist schleierhaft, warum.


Hier ist das die Liste betreffende CSS.

#produkte {
    position: relative;
    clear: both;
    background: #B4CDCD;
    color: black;
    font-size: 12px;
    height: 705px;
    z-index: 1;
    -moz-box-shadow: 5px 5px 5px #333;
    -webkit-box-shadow: 5px 5px 5px #333;
    box-shadow: 5px 5px 5px #333;
}

#produkte table {
    width: 560px;
    border-collapse: collapse;
    margin-left: 20px;
}

#produkte td {
    border-bottom: 1px dotted #00336e;
    padding: 10px 0px 5px 0px;
}

#produkte td.produkt-bild {
    width: 70px;
}

#produkte td.produkt-titel {
    width: 260px;
    font-size: 12px;
    font-weight: bold;
}

#produkte td.produkt-genre {
    width: 130px;
}

#produkte td.produkt-preis {
    width: 100px;
    color: white;
    text-align: right;
    background-image: url(../media/price_button4.png);
    background-repeat: no-repeat;
    background-position: 5px 23px;
    font-size: 12px;
}

#produkte a, a:hover, a:visited {
    color: #00336e;
    color: black;
}

#produkte tr span {
    margin-right: 13px;
}

 

[threadi]

Lass mal bei einer Spalte, z.B.

#produkte td.produkt-titel

die Breitenangabe weg. Der IE braucht manchmal eine flexible Spalte um sie korrekt darzustellen. Auch eine Ursache könnten die Innenabstände bei einzelnen Tabellenzellen sein.

 

[Tronjer]

Ich hatte vergessen, dass der IE Bildern einen Rahmen hinzufügt, und das waren bei den 10 Produktbildern dann mal eben 20 Pixel. Ein simples img {border: none} hat das Problem gelöst.