[HTML] - Bild in Div als Link (IE6)

Hendoul

Commander
Registriert
Apr. 2008
Beiträge
2.049
Hi

Ich habe das Problem, dass im IE6 ein 3px grosser Abstand entsteht wo keiner sein sollte.
Unter dem Bild (171x118px) ist ein kleiner Abstand zu sehen, bevor der Rahmen und die Textbox kommt. Weiss jemand woran das liegt?

PHP:
<div class="catBox">
            <div class="homeOffersImageBox">
                <a href="{$link.url}">
                    <img src="/opo/catalog/product/01/gruppe49/bohrer.jpg" style="border: none" />
                </a>
            </div>
            <div class="homeOffersTextBox">
                <xsl:call-template name="text.truncate">
                    <xsl:with-param name="text" select="$prod/node-data/heading" />
                    <xsl:with-param name="max.length" select="110" />
                </xsl:call-template>
            </div>
            <div class="homeOffersWhiteBox">
                <table style="width: 100%">
                    <tr>
                        <td class="homeOffersLink">
                            <a href="{$link.url}">zum Produkt</a>
                        </td>
                        <td class="homeOffersPrice">
                            CHF 165.00
                        </td>
                    </tr>
                </table>
            </div>  
		</div>

div.homeOffersImageBox
{
	width: 171px;
	height: 118px;
}

div.homeOffersTextBox
{
	height: 58px;
	width: 167px;
	padding-left: 4px;
	padding-top: 4px;
	border-top: 1px solid #878787; 
}

 
Kann ich jetzt gerade nicht testen, aber versuche mal, dem Bild im CSS ein float:left oder right hinzuzufügen.
 
Da ist wohl irgendwo ein margin gesetzt bzw. wird vom IE 6 als Standard verwendet. Versuch mal, alle margins, die in Frage kommen, der Reihe nach auf 0 zu setzen, bis du (hoffentlich) herausfindest, welcher es ist.
 
Setz am besten noch die ganzen padding, margin und border-spacing auf 0, dann sollte das eigentlich behoben sein.

Gruß Timo
 
Die margin und padding für links und bilder waren schon alle auf 0, sorry, wollte nicht das ganze CSS Zeugs posten.

Aber ich habe die Lösung gefunden:
http://xhtmlforum.de/33487-bild-auf-den-boden-eines-div.html

Anscheinend nimmt sich der IE6 Platz für irgendwelche Schriften die da unten raushängen könnten :D
In diesem Zusammenhang kam mir dann auch wieder der 3px Bug bekannt vor.

Lösung: Einfach für das Bild "display: block" definieren und gut ist :)
 
Oder das ganze in eine Zeile schreiben, ohne Leerzeilen oder Spaces:
HTML:
<div class="homeOffersImageBox"><a href="{$link.url}"><img src="/opo/catalog/product/01/gruppe49/bohrer.jpg" style="border: none" /></a></div>
 
Zurück
Oben