Welcome to WebmasterWorld Guest from 54.147.44.93

Forum Moderators: incrediBILL

Message Too Old, No Replies

Code Works in IE8 Not Firefox

Firefox, IE8

     

EricEC

7:34 pm on Jan 11, 2010 (gmt 0)

5+ Year Member



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

8:43 pm on Jan 11, 2010 (gmt 0)

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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

12:48 am on Jan 13, 2010 (gmt 0)

5+ Year Member



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

rocknbil

1:38 am on Jan 13, 2010 (gmt 0)

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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

4:09 pm on Jan 13, 2010 (gmt 0)

5+ Year Member



alright will do. Thanks!

EricEC

10:25 pm on Jan 13, 2010 (gmt 0)

5+ Year Member



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

Featured Threads

Hot Threads This Week

Hot Threads This Month