Temat: png i problem z linkiem - IE6

Cześć,

walczę z następującym problemem. Na warstwie(thickbox) mam wyświetlany katalog. Aby zamknąć warstwę mam następujący przycisk:

<div id="close-wrapper">
<a id="close-button-catalog" onclick="tb_remove()" href="#"><img alt="zamknij" src="img/layer_form_close_img.gif" /></a>
</div>

Do tego mam style:

#TB_ajaxContent #close-wrapper
{
background: transparent url(../img/catalog_layer_close_bg-trans.png) 0 0 no-repeat;
width: 67px;
height: 89px;
position: absolute;
top: -32px;
left: 954px;
z-index: 150;
}


#TB_ajaxContent #close-wrapper a#close-button-catalog
{
display: block;
padding: 23px 0 0 24px;
position: relative;
}

Tło przycisku jest przeźroczystym png. Przeźroczystość użyskuje za pomocą ie7-js. Problem w tym, że pod IE6, pomimo dodania paddingu obszar klikalny pozostaje tylko w miejscu gdzie padding = 0. Jednym słowem obrazek wewnątrz <a> nie jest klikalny a tylko górny róg. Próbowałam już pozycjonować link z obrazkiem absolutnie. Mam ten sam efekt. Jak mam gif'a to ten problem nie występuje, ale niestety potrzebuję w tym miejscu png.

Temat: png i problem z linkiem - IE6

Problem rozwiązany:

"wyrzuciłam" link poza div'a close-wrapper, padding zamieniłam na margin i dodałam do obrazka. Dalej link pozycjonuje absolutnie, tak by znalazł się nad obrazkiem:

#TB_ajaxContent a#close-button-catalog
{
display: block;
width: 18px;
height: 18px;
position: absolute;
top: -9px;
right: 2px;
z-index: 160;
}

Pod ff 2, opera 9 i ie6 działa.Olga Grabek edytował(a) ten post dnia 04.10.08 o godzinie 09:01