IE6 verschuiving <a>

[Verwijderd]

Beste tweakers,

Ik heb een klein IE6 probleempje. Hier is een testcase:

http://rudolfbos.nl/portfolio/oudersshoppenonline/

Zodra je over de button "Bezoek winkel" gaat (alleen in de #main div), verschuift de onderkant van de div 15px naar beneden in IE6. Andere browsers is het perfect. Het gaat dus om de button met class="bezoekbtn".

Iemand enig idee hoe het kan? Heb al van alles geprobeerd met clears, overflows, floats en display:inlines. Misschien kijk ik er overheen?

Hier nog even wat relevante code:

HTML:

<div class="greycontent">

    <div class="productmain">
        <a href="#" title="Quinny kinderwagen"><img src="img/producten/quinny-kinderwagen.jpg" width="101" height="150" alt="Quinny kinderwagen" /></a>
        <h2><a href="#">Quinny kinderwagen</a></h2>
        <p>&euro; 299,00</p>
        <a href="#" title="Bezoek winkel" class="bezoekbtn">Bezoek winkel</a>
    </div>

    <div class="productmain">
        <a href="#" title="Quinny kinderwagen"><img src="img/producten/quinny-kinderwagen.jpg" width="101" height="150" alt="Quinny kinderwagen" /></a>
        <h2><a href="#">Quinny kinderwagen</a></h2>
        <p>&euro; 299,00</p>
        <a href="#" title="Bezoek winkel" class="bezoekbtn">Bezoek winkel</a>
    </div>

    <div class="productmain">
        <a href="#" title="Quinny kinderwagen"><img src="img/producten/quinny-kinderwagen.jpg" width="101" height="150" alt="Quinny kinderwagen" /></a>
        <h2><a href="#">Quinny kinderwagen</a></h2>
        <p>&euro; 299,00</p>
        <a href="#" title="Bezoek winkel" class="bezoekbtn">Bezoek winkel</a>
    </div>   
        
</div>

Cascading Stylesheet:

.productmain { width: 140px; padding-right: 14px; text-align: center; float: left; }
.productmain img { margin-bottom: 15px; }
.productmain p { margin-bottom: 12px; }

.productmain a.bezoekbtn { margin: 0 auto 15px; }

a.bezoekbtn { width: 105px; height: 24px; display: block; background: url(../img/btn/buttons.gif); text-indent: -9999px; }
a:hover.bezoekbtn { background: url(../img/btn/buttons.gif) 0 24px; }

Alvast bedankt!

[ Voor 22% gewijzigd door Verwijderd op 18-02-2009 17:44 ]

[Pkunk]

Het eerste waar ik aan moet denken is hasLayout. Gooi eens een zoom:1 op de a-tjes

[Verwijderd]

Hoi Tim,

Dat heeft geen effect. Ik heb het zowel "zoom: 1;"op de class "a.bezoekbtn" gezet als op het "*-element", waardoor het overal op slaat. Beiden hebben geen effect.

[BtM909]

Zet eens een border eromheen en zie je die border dan verspringen of alleen de content?

[Grote Schurk]

Volgens mij is het de margin aan de onderkant.
Gooi eens een padding-bottom: 15px; op de .greycontent en verwijder dan die margin-bottom van de link.

[Verwijderd]

Verwijderd schreef op woensdag 18 februari 2009 @ 17:39:[ ... ]
Iemand enig idee hoe het kan? Heb al van alles geprobeerd met clears, overflows, floats en display:inlines. Misschien kijk ik er overheen?
[ ... ]

Cascading Stylesheet: css.css

.productmain a.bezoekbtn { margin: 0 auto 15px; }

[ ... ]

@ Ruudchen: IE6 is een eigenaardig beestje, met een eigenzinnige en orthodoxe render-engine. In je broncode vond ik transitional xhtml, waar IE6 gelukkig wel raad mee weet. Alleen in je CSS vond ik op regel 5 in je voorbeeld geen volledig gespecificeerde 'margin' declaratie(s). IE6 verslikt zich al snel in 'short-hand' notaties.

Heb je het al geprobeerd helemaal uit te schrijven? Bijv.:

Cascading Stylesheet: css.css

.productmain a.bezoekbtn {
margin-top: 0;
margin-right: auto;
margin-bottom: 15px;
margin-left: auto;
}

Hope it helps

[BtM909]

Verwijderd schreef op donderdag 19 februari 2009 @ 09:49:
[...]

@ Ruudchen: IE6 is een eigenaardig beestje, met een eigenzinnige en orthodoxe render-engine. In je broncode vond ik transitional xhtml, waar IE6 gelukkig wel raad mee weet. Alleen in je CSS vond ik op regel 5 in je voorbeeld geen volledig gespecificeerde 'margin' declaratie(s). IE6 verslikt zich al snel in 'short-hand' notaties.

Heb je het al geprobeerd helemaal uit te schrijven? Bijv.:

Cascading Stylesheet: css.css

.productmain a.bezoekbtn {
margin-top: 0;
margin-right: auto;
margin-bottom: 15px;
margin-left: auto;
}

Hope it helps

Dit is al de tweede keer dat je dit roept. Kan je dat ook staven met een bron of opzetje?

[Verwijderd]

@ FritsTpeij & BtM909:

Beide methoden werken niet. Ik werk vaak via shorthanded codes in de CSS, ook met margin en padding. Dit levert nooit problemen op bij mij in IE6.

Het probleem ligt ergens anders, maar ik heb geen idee wat. Ik heb alle elementen met margin-bottom: 15px al op 0px gezet, maar die verschuiving van 15px blijft bestaan.

EDIT @ BtM909:

Ik heb een border op de btn gezet en het is de content die verschuift. De button blijft 20px hoog. Er lijkt dus echt een extra margin onder te komen.

[ Voor 20% gewijzigd door Verwijderd op 19-02-2009 15:49 ]