Welcome to WebmasterWorld Guest from 220.127.116.11
Forum Moderators: incrediBILL
I have a quick question which hopefully has a quick answer, although I am not sure. I have the following code...
<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>
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!
[edited by: incrediBILL at 7:51 pm (utc) on Jan. 11, 2010]
[edit reason] no link drops, url removed [/edit]
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
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.
Go through your style sheet and add borders on the major elements . . . see if anything is covering up the linked area.