Anchor with Img not working in Firefox

Question

SusanHAllen 0 Light Poster

15 Years Ago

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;
}

html-css web-design

5 Contributors
16 Replies
397 Views
1 Year Discussion Span
Latest Post 13 Years Ago Latest Post by karthikreddy509

Dani AI

Generated 9 Months Ago

Short version: Firefox stops treating the visible image as a clickable link when the image is taken out of normal flow by absolute positioning while the anchor itself has no layout. That matches ’s observation (image clickable when the positioning was removed). Different browsers handle an absolutely positioned child inside an inline anchor differently, so IE might still make it work while Firefox won’t.

A reliable fix is to give the anchor the position and the box dimensions, and let the image fill that box. In other words, move the positioning to the link (not the IMG), make the link a block, and ensure it has width/height and a higher z-index if needed:

/* give the anchor the positioned box */
.contactlink {
  position: absolute;
  left: 600px;
  top: 350px;
  display: block;
  width: 200px;
  height: 133px;
  z-index: 1000;
  text-decoration: none;
}

/* make the image fill the link box */
.contactlink img {
  display: block;
  width: 100%;
  height: auto;
  border: 0;
}

If you prefer to keep the image absolute, instead make the anchor a positioned container (position: relative) and size the anchor to match the image so the clickable area is where the image appears.

Quick troubleshooting checklist:

Use Firefox DevTools (Inspector) to toggle rules and watch the box model; add a temporary background/outline to the anchor to see its clickable area.
Look for overlapping elements (parents with higher z-index or overlays). Temporarily set pointer-events: none on suspected overlays to test.
Don’t mix float and absolute on the same element; floats are ignored for absolutely positioned elements.
If you need absolute positioning relative to a section, make that container position: relative.

This explains why ’s float advice and ’s display:block tip pointed in the right direction, and why Firebug/’s inspector recommendation is useful for finding the exact overlay or sizing problem.

All 16 Replies

Kraai 56 Senior Poster

15 Years Ago

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 0 Newbie Poster

15 Years Ago

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.

Kraai 56 Senior Poster

15 Years Ago

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>

Borzoi 24 Posting Whiz

15 Years Ago

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.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

SusanHAllen 0 Light Poster · Answer 1 · 2010-11-16T18:15:18+00:00

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.

SusanHAllen 0 Light Poster · Answer 2 · 2010-11-16T19:42:21+00:00

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 0 Light Poster · Answer 3 · 2010-11-16T19:50:24+00:00

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). ??

SusanHAllen 0 Light Poster · Answer 4 · 2010-11-16T19:52:21+00:00

SusanHAllen 0 Light Poster

15 Years Ago

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

SusanHAllen 0 Light Poster · Answer 5 · 2010-11-16T20:03:14+00:00

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

SusanHAllen 0 Light Poster · Answer 6 · 2010-11-16T20:15:22+00:00

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 56 Senior Poster Featured Poster · Answer 7 · 2010-11-16T20:27:21+00:00

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 0 Light Poster · Answer 8 · 2010-11-16T20:29:45+00:00

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

Borzoi 24 Posting Whiz · Answer 9 · 2010-11-16T20:33:57+00:00

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 0 Light Poster · Answer 10 · 2010-11-16T20:57:13+00:00

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

Same css as previously posted.

Borzoi 24 Posting Whiz · Answer 11 · 2010-11-16T21:29:49+00:00

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 0 Newbie Poster · Answer 12 · 2012-10-08T09:42:05+00:00

try this:

use display to either block or inline-block

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

Anchor with Img not working in Firefox

Dani AI

Recommended Answers Collapse Answers

All 16 Replies

Recommended Answers