Why is link on "image" broken in IE, works in FF a

try to make the img full qualified. So instead of landscape.jpg try http://www.mysite.com/mydir/landscape.jpg.

What exactly are you trying to achieve? The code seems much too complex to me.

I tried your suggestion with a fully qualified URL, same problem in IE as before.

Any other suggestions?

Yeah, tell us what you're trying to achieve

Like I said, why are you using so much code for what appears to be a simple thing?

Have now tried a fix:

Instead of using <a href="url" .....>

I now use:

<a onclick="location.href='image-link-bug.htm'">

Which opens in same window on IE, FF and NE and OP

or this

<a onclick="window.open('image-link-bug.htm', '_blank')">

Which opens in new window and works in the four browsers tested.

Will this work crossbrowser or is this a bad thing to do?

I have seen some use
onclick="javascript: code here"

Do I need the "javascript:" part inside the onclick?

(****** TO THEPINEAPPLEHEAD: Have you tried to focus on what is my question here. This is a link issue. Should not be that hard to find the A tag in my code, or you could even try the code in a browser, preferably in IE to see what I'm talking about.

If you cannot manage to do that I cannot help you!

Why did RCK manage to figure out what I was asking about then
**** END TO THEPINEAPPLEHEAD)

bongobongo, why the insolent remarks towards TPH? I'm wondering the same thing. I've never seen so many span tags (nested) within a single element before. It looks like you just want an image and associated text to all be inside an anchor. But, you may have unneccesary code. IE may be chocking on the nested spans. Why can't you just answer his question?

Now for your code:
1) Why declare a div as display: block? It already is..
2) Why declare spans as display: block? They're by default inline. Just use divs
3) Why have you encapsulated the anchor within a div? You could have just styled the anchor.
4) The anchor, an inline element, can only contain other inline elements - but you've changed the spans to block. This may be part of the problem.
5) Why in the world would you rely on javascript for a link? Very inaccessible.

I'll assume that the first div is a container and styled elsewhere. Otherwise there'd be no need for it.

bongo;
Got to agree with TPH and Wolf and this one.
Move your img src to below your a href and it works just fine, albeit the original look is altered... but you can accomplish what it looks like you want with far less code and without all the nested spans

I ask a very specific question:

In this case:

Why does not a click on the image (in the code in my first post) not work in IE (6., have not tested in other versions of IE, but it works in FF, OP and NE?

And, I need the nested SPAN tags within the A tag.
A div tag inside an A tag is not valid.
I have my reasons, what you see is only a part of more code, but I extracted the problem code for easier reading.

The code validates here:
http://validator.w3.org/

I know the way I use styling here both looks bad and should be in a separate stylesheet or inside head section within some style tags. But that is not the issue here.

The issue is that the click does not work in IE.
That is probably an IE bug.
And my question was.. again...

is there a way to make it work in IE as well without removing my SPAN tags. It's that simple and should be easy enough to understand.

I do not really see why I should post all of my original code to get answer to a really simple question.

And then why did I bother to send that specific message to THEPINEAPPLEHEAD:
In another question, from yesterday, I asked another simple question. I also attached some tiny code.
Here THEPINEAPPLEHEAD could never bother to answer the question, BUT he had to comment several times that the attached code was missing DOCTYPE part.

Well, in this question I supplied the DOCTYPE PART, and so what, this guy (in my opinion) does not seem willing to try to understand what I'm really after.
So with that background I felt I could give him the message without feeling as the bad guy here.
I still do not feel bad, just feel THEPINEAPPLEHEAD should try to focus on problemsolving. I thougt problemsolving was the vey cause of this forum.

So I would very much appreciate some suggestions on how to solve the problem in my first post here.

Untill next time....

<br><br>LINK ON "IMAGE" does not work in IE 6.0, works fine in FF, OP, ...<br><br>
<div style="width:200px;background:gray;">
<a href="image-link-bug.htm" style="text-decoration:none;cursor:pointer;color:white;">
<img src="landscape.jpg" width="40px" height="40px" alt="" style="border:0;float:left;
padding-right:10px;">

When you click on the image to the left the link does not work in IE 6.0. If you click on this text it works fine. Why is that. It works great in FF and OP though.<br><br>
Is there a fix for this without having to remove my SPAN tags?
</a>
</div>

I find it strange that you post that suggestion.

Did you not read my question and the code.

I need the SPAN tags.

So your suggestion works perfectly well in all other settings than mine.

Will it not work crossbrowser?
Or is there any other reason?

If you know there is a problem why do you not tell what the problems are then.

Best regards

Well.... just curious... my posted code renders virtually identical to your posted code and works in FF and IE does it not?

Yes, I read your post and the "need" for span tags... I was just offering an alternative that works, and renders the same as yours without the spans.

As to why the spans don't work... your guess is as good as mine... it's IE we're dealing with here after all.

Maybe a live link would help so we can understand the need for all the spans?

Just a cautionary note can we ensure that the thread remains civil please and doesn't heat up too much.

Bongobongo the others are trying to help with solving this issue for you and this may well entail suggesting that code that you have used may be partly to blame even if you have mentioned that you feel as though it's required.

The problem everyone is seeing as the potential cause of this is the use of the spans and it would help if you could explain why it is that you think them necessary, looking at the code snippet you offer would prompt me to ask the same questions as above and to say that it's not really the correct or best way of going about things and indeed a alternative method has been shown to you so we really do need to know why it is that the spans are so important.

As for the javascript that's not really the answer to switch to scripting to get around the problem and leaves the new potential problem of no links if scripting is turned off in the UA.

Hugo.

Why is it bad to use onclick="location.href='......link'" ?

Will it not work crossbrowser?
Or is there any other reason?

I'm developing some code at the moment, have no site to show.

I just found it "#¤% that the code did not work in IE and needed a workaround/fix for it.

Best regards

Hello, me again

Sorry if I'm going to revert back to my question I've asked twice (let's keep this civil).

I can't help you with the problem you're having, but my original question:

is still valid.

I apologise, but I still cannot understand what you are trying to achieve, and why you need so much code for it.

As for trying the code in a browser - I did. I copied it in exactly, there was a brown box, with the text cut off, and an image. The whole thing seemed to be a hyperlink, which is why I was confused by the enormous code.

You keep saying that you need the spans, and likely you do. But the question you have not answered is what you are trying to accomplish. We see how you're attempting it, and since it looks strange, unwieldy, nonsemantic, and of questionable structure, we feel that if we knew what the desired result was one or another of us might see a different approach to take. And maybe not.

The point is, you don't know how (at least yet) to make it work in IE, but you're hobbling us in our efforts to find a solution; one that might still meet your unspoken requirements, if we only knew what they were.

In any case, by applying the old 'whack it back 'til it works' method of debugging, the following code works with your html as it is. All attributes except href and alt have been removed. Start adding them back one at a time until it breaks (now you know the culprit), or it's as you want it.

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
  <head> 
    <meta http-equiv="content-type" content=" 
    text/html; charset=utf-8"> 
    <title> 
      IE link over image is not working. Works fine in FF and OP 
    </title> 
  </head> 
  <body> 
    <div> 
      <p> 
        LINK ON "IMAGE" does not work in IE 6.0, works fine in FF, 
        OP, ... 
      </p> 
      <div> 
        <a href="image-link-bug.htm"> 
          <span> 
            <span> 
              <img src="../bullseye.jpg" alt=""> 
            </span>
            <span>When you click on the image to the left the link 
              does not work in IE 6.0. If you click on this text it 
              works fine. Why is that. It works great in FF and OP 
              though.<br><br> Is there a fix for this without having 
              to remove my SPAN tags? 
            </span> 
          </span> 
        </a>  
      </div> 
    </div> 
  </body> 
</html>

Hi again. I'm not trying to be a jackass here. Belive me.

And I am sorry if anyone feels offended by my language.

Back to my problem again.

I found something odd though.

As I said, if you clicked the image in IE (6. the link did not work.

What I found now was that if you right-click on the image in IE and select "Open link" or "Open link in new window" then it works well.

So I assume there is a bug in IE.

I might be wrong about that.

But I would still like it to be possible for me to make it work in IE as well. It works perfecty well in the rest of the browsers I tested in.
FF, NE, OP.

Here is the same code with no dissapearing text

And why do I not explain to you guys WHY I want it to work in the SPAN tags. Well, do I have to?

I have had another "funny" experience with IE rendering pages and that was in my previous post.
That one turned out to be doable by a very odd workaround, but it works fine.

I was hoping for a workaround here also (for IE).

Code below.

Best regards.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<TITLE>Link over image is not working in IE. (Tested in IE 6.0)</TITLE>
</head>

<body>
<div>
<br><br>
<span style="display:block; width:200px; background-color:gray;"> 
<a href="image-link-bug.htm" style="text-decoration:none;">
	<span style="cursor:pointer; display:block; text-align:left; padding:10px;">
		<span style="display:block; float:left">
				<img src="landscape.jpg" width="40px" height="40px" alt="">
		</span>
		
		<span style="display:block; color:white; font-family:arial, sans-serif;">
			When you click on the image to the left the link does not work in IE 6.0. If you click on this text it works fine. Why is that. It works great in FF and OP though.<br><br>
			Is there a fix for this without having to remove my SPAN tags?<br><br>
			NOTE: If you right-click on the image in IE and select Open link, or Open link in new window it works, also in IE.<br><br>
			For me this looks like a bug in IE.<br><br>
			I'm looking for a fix/workaround to make it work, and yes, with the span tags :-)<br><br>
			And please, do not bother about the other code here, e.g. the input at the end of page etc.
		</span>
	</span>
</a>
</span>
</div>
<br><br>
Name:<input type=text size=30 value="">

</body></html>

Try it this way instead... works in IE and I can't see any difference in the way it renders...

<span style="display:block; width:200px; background-color:gray;">
<span style="cursor:pointer; display:block; text-align:left; padding:10px;">
<span style="display:block; float:left">
<a href="image-link-bug.htm" style="text-decoration:none;">
<img src="landscape.jpg" width="40px" height="40px" alt="">
</span>

I cannot see your code look the same.

I want up to one image, and up to two text( inside same block. I want one link for the whole block.

Nested A tags do not work well, as I know it. So therefore I put the A tag around the BLOCK that the other parts text and image are within.

I want the cursor:hand to show up everytime someone move the mouse over my Block that contains the content in question (text and image), and I want the link for the block to trigger when someone clicks inside the block area, on the text, outside the text but in the block, or right on the image.

Thats it, then with words.

It might be a challenge, but hey, it might also be a solution to my problem.

Anyone care to take the challenge to make it work (in IE also) without changing the way I put out the SPAN tags.

These days people are buying property in cyberworld so why not:
One cyberbeer to the one that makes it work

Now I have to crawl one floor upwards and ask for permission to get very late to bed.

Maybe tomorrow bring the long sought workaround

Best regards

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<TITLE>Link over image is not working in IE. (Tested in IE 6.0)</TITLE>
</head>

<body>
<div>
<br><br>
<span style="display:block; width:200px; background-color:gray;"> 
<a href="image-link-bug.htm" style="text-decoration:none;">
	<span style="cursor:pointer; display:block; text-align:left; padding:10px;">
		<span style="display:block; float:left">
				<img src="landscape.jpg" width="40px" height="40px" alt="">
		</span>
		
		<span style="display:block; color:white; font-family:arial, sans-serif;">
			When you click on the image to the left the link does not work in IE 6.0. If you click on this text it works fine. Why is that. It works great in FF and OP though.<br><br>
			Is there a fix for this without having to remove my SPAN tags?<br><br>
			NOTE: If you right-click on the image in IE and select Open link, or Open link in new window it works, also in IE.<br><br>
			For me this looks like a bug in IE.<br><br>
			I'm looking for a fix/workaround to make it work, and yes, with the span tags :-)<br><br>
			And please, do not bother about the other code here, e.g. the input at the end of page etc.
		</span>
	</span>
</a>
</span>
</div>
<br><br>
Name:<input type=text size=30 value="">

</body></html>

Did not go to bed after all

The problem with IE was that I put float:left the wrong place.

Instead of using float:left in SPAN around the image I put float:left in the img tag .. style="float:left"

And the HTML validator does not complain.

Now I can have breakfast in 3 hours.

Best regards

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<TITLE>Solved: Link over image is not working in IE. (Tested in IE 6.0)</TITLE>
</head>

<body>
<div>
<br><br>

<span style="display:block; width:200px; background-color:gray;"> 
<a href="image-link-bug.htm" style="text-decoration:none;">
	<span style="display:block; cursor:pointer; text-align:left; padding:10px;">

		<span style="display:block;">
				<img src="landscape.jpg" width="80px" height="80px" alt="" style="margin-right:10px; border:0; float:left">
		</span>
	
		
		<span style="display:block; color:white; font-family:arial, sans-serif;">
			SOLVED:<br><br>
			Removed the float:left from span around image to image itself did the trick.<br><br>
			When you click on the image to the left the link does not work in IE 6.0. If you click on this text it works fine. Why is that. It works great in FF and OP though.<br><br>
			Is there a fix for this without having to remove my SPAN tags?<br><br>
			NOTE: If you right-click on the image in IE and select Open link, or Open link in new window it works, also in IE.<br><br>
			For me this looks like a bug in IE.<br><br>
			I'm looking for a fix/workaround to make it work, and yes, with the span tags :-)<br><br>
		</span>
	</span>
</a>
</span>
</div>


</body></html>

Let me get this right

You wanted a coloured block, containing picture and text, and you could click anywhere on the box to open it as a link?

Glad it's solved though.