The code below is supposed to load an image of a 'close window' button that should be clickable. However, when the page loads, the clickable area is only a couple of pixels wide and a pixel or two high, positioned just below or above the center of the image. Here are snippets of the code and relevant CSS:
In Internet Explorer 9 in IE9 mode, everything works fine (the entire image is clickable). However, in Firefox 7, Chrome, Safari, and Opera, there is this issue with the tiny clickable area not aligning with the image.
I have tried adding an onclick function to the image and including the class declaration in the link tag, but the problem persists. I also attempted the following:
a {
display: block;
border: 1px solid white;
text-align: center;
}
I have a feeling that I'm missing something obvious here, and I'll probably kick myself once someone points it out.
Currently, I am at a loss.
.advCloser {
float: right;
padding: 5px 5px 0px 0px;
}
.advTitle {
position: relative;
top: -10px;
font-size: 125%;
padding: 0px 0px 0px 5px;
color: DarkBlue;
}
<div><a href="javascript:advConfigPageOpen();"><img src="images/closeWindow.png" alt="Close window" class="advCloser"/></a><br/><div class="advTitle">Advanced configuration page</div></div>