onlick not responding in padding area in IE

onclick area padding IE issue

[Michael Slater]

I have a headline (H2 tag) that has an onclick observer so when it is clicked the subtopics below it are displayed (by enabling the display of a div). This all works fine.

Now, I add a background image of a triangle, so I get the "expand/collapse" triangle rotation effect, and this too works fine -- almost. It's all good in Firefox. In IE6/PC (not sure about other versions), it only works if you click on the heading text, and NOT if you click on the triangle.

The triangle is a background image, displayed in a padding area to the left of the heading. So it seems that in Firefox, the onclick area includes the padding area, and in IE, it does not.

Here's the essence of the CSS for the expanded and collapsed headings:

.section_head_expanded {
padding-left: 20px;
background: url('/images/expanded.gif') no-repeat left bottom;
}
.section_head_collapsed {
padding-left: 20px;
background: url('/images/collapsed.gif') no-repeat left bottom;
}

Any suggestions for how to make this work properly in IE?

Thanks,

Michael

[Marshall]

Hi Michael and welcome.

Without seeing the CSS relevant to the <a> in connection with the <h2>, I can only suggest adding

display: block;

to the <a>, e.g.

.section_head_expanded h2 a {
padding-left: 20px;
background: url('/images/expanded.gif') no-repeat left bottom;
display: block;
}

.section_head_collapsed h2 a {
padding-left: 20px;
background: url('/images/collapsed.gif') no-repeat left bottom;
display: block;
}

Otherwise:

h2 a.section_head_collapsed {
padding-left: 20px;
background: url('/images/collapsed.gif') no-repeat left bottom;
display: block;
}

Granted, I just modified the CSS you provided and you may have to play with it a little, but you definitely need the display: block to have the entire <h> tag act as a href. Just know, you cannot click on a background image.

Marshall