Anchor with Img not working in Firefox

[SusanHAllen]

Please help me find out why the following isn't working in Firefox -- works fine in IE!

HTML:

<asp:HyperLink runat="server" NavigateUrl="~/ContactUs.aspx"><img class="contactus" border="0" src="images/ContactUs_200.jpg" alt="Contact Us"/></asp:HyperLink>

CSS:

body {
	font-family : Verdana, Arial, sans-serif ;
	font-size : 9pt;
	background-image:url(../images/red.jpg);
	background-repeat:repeat-y;
}

a {
	text-decoration: none;
	color:red;
	display: block;
}

a:hover {
	text-decoration: underline;	
	display: block;
}

.graybar {
	background-image:url(../images/gray.jpg);
	width:700px;
	height:55px;
	position: relative;
	left: 100px;
	padding-top: 10px;
}

.maintext {
	position: relative;
	left: 250px;
	font-size:14px;	
	background-image: none;
}
.contactform {
	background-color: white;
	position: relative;
	left: 250px;
	font-size:14px;	
}
.contactform table {
	background-color: white;
	background-image: none;
	background-repeat: none;
	
}

.maintext ul {
	font-style: italic;	
	list-style-type: none;
	padding: 0;
	margin: 0;	
}

.maintext ul ul  {
	margin-left: 40px;
}
.graybar h2 {
	position: relative;
	left: 150px;
	font-size: 14px;
}

.contactus {
	position: absolute;
	float: right;
	width:200px;
	height:133px;
	left: 600px;
	top: 350px;
	border: none;	
	display: block;
}

[Kraai]

Hi

I am no expert on ASP methods, but what I do know, is that sometimes a small mistake in the html part of a site, may be the cause that some things work in some browsers, but not in others, like forgetting a < somewhere, or using " where it should be single like ' or the other way around, and so on.

What I can make out from your script above, is that you want to link the image ContactUs_200.jpg to the ContactUs.aspx page.

What you did not tell us, is what exactly is not working in Firefox? Is the link not working, or is the image not displaying?

If it is the latter, try to insert the full path to the image, including the http:// part of it. If it is the link not working, try to use the <a href=> instead, if it is at all possible within the asp tags.

Let us know

[SaintThomas]

There may some times problems with browsers.
i suggest that you you plugin of firefox name is "firebug" with that you catch your error at runtime.

And another is you try your url with different way in Navigateurl="........"
Error in this line because firefox support some another way link.

[SusanHAllen]

Thank you, I'll try the plug-in. The issue is that there is no hover or enabled click in Firefox. Sorry if I was not specific.

[Kraai]

OK, if you cannot get the link in FF, try my suggestion to change the link to the full url, like so:

<asp:HyperLink runat="server" NavigateUrl="http://www.yoursite.com/full/path/to//ContactUs.aspx"><img class="contactus" border="0" src="images/ContactUs_200.jpg" alt="Contact Us"/></asp:HyperLink>

[SusanHAllen]

That didn't make any difference, changed to simple anchor tag as well. Something wrong with the css? Firebug doesn't show any errors.

[SusanHAllen]

The issue is something to do with the .contactus css... took it out of the img tag and the image is now clickable (but not appearing in the position on the page where it needs to be). ??

[Borzoi]

I don't see why you need to use asp to link to a page like you are. Correct me if I'm wrong but from what I can see, the image will always link to that ContactUs.aspx page and therefore you don't need any sort of scripting to get the link as it's static and not dynamic. I would recommend using an anchor with an href= in.

<a href="ContactUs.aspx"><img class="contactus" border="0" src="images/ContactUs_200.jpg" alt="Contact Us"/></a>

If ContactUs.aspx isn't in the same folder as the page the link is on, put the file path. use "../" for up a folder.

[SusanHAllen]

Please see my last post. Issue is in the css... ?

[SusanHAllen]

As soon as I apply the absolute positioning, the image is not clickable. Any hints?

[SusanHAllen]

Replaced page content with a table within class "maintext", now working fine. Still wondering what the issue is, though, I am trying to use more css instead of tables, but need cross-browser compatibility. Thanks.

[Kraai]

It seems that there are a few others having similar problems like you have. Firefox apparently is not very friendly with the .asp script in some cases, and there is workarounds for. Most of the solutions I saw, included tables in the html, so yes, I recon you are on the right track.

Good luck

[SusanHAllen]

Glad I'm not the only one! But as I said, didn't work with simple html vs asp. Thanks.

[Borzoi]

I don't know why a simple image linking to another page wouldn't work in HTML. Could we see the code you were using when you tried the pure HTML with no ASP?

[SusanHAllen]

<a href="ContactUs.aspx"><img class="contactus" border="0" src="images/ContactUs_200.jpg" alt="Contact Us"/></a>

Same css as previously posted.

[Borzoi]

There's nothing wrong with your HTML there and the CSS for the contactus class you have shouldn't affect it.

If there was any problem with your HTML or CSS, it could only be the link pointing to the wrong location but you said that the problem you're having is that it's not being clickable.

I've noticed that you're positioning the image as well as floating it to the side. Try just using one or the other.

[karthikreddy509]

try this:

use display to either block or inline-block

<a href="#" style="display:block;"><img src="sample.jpg"/></a>