Vertical text alignment i en div
Følgende er ved at drive mig til vandvid:<div class="wbar_tm">
En lille test!
</div>
og:
.wbar_tm {
width:262px;
height:60px;
float:left;
background-image:url(image/wbar_tm.gif);
padding-top:25px;
overflow:hidden;
}
Problemet er at "overflow:hidden" ikke får effekt. I IE6 bliver grafikken i "background-image" kun tegnet én gang - uanset "overflow" indstilling. Og resultatet er som forventet.
I andre browsere (Opera 7.23, Netscape 7.1, Firefox 0.8) gentages grafikken nedad pga. "padding-top" indstillingen. Det burde "overflow:hidden" så cutte af - men nej! Den gentages alligevel.
Hvis jeg sætter "no-repeat" på "image-background" forsvinder grafikken helt. Dvs. den bliver forskud, og da den ikke bliver gentaget kan jeg ikke se den - på nær i Opera, hvor no-repeat slet ikke får effekt.
Derfor: hvordan dælen får jeg justeret teksten nedad, uden at grafikken følger med?
Jeg har prøvet at lave endnu en div inden i - så den yderste inderholder grafikken, og den inderste indeholder teksten, så jeg kan justere dem hver for sig, men så opfatter IE justeringen anderledes end alle de andre browsere, og så er jeg lige vidt.
Nogen gode idéer?
