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

Hendoul

Lt. Commander
Dabei seit
Apr. 2008
Beiträge
1.574
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; 
}
 

bruteforce9860

Lt. Commander
Dabei seit
März 2009
Beiträge
1.801
Kann ich jetzt gerade nicht testen, aber versuche mal, dem Bild im CSS ein float:left oder right hinzuzufügen.
 

NullPointer

Lt. Commander
Dabei seit
Okt. 2009
Beiträge
1.570
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.
 

yoT!mO

Commander
Dabei seit
März 2007
Beiträge
2.700
Setz am besten noch die ganzen padding, margin und border-spacing auf 0, dann sollte das eigentlich behoben sein.

Gruß Timo
 

Hendoul

Lt. Commander
Ersteller dieses Themas
Dabei seit
Apr. 2008
Beiträge
1.574
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 :)
 

tecilein

Lt. Commander
Dabei seit
Mai 2006
Beiträge
1.278
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>
 
Top