Code Works in IE8 Not Firefox

Firefox, IE8

[EricEC]

Hello all,

I have a quick question which hopefully has a quick answer, although I am not sure. I have the following code...

<div class="preGameIcon">
<center><a href="<?=$gameLink;?>" title="<?=$gameName;?>"><br />
<img src="<?=$gameIcon2;?>" width="300" height="250" style="border:2px solid #000000" alt="Play <?=$gameName;?>" /><br />CLICK HERE TO PLAY GAME</a></center>
</div>

The problem with this code is that when you try to click my image to advance to the next page, the image is not clickable in firefox, but it is clickable in IE8. I cannot figure out for the life of my why that might be and was wondering if anyone had any input.

The 300x250px image is the problem.

Thanks in advance!

Eric

[edited by: incrediBILL at 7:51 pm (utc) on Jan. 11, 2010]
[edit reason] no link drops, url removed [/edit]

[rocknbil]

I can safely say, that code alone is not the problem. It should work. What I'm saying is there is probably some code before this in the source that's causing the problem.

This will be revealed by validating the output [validator.w3.org]. I see two things right off, although these are not related to the problem, but one of them will kick a validation error.

- <center> is deprecated, use some semantic element and style it, like

<p style="text-align:center"><a href="<?=$gameLink;?>" title="<?=$gameName;?>">
<img style="margin:16px 0 16px 0;" src="<?=$gameIcon2;?>" width="300" height="250" style="border:2px solid #000000" alt="Play <?=$gameName;?>" />CLICK HERE TO PLAY GAME</a></p>

Although not "a problem," the break tags inside the href may cause a "phantom line" before and after the image, like

-
image
-

because the image is surrounded by the anchor. You may not see this if you've styled your links with text-decoration:none. The bolded style above should give you a similar effect without the artifact.

[EricEC]

I validated that page and it passsed. Going to have to keep looking at it i guess. Thanks for the input!

[rocknbil]

The only other thing I can suggest is you have absolute positioning at play and one of the higher layers is "covering up" the link. I've seen this in the wild.

Go through your style sheet and add borders on the major elements . . . see if anything is covering up the linked area.

[EricEC]

alright will do. Thanks!

[EricEC]

that did the trick. It was the absolute positioning. Thank you so much for your help!