href and onclick area on screen is miniscule and mispositioned - html

Question

The 'close window' image loaded by the code below is meant to be clickable.
When the page loads, everything displays properly but the area that is clickable is just a couple of pixels wide, a pixel or two high and just below and just above the centre of the image. I've included snips of code and relevant css.
All works just fine with IE9 in IE9 mode (the entire image is clickable). But the symptom I mentioned - the microscopic clickable area that isn't on the image occurs in Firefox 7, Chrome, Safari and Opera.
I've tried using an onclick in the image and tried putting the class declaration in the link tag but the same thing happens. I've also tried:
a {
display: block;
border: 1px solid white;
text-align: center;
}
I suspect I'll feel quite dumb when one of you points out the error of my ways.
I'm stumped.
.advCloser {
float: right;
padding: 5px 5px 0px 0px;
}
.advTitle {
position: relative;
top: -10px;
font-size: 125%;
padding: 0px 0px 0px 5px;
color: DarkBlue;
}
<div><img src="images/closeWindow.png" alt="Close window" class="advCloser"/><br/><div class="advTitle">Advanced configuration page</div></div>

Answer 1

You might get better results if you float the a tag, and not the image, also I would set the a tag to be a block with the same width and height as the image. This should make it work consistently with all browsers.
<style type="text/css">
.advCloser {
display: block;
height: 50px; /* set to the height of the image.*/
width: 50px; /* set to the width of the image.*/
float: right;
padding: 5px 5px 0px 0px;
}
.advTitle {
position: relative;
top: -10px;
font-size: 125%;
padding: 0px 0px 0px 5px;
color: DarkBlue;
}
<style>
<div>
<a class="advCloser" href="javascript:advConfigPageOpen();">
<img src="images/closeWindow.png" alt="Close window" />
</a>
<br />
<div class="advTitle">Advanced configuration page</div>
</div>
A slight alternative, without editing your existing classes may work as well:
<style type="text/css">
.advCloser {
float: right;
padding: 5px 5px 0px 0px;
}
.advTitle {
position: relative;
top: -10px;
font-size: 125%;
padding: 0px 0px 0px 5px;
color: DarkBlue;
}
.block-link {
display: block;
height: 50px; /* set to the height of the image.*/
width: 50px; /* set to the width of the image.*/
}
<style>
<div>
<a class="block-link" href="javascript:advConfigPageOpen();">
<img src="images/closeWindow.png" alt="Close window" class="advCloser" />
</a>
<br />
<div class="advTitle">Advanced configuration page</div>
</div>

Answer 2

Try adding a width to the image. Hopefully that will give the link tag something to work with in the compliant browsers.