homepage Welcome to WebmasterWorld Guest from 54.234.147.84
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld

Home / Forums Index / Browsers / Firefox Browser Usage and Support
Forum Library, Charter, Moderators: incrediBILL

Firefox Browser Usage and Support Forum

    
Code Works in IE8 Not Firefox
Firefox, IE8
EricEC




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

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




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

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




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

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

rocknbil




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

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




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

alright will do. Thanks!

EricEC




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

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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Browsers / Firefox Browser Usage and Support
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved